React中如何读取浏览器端的网络响应状态码

• 全局拦截底层网络API：浏览器端所有HTTP请求最终都会调用原生XMLHttpRequest或window.fetch，除非私有包做了极端的底层绕过，否则在应用初始化的最前置位置（比如React项目入口文件index.tsx的最顶部，执行顺序早于私有包引入）重写这两个API，就能挂载响应监听逻辑，拿到每个请求的HTTP状态码，拿到后可按需存入全局状态、打印日志或触发自定义业务逻辑。
  注意：拦截逻辑的执行顺序必须早于私有包的引入，否则会出现拦截失效的问题
  简单的XHR拦截示例代码：

  // 必须在所有业务代码、第三方包引入前执行
  const originalOpen = XMLHttpRequest.prototype.open;
  const originalSend = XMLHttpRequest.prototype.send;
  
  XMLHttpRequest.prototype.open = function (...args) {
    this._url = args[1];
    return originalOpen.apply(this, args);
  };
  
  XMLHttpRequest.prototype.send = function (...args) {
    this.addEventListener('loadend', () => {
      // 此处即可获取请求地址、对应HTTP状态码
      console.log(`请求地址: ${this._url}，状态码: ${this.status}`);
    });
    return originalSend.apply(this, args);
  };
  
  // fetch请求拦截逻辑同理，重写window.fetch后在promise回调中读取response.status即可
  

• 调用Performance API查询请求记录：不需要修改原生API的场景下，在请求触发后的合适时机调用performance.getEntriesByType('resource')，过滤出initiatorType为xmlhttprequest或fetch的资源条目，条目的responseStatus字段就是对应请求的HTTP状态码，适合做请求结果的事后批量校验。
• Service Worker代理拦截：如果项目已接入Service Worker，可以直接在SW的fetch事件监听中捕获所有页面发起的请求，读取响应状态后通过postMessage回传给主线程，这种方案对业务代码侵入性极低，不需要修改全局原生API。

• @mswjs/interceptors：无框架依赖的网络拦截库，兼容XHR、fetch等多种浏览器端请求实现，拦截逻辑稳定，不会破坏原有请求的正常执行，可直接获取完整响应信息包括状态码、响应头、响应体，适配React等所有前端框架项目。
• ajax-hook：轻量级XHR拦截库，API简洁，只需少量代码即可给全局XHR请求挂载前置/后置钩子，快速拿到请求响应状态，适合私有包仅基于XHR发起请求的场景。
• fetch-intercept：专门针对fetch API的拦截工具，如果确认私有包是基于fetch封装的请求，可以用这个库快速挂载fetch拦截器，不需要手动重写fetch逻辑。

内容的提问来源于stack exchange，提问作者Jakub Wozniak