JavaScript 中怎么在 Axios 中配置全局的请求与响应拦截器-js教程-PHP中文网

axios全局拦截器应通过自定义实例配置：1. 创建apiclient实例并设置baseurl等；2. 请求拦截器自动注入token、添加元数据；3. 响应拦截器统一处理成功响应、401跳转登录、网络错误等；4. 拦截器通常启动时注册，无需手动清理。

javascript 中怎么在 axios 中配置全局的请求与响应拦截器

在 Axios 中配置全局请求与响应拦截器，核心是通过 axios.interceptors 在创建实例后统一添加，通常推荐在封装 axios 实例时完成，避免在多个地方重复设置。

1. 创建并配置 axios 实例

不要直接在 axios 默认实例上加拦截器（除非明确需要全局生效且无多实例场景），更推荐新建一个自定义实例，便于管理、复用和隔离配置：

import axios from 'axios';
<p>const apiClient = axios.create({
baseURL: '<a href="https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39">https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39</a>',
timeout: 10000,
});
</p>

2. 添加请求拦截器（处理发出去的请求）

常用于自动携带 token、添加 loading 状态、统一参数处理等：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

使用 apiClient.interceptors.request.use() 注册
第一个函数接收 config，可修改后返回；第二个函数处理请求错误（如网络异常、取消请求）
示例：从 localStorage 读取 token 并注入 Authorization 头

apiClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('access_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 可选：添加请求标识，便于调试或取消
    config.metadata = { startTime: Date.now() };
    return config;
  },
  (error) => {
    // 请求发出前就出错（例如网络未连接、请求被 cancel）
    console.error('Request setup error:', error);
    return Promise.reject(error);
  }
);

3. 添加响应拦截器（处理返回的响应）

常用于统一错误处理、自动刷新 token、响应数据解包、埋点统计等：

使用 apiClient.interceptors.response.use() 注册
第一个函数接收 response，可加工 data 后返回；第二个函数处理响应失败（状态码非 2xx、网络错误、超时等）
注意：401/403 等业务错误仍会进入 success 回调，需根据 response.data.code 判断

apiClient.interceptors.response.use(
  (response) => {
    // 假设后端统一结构：{ code: 0, data: ..., message: '' }
    const { code, data, message } = response.data;
    if (code === 0) {
      return data; // 直接返回业务数据，组件里不用再写 .data
    } else if (code === 401) {
      // 清除登录态，跳转登录页
      localStorage.removeItem('access_token');
      window.location.href = '/login';
      return Promise.reject(new Error('Login expired'));
    } else {
      return Promise.reject(new Error(message || 'Request failed'));
    }
  },
  (error) => {
    // 网络错误、超时、服务不可用、CORS 等
    if (error.code === 'ECONNABORTED') {
      console.error('Request timeout');
    } else if (!error.response) {
      console.error('Network error or server unreachable');
    }
    return Promise.reject(error);
  }
);

4. 拦截器的清理（按需）

如果拦截器只在特定模块/生命周期中生效（比如某个页面需要临时修改行为），可用 use 返回的 id 手动移除：

const requestInterceptor = apiClient.interceptors.request.use(/* ... */);
// 后续可移除
apiClient.interceptors.request.eject(requestInterceptor);

但大多数项目中，全局拦截器在应用启动时注册一次即可，无需手动清理。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南