JavaScript 中 Ajax 怎么实现请求拦截器与响应拦截器-js教程-PHP中文网

javascript原生ajax（xmlhttprequest）不支持拦截器，但可通过封装fetch函数模拟请求/响应拦截：请求前修改配置（如加token）、响应后统一处理状态码、json解析及错误分类；xhr仅能通过重写open/send方法做简单监听与副作用操作，难以实现异步中断或链式处理。

javascript 中 ajax 怎么实现请求拦截器与响应拦截器

JavaScript 原生 Ajax（XMLHttpRequest）本身不支持拦截器机制，但可以通过封装请求函数、重写原型方法或使用现代 fetch 配合代理/包装来模拟请求/响应拦截逻辑。下面分两种主流方式说明：基于 fetch 的拦截实现（推荐），以及对 XMLHttpRequest 的有限拦截方案。

用 fetch 封装实现请求与响应拦截器

fetch 是 Promise-based 的 API，天然适合链式拦截。只需封装一个自定义的 request 函数，在发起前处理配置（请求拦截），在 Promise resolve/reject 后处理响应（响应拦截）：

请求拦截：修改 url、添加 headers（如 token）、序列化 body、日志记录等
响应拦截：统一解析 JSON、检查状态码（如 401 跳登录）、错误格式标准化、埋点上报等

示例代码：

const axiosLike = {
  interceptors: {
    request: [],
    response: []
  },

  useRequestInterceptor(fn) {
    this.interceptors.request.push(fn);
  },

  useResponseInterceptor(onFulfilled, onRejected) {
    this.interceptors.response.push({ onFulfilled, onRejected });
  },

  async request(config) {
    // 请求拦截链
    let reqConfig = { ...config };
    for (const interceptor of this.interceptors.request) {
      reqConfig = await interceptor(reqConfig) || reqConfig;
    }

    try {
      const res = await fetch(reqConfig.url, {
        method: reqConfig.method || 'GET',
        headers: { ...reqConfig.headers },
        body: reqConfig.body
      });

      // 响应拦截链
      for (const interceptor of this.interceptors.response) {
        if (interceptor.onFulfilled) {
          await interceptor.onFulfilled(res);
        }
      }

      if (!res.ok) {
        throw new Error(`HTTP ${res.status}: ${res.statusText}`);
      }

      const data = await res.json();
      return data;
    } catch (err) {
      for (const interceptor of this.interceptors.response) {
        if (interceptor.onRejected) {
          await interceptor.onRejected(err);
        }
      }
      throw err;
    }
  }
};

// 使用示例
axiosLike.useRequestInterceptor(config => {
  config.headers = {
    ...config.headers,
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  };
  console.log('✅ 请求已添加 token');
  return config;
});

axiosLike.useResponseInterceptor(
  async (res) => {
    console.log('✅ 收到响应，状态：', res.status);
  },
  (err) => {
    console.error('❌ 请求失败：', err.message);
    if (err.message.includes('401')) {
      location.href = '/login';
    }
  }
);

// 发起请求
axiosLike.request({ url: '/api/user' });

对 XMLHttpRequest 的“拦截”（仅限监听与简单改写）

XMLHttpRequest 是命令式 API，无法像 fetch 那样自然拦截，但可通过重写其 open 和 send 方法，或监听 onload/onerror 实现轻量级钩子：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

重写 open 可记录 URL、方法；重写 send 可注入 headers 或 body
无法真正“中断”或“替换”请求，只能在发出前后做副作用（如打点、加 loading）
不推荐用于复杂拦截逻辑（比如 token 过期刷新），因难以控制异步流程

简易 patch 示例：

const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.open = function(...args) {
  this._url = args[1];
  this._method = args[0];
  return originalOpen.apply(this, args);
};

XMLHttpRequest.prototype.send = function(body) {
  // 请求拦截：自动加 token
  if (this._url && !this._headersSent) {
    this.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'));
    this._headersSent = true;
  }
  return originalSend.apply(this, arguments);
};

// 响应拦截（通过 onload/onerror）
const originalOnLoad = XMLHttpRequest.prototype.onload;
XMLHttpRequest.prototype.onload = function() {
  console.log('✅ XHR 响应完成，状态：', this.status);
  // 这里可做统一错误处理，但无法直接 throw 或修改返回值
  if (originalOnLoad) originalOnLoad.call(this);
};