axios拦截器

拦截器的基本概念

拦截器分为两种:

  1. 请求拦截器:在请求发送前执行,可用于添加认证头、修改请求参数等。
  2. 响应拦截器:在响应返回后执行,可用于统一处理错误、解析数据等。

核心方法

1. axios.interceptors.request.use(fulfilled, rejected)
  • 作用:添加请求拦截器。
  • 参数
    • fulfilled:成功回调,接收 config 对象(包含请求配置),需返回修改后的 config
    • rejected:失败回调,接收错误对象,需返回 Promise.reject(error)
javascript 复制代码
axios.interceptors.request.use(
  (config) => {
    // 添加认证头
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  (error) => {
    console.error('请求错误:', error);
    return Promise.reject(error);
  }
);
2. axios.interceptors.response.use(fulfilled, rejected)
  • 作用:添加响应拦截器。
  • 参数
    • fulfilled:成功回调,接收 response 对象,可返回处理后的数据。
    • rejected:失败回调,接收错误对象,可处理 HTTP 错误(如 401、500)。
javascript 复制代码
axios.interceptors.response.use(
  (response) => {
    // 只返回响应数据
    return response.data;
  },
  (error) => {
    if (error.response) {
      // 处理 HTTP 错误
      console.error(`HTTP 错误 ${error.response.status}`);
    }
    return Promise.reject(error);
  }
);
3. axios.interceptors.request.eject(id)axios.interceptors.response.eject(id)
  • 作用:移除拦截器。
  • 参数
    • id:拦截器的唯一标识,由 use() 方法返回。
javascript 复制代码
// 保存拦截器 ID
const requestInterceptor = axios.interceptors.request.use((config) => {
  // ...
  return config;
});

// 移除拦截器
axios.interceptors.request.eject(requestInterceptor);

拦截器执行顺序

  • 请求拦截器:后添加的先执行(类似栈结构)。
  • 响应拦截器:先添加的先执行(类似队列结构)。
javascript 复制代码
// 请求拦截器顺序:2 → 1
axios.interceptors.request.use((config) => { console.log('拦截器1'); return config; });
axios.interceptors.request.use((config) => { console.log('拦截器2'); return config; });

// 响应拦截器顺序:1 → 2
axios.interceptors.response.use((response) => { console.log('拦截器1'); return response; });
axios.interceptors.response.use((response) => { console.log('拦截器2'); return response; });

常见应用场景

  1. 统一添加认证信息

    javascript 复制代码
    axios.interceptors.request.use((config) => {
      config.headers.Authorization = `Bearer ${token}`;
      return config;
    });
  2. 错误处理

    javascript 复制代码
    axios.interceptors.response.use(
      (response) => response,
      (error) => {
        if (error.response.status === 401) {
          // 处理未授权错误(如跳转到登录页)
        }
        return Promise.reject(error);
      }
    );
  3. 请求/响应日志记录

    javascript 复制代码
    axios.interceptors.request.use((config) => {
      console.log(`请求: ${config.method} ${config.url}`);
      return config;
    });
  4. 超时处理

    javascript 复制代码
    axios.interceptors.request.use((config) => {
      config.timeout = 5000; // 5秒超时
      return config;
    });

注意事项

  1. 必须返回值

    • fulfilled 回调中必须返回 configresponse,否则请求/响应会被中断。
    • rejected 回调中必须返回 Promise.reject(error)
  2. 异步操作

    • 拦截器中可以进行异步操作(如刷新 token),但需返回 Promise
  3. 全局 vs 实例拦截器

    • 全局拦截器(axios.interceptors)会影响所有请求。
    • 实例拦截器(axios.create().interceptors)仅影响特定实例。

总结

Axios 拦截器通过 use() 添加,通过 eject() 移除,是处理请求和响应的强大工具。合理使用拦截器可以大幅提高代码的可维护性和复用性。

相关推荐
江城开朗的豌豆3 分钟前
5招轻松搞定Element-UI样式定制,让你的项目与众不同!
前端·javascript·vue.js
yinuo7 分钟前
前端搭建企业微信应用开发环境
前端
小磊哥er8 分钟前
【办公自动化】如何使用Python实现读写文件自动化?
前端
前端小巷子11 分钟前
Vue内置动画组件 Transition
前端·vue.js·面试
懋学的前端攻城狮13 分钟前
Next.js + TypeScript + Shadcn UI 实战:构建可折叠侧边栏与动态内容加载
前端·react.js·next.js
张风捷特烈2 小时前
匠心千游 | 纯 AI 打造休闲小游戏
前端·微信小程序·游戏开发
longze_76 小时前
Vue中:deep()和 ::v-deep选择器的区别
前端·javascript·vue.js
太阳伞下的阿呆9 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny9 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴10 小时前
Ceil -- 从平滑到阶梯
前端·webgl