JavaScript 中怎么在接口调用中使用拦截器统一处理响应-js教程-PHP中文网

javascript接口响应拦截主要通过axios拦截器或封装fetch实现：axios用interceptors.response.use统一处理成功/失败响应；fetch需手动封装request函数，在promise链中校验状态码、解析数据并抛出错误；核心用于状态码映射、自动重试、日志与缓存，需避免异步副作用和修改原始响应对象。

javascript 中怎么在接口调用中使用拦截器统一处理响应

在 JavaScript 中，接口调用的响应拦截通常借助请求库（如 Axios）实现，原生 fetch 不直接支持拦截器，但可通过封装模拟类似能力。核心思路是：在请求发出后、业务代码拿到响应前，统一检查状态、处理错误、解析数据或透传元信息。

使用 Axios 的响应拦截器

Axios 提供了开箱即用的 interceptors.response.use() 方法，是最常用的方式：

第一个参数是成功回调，接收响应对象 response，可修改 response.data 或添加字段
第二个参数是失败回调，接收错误对象 error，可用于统一捕获网络异常、HTTP 状态码错误（如 401、500）
务必 return Promise.reject(error) 或 throw error 以保证错误能被后续 .catch() 捕获

示例：

axios.interceptors.response.use(
  response => {
    // 假设后端统一返回 { code: 0, data: ..., msg: "" }
    if (response.data.code === 0) {
      return response.data.data; // 只返回业务数据，简化组件层使用
    } else if (response.data.code === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login';
      return Promise.reject(new Error('登录已过期'));
    }
    return Promise.reject(new Error(response.data.msg || '请求失败'));
  },
  error => {
    if (error.response?.status === 401) {
      // 同上，兜底处理未被响应体拦截的情况
      localStorage.removeItem('token');
      window.location.href = '/login';
    } else if (!error.response) {
      // 网络错误或请求被取消
      console.error('网络异常，请检查连接');
    }
    return Promise.reject(error);
  }
);

封装 fetch 实现类拦截逻辑

若项目不使用 Axios，可用函数封装 fetch，在 Promise 链中插入统一处理：

Alibabacloud Sdk Client Initialization For Java

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

下载

定义一个 request(url, options) 函数，内部调用 fetch
在 .then() 中解析 JSON 并校验业务状态码
在 .catch() 中处理网络错误、超时等
所有 API 调用都走这个函数，避免重复逻辑

示例：

async function request(url, options = {}) {
  try {
    const res = await fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
        ...options.headers
      },
      ...options
    });

    const data = await res.json();

    if (!res.ok) {
      throw new Error(data.msg || `HTTP ${res.status}`);
    }

    if (data.code !== 0) {
      throw new Error(data.msg || '业务异常');
    }

    return data.data; // 统一透出业务数据
  } catch (err) {
    if (err.name === 'AbortError') {
      console.warn('请求已取消');
    }
    throw err;
  }
}

// 使用
request('/api/user').then(user => console.log(user));