前端热门技术axios详细讲解（三）——拦截器

文章目录 一、拦截器的执行时机是什么？如何添加拦截器？添加请求拦截器：添加响应拦截器： 二、如何移除拦截器？
前言：
前面两篇讲了 axios的基本用法，以及 axios取消异步请求的方法，本篇文章继续讲述一下axios中拦截器的使用。拦截器是用来拦截请求体或响应体的一种处理机制。

一、拦截器的执行时机是什么？如何添加拦截器？

在.then或.catch之前。

添加请求拦截器：

axios.interceptors.request.use(function (config) {
    // 在发送请求之前的设置，如：
    config.headers.test = 'I am only a header!';
    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);

用 clear() 清除所有拦截器：

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
// Removes interceptors from requests
instance.interceptors.request.clear();
instance.interceptors.response.use(function () {/*...*/});
// Removes interceptors from responses
instance.interceptors.response.clear(); 

也可以为自定义 axios 实例添加拦截器。

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

以上就是拦截器的基本用法啦，其中注释的地方帮助大家理解的，我们可以在那些地方添加自定义配置、处理等。