Axios请求（对于ajax的二次封装）——Axios拦截器与错误处理

知识回调（不懂就看这儿！）

知识专栏	专栏链接
Axios知识专栏	https://blog.csdn.net/xsl_hr/category_12287421.html?spm=1001.2014.3001.5482
axios起步——介绍和使用 post请求	https://blog.csdn.net/XSL_HR/article/details/130141944
Axios API、Axios实例、请求配置、Axios响应结构	https://blog.csdn.net/XSL_HR/article/details/130159746
Axios请求的响应结构、默认配置	https://blog.csdn.net/XSL_HR/article/details/130163672?spm=1001.2014.3001.5501

有关Axios的相关知识可以前往Axios知识专栏查看复习！！

场景复现

最近学习与前端相关的小程序时，接触了异步请求api的封装和实现，涉及到了很多底层的基础知识，比如ajax和axios工具，因此计划用两个专栏来系统的学习关于axios和ajax的实用知识。
本期文章将重点介绍Axios请求的响应结构、默认配置。

核心干货

🔥🔥🔥axios官方中文文档：https://axios-http.com/zh/
🔥🔥🔥ajax文档：https://www.runoob.com/ajax/ajax-tutorial.html

axios拦截器

在请求或响应被处理之前拦截他们

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error); // 请求错误的回调函数
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error); // 请求错误的回调函数
  });

移除拦截器

采用eject方法移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

给自定义的axios实例添加拦截器

首先创建axios实例，然后定义自定义方法

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

实际开发中的自定义拦截器🔥

const request = axios.create()
// Request interceptors
request.interceptors.request.use(
    // 请求成功的回调
    (response) => {
        return response
    },
    // 请求失败的回调
    (error) => {
        Promise.reject(error)
    }
)

// Response interceptors
request.interceptors.response.use(
    // 响应成功的回调
    (response) => {
        return response
    },
    // 响应失败的回调
    (error) => {
        return Promise.reject(error)
    }
)

axios错误处理

对于axios请求错误处理的方法代码如下：👇👇👇（附详细注释）

// 发送get请求
axios.get('/user/12345')
  // 捕获请求错误的异常
  .catch(function (error) {
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码 但状态代码超出了 2xx 的范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起 但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例
      // 而在node.js中是 http.ClientRequest 的实例
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

使用 validateStatus 配置选项，可以自定义抛出错误的 HTTP code。

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 处理状态码小于500的情况
  }
})

使用 toJSON 可以获取更多关于HTTP错误的信息。

axios.get('/user/12345')
  .catch(function (error) {
    console.log(error.toJSON());
  });

---

以上就是关于Axios拦截器与错误处理的分享，相信看完这篇文章的小伙伴们一定有了一定的收获。当然，可能有不足的地方，欢迎大家在评论区留言指正！

下期文章将介绍axios取消请求和请求编码的相关内容 感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~ 觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~