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

有关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取消请求和请求编码的相关内容

感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~

觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~