如何在React Native中拦截HTTP请求与响应？是否有可用的相关库？

DevOps 小满

2026-9-30

React Native 全局HTTP请求/响应拦截实现方案

React Native环境下可以通过以下方式实现和Node.js中yesno库等效的HTTP拦截能力，覆盖所有JS侧发起的请求，也有现成可直接接入的库：

可直接使用的第三方库

axios 自带拦截器：如果项目全局统一使用axios作为请求客户端，可以直接用它内置的请求/响应拦截API，支持修改请求配置、统一处理响应结果/错误、附加公共请求头等逻辑，无需额外引入其他依赖。
fetch-intercept：专门用于全局劫持标准fetch API的工具库，不管是业务代码主动调用的fetch，还是第三方依赖内部发起的fetch请求都能被拦截到，逻辑和你之前使用的yesno封装思路类似。
xhr-intercept：如果需要拦截基于XMLHttpRequest实现的请求（比如部分第三方SDK、老旧网络库的请求），可以用这个库全局劫持XHR实例，覆盖核心方法实现全链路拦截。

无依赖手动实现方案

如果不想引入额外第三方库，可以直接重写全局的fetch和XMLHttpRequest方法，自行注入拦截逻辑，参考实现代码如下：

// 全局拦截fetch请求
const originalFetch = global.fetch;
global.fetch = async (url, options = {}) => {
  // 此处写请求拦截逻辑：打印请求信息、修改请求头/参数、添加埋点等
  console.log('发起请求：', { url, method: options.method || 'GET', headers: options.headers });

  const response = await originalFetch(url, options);
  // 此处写响应拦截逻辑：打印响应内容、统一处理错误码、修改返回结果等
  const clonedResponse = response.clone();
  const responseData = await clonedResponse.json().catch(() => ({}));
  console.log('请求返回：', { url, status: response.status, data: responseData });

  return response;
};