JavaScript网络请求_Axios拦截器机制-js教程-PHP中文网

JavaScript网络请求_Axios拦截器机制

狼影

发布： 2025-11-19 21:39:55

原创

995人浏览过

Axios拦截器分为请求和响应两种类型，请求拦截器在发送请求前添加认证、设置请求头等，响应拦截器在接收响应后处理数据、错误提示等。通过axios.interceptors.request.use()和axios.interceptors.response.use()注册拦截器，支持多个拦截器按顺序执行，请求拦截器先注册先执行，响应拦截器先注册后执行，适用于统一处理token、loading状态、错误码跳转等场景，提升代码可维护性。

javascript网络请求_axios拦截器机制

在使用 Axios 进行网络请求时，拦截器（Interceptors）是一个非常实用的功能。它允许你在请求发送前或响应返回后自动处理数据，而无需在每个请求中重复写逻辑。这对于统一处理认证、错误提示、加载状态等场景尤其有用。

什么是 Axios 拦截器

Axios 拦截器分为两种：请求拦截器和响应拦截器。

请求拦截器会在请求被发送到服务器之前执行，你可以在这里修改请求配置，比如添加 token、设置请求头、记录日志等。

响应拦截器会在接收到服务器响应后、then 或 catch 处理前执行，适合做响应数据的统一处理、错误统一提示、状态码判断等。

立即学习“Java免费学习笔记（深入）”；

如何使用请求拦截器

通过 axios.interceptors.request.use() 添加请求拦截逻辑。

常见用途包括：

在请求头中添加认证信息（如 Authorization）
显示全局 loading 动画
格式化请求参数

示例代码：

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 显示加载动画
    showLoading();
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

登录后复制

如何使用响应拦截器

通过 axios.interceptors.response.use() 添加响应拦截逻辑。

Vinteo AI

利用人工智能在逼真的室内环境中创建产品可视化。无需设计师和产品照片拍摄

查看详情

典型应用场景有：

统一处理 401 未授权跳转登录页
隐藏 loading 动画
拦截特定错误码并提示用户
简化响应数据结构（只返回 data）

示例代码：

axios.interceptors.response.use(
  response => {
    // 隐藏加载动画
    hideLoading();
    return response.data; // 直接返回 data 字段
  },
  error => {
    hideLoading();
    if (error.response?.status === 401) {
      // 清除本地 token 并跳转登录页
      localStorage.removeItem('token');
      window.location.href = '/login';
    } else if (error.response?.status === 500) {
      alert('服务器内部错误');
    }
    return Promise.reject(error);
  }
);

登录后复制

拦截器的执行顺序

如果有多个拦截器，它们会按照注册顺序依次执行。

请求拦截器：先注册的先执行。

响应拦截器：先注册的后执行（类似栈结构）。

例如：

// 执行顺序：req1 → req2 → 网络请求 → res2 → res1
axios.interceptors.request.use(req1);
axios.interceptors.request.use(req2);
axios.interceptors.response.use(res1);
axios.interceptors.response.use(res2);

登录后复制

基本上就这些。拦截器机制让 Axios 的请求管理变得集中且高效，合理使用可以大幅提升开发效率和项目可维护性。

以上就是JavaScript网络请求_Axios拦截器机制的详细内容，更多请关注php中文网其它相关文章！