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

最新推荐文章于 2025-07-13 11:06:19 发布

清颖~

最新推荐文章于 2025-07-13 11:06:19 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/aaqingying/article/details/124788303

前端专栏收录该内容

102 篇文章

订阅专栏

本文介绍了axios中的拦截器机制，包括请求和响应拦截器的添加方式，以及如何在发送请求前和接收响应后进行自定义处理。同时，文章详细阐述了如何移除已添加的拦截器，提供了示例代码帮助理解如何使用和管理axios拦截器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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

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