Question

当我单击按钮时，我希望axios工作。然后，我编写这样的代码。

axiosGet.js

showState = () => {

        axios({
            url: 'http://127.0.0.1:8000/profile/',
            method: 'POST',
        })
        .then(res => {
        console.log(res);
        })
        .catch(err => {
            console.log(err);
        })
    }

...

render() {
     return (
          ...
          <button onClick={this.showState}>Show state</button>
          ...
     )
}

和 views.py

class SettingView(viewsets.ModelViewSet) :
    queryset = models.Category.objects.all()
    serializer_class = CategorySerializer

    def get(self, request) :
        return Response("ok")

    def post(self, request, format=None):
        return Response("ok")

没有回应，没有错误。

我不应该在普通事件处理程序中使用axios吗？还是在React中使用axios时我必须牢记任何要求？

Answer 1

尝试一下

axios.get('http://127.0.0.1:8000/profile/')
    .then(res => {
    console.log(res);
    })
    .catch(err => {
        console.log(err);
    });

一次检查邮递员中的api。

Answer 2

我相信您必须提出get而不是post的请求。您可以在res.data

中获取数据

    axios({
        url: 'http://127.0.0.1:8000/profile/',
        method: 'get',
    })
    .then(res => {
        console.log(res.data);
    })
    .catch(err => {
        console.log(err);
    })

Answer 3

尽管编写了axios.get，axios.post和其他方法。我惯用的是编写一些通用方法，当我们需要向服务器发送任何请求以从api获取数据时，都需要调用这些通用方法。

我的示例代码...。创建了一个文件axiosService.js 并在需要时使用此文件，只需将ApplicationApiHostServ_Axios方法与所有必需的参数集结合使用即可。

`/ ** * ApplicationApiHostServ_Axios将以json格式返回数据... * @param {*}网址-api的路径... * @param {*}方法-GET / POST / PUT / DELETE / ... * @param {*} responseType-应用程序/ json / .... * @param {*}数据-包含作为请求传递给api服务器的参数。 * @param {*}回调-成功响应时将执行的回调方法。 * @param {*} failCallback-在失败响应时将执行的failCallback方法。 * / ApplicationApiHostServ_Axios（网址，方法，responseType，数据，回调，failCallback）{ 让ApplicationApiHost = new ApplicationApiHostServices（）; if（method =='get'）{ this.ApplicationApiHostServ_AxiosGet（URL，responseType，数据，回调，failCallback）; } else if（method =='post'）{ this.ApplicationApiHostServ_AxiosPost（url，responseType，data，callback，failCallback）; } else if（method =='put'）{ this.ApplicationApiHostServ_AxiosPut（url，responseType，data，callback，failCallback）; } else if（method =='delete'）{ this.ApplicationApiHostServ_AxiosDelete（url，responseType，data，callback，failCallback）; } }

/**
 * ApplicationApiHostServ_AxiosGet will pass a get request, To call an api.
 * @param {*} url - Path to api...
 * @param {*} responseType - Application/json /....
 * @param {*} data - Contains parameters to be passed to api server as request.
 * @param {*} callback - A callback method to be ececuted on success response.
 * @param {*} failCallback - A failCallback method to be ececuted on fail response.
 */
ApplicationApiHostServ_AxiosGet(url, responseType, data, callback, failCallback) {
    axios.get(API_HOST_ADDRESS + url, data)
        .then((response) => {
            if (isFunction(callback))
                callback(response);
        })
        .catch(function (error) {
            if (isFunction(failCallback))
                failCallback(error);
            else if (process.env.NODE_ENV === 'development')
                console.log(error);
        });
}

/**
* ApplicationApiHostServ_AxiosPost will pass a post request, To call an api.
* @param {*} url - Path to api...
* @param {*} responseType - Application/json /....
* @param {*} data - Contains parameters to be passed to api server as request.
* @param {*} callback - A callback method to be ececuted on success response.
* @param {*} failCallback - A failCallback method to be ececuted on fail response.
*/
ApplicationApiHostServ_AxiosPost(url, responseType, data, callback, failCallback) {
    axios.post(API_HOST_ADDRESS + url, data)
        .then(function (response) {
            if (isFunction(callback))
                callback(response);
        })
        .catch(function (error) {
            if (isFunction(failCallback))
                failCallback(error);
            else if (process.env.NODE_ENV === 'development')
                console.log(error);
        });
}

/**
* ApplicationApiHostServ_AxiosPut will pass a put request, To call an api.
* @param {*} url - Path to api...
* @param {*} responseType - Application/json /....
* @param {*} data - Contains parameters to be passed to api server as request.
* @param {*} callback - A callback method to be ececuted on success response.
* @param {*} failCallback - A failCallback method to be ececuted on fail response.
*/
ApplicationApiHostServ_AxiosPut(url, responseType, data, callback, failCallback) {
    axios.put(API_HOST_ADDRESS + url, data)
        .then(function (response) {
            if (isFunction(callback))
                callback(response);
        })
        .catch(function (error) {
            if (isFunction(failCallback))
                failCallback(error);
            else if (process.env.NODE_ENV === 'development')
                console.log(error);
        });
}

/**
* ApplicationApiHostServ_AxiosDelete will pass a delete request, To call an api.
* @param {*} url - Path to api...
* @param {*} responseType - Application/json /....
* @param {*} data - Contains parameters to be passed to api server as request.
* @param {*} callback - A callback method to be ececuted on success response.
* @param {*} failCallback - A failCallback method to be ececuted on fail response.
*/
ApplicationApiHostServ_AxiosDelete(url, responseType, data, callback, failCallback) {
    axios.delete(API_HOST_ADDRESS + url, data)
        .then(function (response) {
            if (isFunction(callback))
                callback(response);
        })
        .catch(function (error) {
            if (isFunction(failCallback))
                failCallback(error);
            else if (process.env.NODE_ENV === 'development')
                console.log(error);
        });
}`

我应该在哪里在其中编写axios代码？

3 个答案: