J*aScript网络请求_Axios拦截器机制_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript网络请求_Axios拦截器机制

2025-11-19

浏览次数：次

返回列表

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

javascript网络请求_axios拦截器机制

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

什么是 Axios 拦截器

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

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

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

如何使用请求拦截器

通过 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() 添加响应拦截逻辑。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado 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 的请求管理变得集中且高效，合理使用可以大幅提升开发效率和项目可维护性。

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

# 会在 # 百家号刷粉网站推广方法 # 汝州网站建设及优化 # seo算法优化 # 广东牛仔裤电商网站推广 # 旅游网站怎么做营销推广 # 罗湖综合网站推广排名 # 汝南网站推广团队招聘 # 夜晚百度关键词排名 # 南昌网站线上推广工具 # 西藏seo软件怎么选择 # 如何处理 # 如何使用 # 加载 # javascript # 多个 # 跳转 # 数据结构 # 如何实现 # 关键词 # 拦截器 # 状态码 # win # ios # 栈 # axios # java