(vue、react)使用axios请求的接口状态监听处理

最新推荐文章于 2025-10-22 18:29:30 发布

原创最新推荐文章于 2025-10-22 18:29:30 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了在Vue和React中使用axios进行接口请求时的状态监听处理，包括请求前拦截、响应处理等关键步骤，强调了状态监听的重要性和不同写法。

(vue、react)使用axios请求的接口状态监听处理

完整流程
1、引入axios对象：

import axios from 'axios';

2、设置请求地址：

axios.defaults.baseURL = 'http://XXX.com';

3、请求超时时长设置：

axios.defaults.timeout = 180000; // 请求超时时间

4、设置请求头：

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';

5、请求接口的状态监听及处理（敲黑板！重点！重点！重点！）：
（1）请求前拦截处理：
箭头函数写法（比较推荐）

axios.interceptors.request.use(
  config => {
    ~这里是相应的处理逻辑~
    return config
    （说明：这里最后把传递的参数数据config完整返回，否则可能会出现你传参和服务端接口接收参数不一致的状况，一不小心会被自己气哭~）
  },
  error => {
    // 错误时
    console.log(error) 
    return Promise.reject(error)
  }
)

使用function的写法

axios.interceptors.request.use(
    function (config) {
        // 请求前的处理逻辑
        return config;
    },
    function (error) {
        // 请求错误时处理
        console.log(error) 
        return Promise.reject(error)
    }
)

（2）请求响应处理
箭头函数写法

axios.interceptors.response.use(
  response => {
    // 响应数据
    //  在这里搞处理逻辑，检查接口状态码啥的
    const res = response.data
    return res
  },
  error => {
    //  响应错误时处理
    return Promise.reject(error)
  }
)

使用function的写法

axios.interceptors.response.use(
    function (response) {
        // 响应数据处理
        //  在这里搞处理逻辑，检查接口状态码啥的
        return response;
    },
    function (error) {
        // 响应错误处理
        return Promise.reject(error);
    }
)

差不多就这样。

来一份完整代码
在这里插入图片描述
end