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

Posted 2022-05-17 清颖~

文章目录

• • • 一、拦截器的执行时机是什么？如何添加拦截器？
    • • 添加请求拦截器：
      • 添加响应拦截器：
    • 二、如何移除拦截器？

前言：
前面两篇讲了 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 () /*...*/);

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

创作打卡挑战赛 赢取流量/现金/CSDN周边激励大奖