我应该在哪里写 axios 代码来反应？

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

我相信你必须发出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 2

试试这个

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

在邮递员中检查你的 api 一次。

Answer 3

尽管写了axios.get、axios.post等方法。 我以前更喜欢编写一些通用方法，当我们需要向服务器发起任何请求以从 api 获取数据时需要调用这些方法。

我的示例代码.... 创建了一个文件作为 axiosService.js 并在需要时使用此文件，只需使用 ApplicationApiHostServ_Axios 方法和所需的所有参数集。

`/** * ApplicationApiHostServ_Axios 将返回 json 格式的数据... * @param {*} url - api 的路径... * @param {*} 方法 - GET / POST / PUT / DELETE /... * @param {*} responseType - 应用程序/json /.... * @param {*} data - 包含作为请求传递给 api 服务器的参数。 * @param {*} 回调 - 成功响应时执行的回调方法。 * @param {*} failCallback - 在失败响应时执行的 failCallback 方法。 */ ApplicationApiHostServ_Axios(url, method, responseType, data, callback, failCallback) { 让 ApplicationApiHost = new ApplicationApiHostServices(); 如果（方法=='get'）{ this.ApplicationApiHostServ_AxiosGet(url, responseType, data, callback, 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);
        });
}`