JavaScript 中怎么在 Fetch API 中使用 interceptor 模式扩展功能-js教程-PHP中文网

javascript中fetch api本身不支持拦截器，但可通过函数封装+中间件链模拟：请求拦截器修改input/init（如加token），响应拦截器处理response（如判状态码、解析json），支持异步、中断及链式执行。

javascript 中怎么在 fetch api 中使用 interceptor 模式扩展功能

JavaScript 中 Fetch API 本身不支持拦截器（interceptor）机制，不像 Axios 那样内置 request/response 拦截能力。但可以通过封装一层函数、利用 Promise 链或构建自定义 fetch 工厂来模拟 interceptor 行为，实现请求前处理（如加 token）、响应后统一处理（如错误解析、重试）等扩展功能。

用函数封装 + 中间件链模拟拦截器

核心思路是把 fetch 调用“包”进一个可插拔的中间件管道中，每个中间件接收 config（请求配置）和 next（下一个中间件），最后调用原生 fetch。

定义一个 createFetch 工厂函数，接受多个拦截器（request 和 response 分开或合并）
request 拦截器在发起请求前修改 input 或 init（如添加 headers、序列化 body）
response 拦截器在 fetch().then() 后处理响应（如检查 status、自动解析 JSON、抛出业务错误）
拦截器按顺序执行，支持异步（async/await），且可中断流程（例如未登录时跳过请求）

一个轻量实用的拦截器实现示例

下面是一个简洁、可复用的拦截器封装（无依赖）：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

function createInterceptedFetch(...interceptors) {
  return async function(input, init = {}) {
    // 构建中间件链：从 request → fetch → response
    const runRequestInterceptors = (input, init) =>
      interceptors.reduceRight(
        (next, interceptor) => async () => {
          if (interceptor.request) {
            const result = await interceptor.request(input, init, next);
            return result ?? next();
          }
          return next();
        },
        () => fetch(input, init)
      );

    const runResponseInterceptors = (response) =>
      interceptors.reduce(
        (prev, interceptor) => async () => {
          if (interceptor.response) {
            return interceptor.response(await prev(), response.clone());
          }
          return prev();
        },
        () => Promise.resolve(response)
      );

    const rawResponse = await runRequestInterceptors(input, init);
    return runResponseInterceptors(rawResponse)();
  };
}

// 使用示例：添加 auth header 和统一错误处理
const myFetch = createInterceptedFetch({
  request: async (input, init) => {
    const token = localStorage.getItem('token');
    if (token && !init.headers) init.headers = {};
    if (token) init.headers['Authorization'] = `Bearer ${token}`;
  }
}, {
  response: async (prevRes, res) => {
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    const json = await res.json();
    if (json.code !== 0) throw new Error(json.message || '请求失败');
    return json.data;
  }
});