【react】如何拦截第三方插件自发的请求

我们需要猜测一下，第三方是用什么方式请求的：
一般是第1种。

1、使用原生的XMLHttpRequest

// 创建一个原始的 XMLHttpRequest 对象
const originalXhrOpen = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
  // 在请求发送前进行拦截处理
  console.log('拦截请求:', method, url);

  // 调用原始的 open 方法发送请求
  originalXhrOpen.apply(this, arguments);
};

// 创建一个原始的 XMLHttpRequest 对象
const originalXhrSend = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.send = function (data) {
  // 在请求发送后进行拦截处理
  this.addEventListener('load', function () {
    // 拦截响应并处理
    console.log('拦截响应:', this.responseText);
  });

  // 调用原始的 send 方法发送请求
  originalXhrSend.apply(this, arguments);
};

// 使用 XMLHttpRequest 对象发送请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com', true);
xhr.send();

2、使用fetch

// 创建一个原始的 fetch 函数的备份
const originalFetch = window.fetch;

window.fetch = function (url, options) {
  // 在请求发送前进行拦截处理
  console.log('拦截请求:', url, options);

  // 调用原始的 fetch 函数发送请求，并返回一个 Promise 对象
  return originalFetch.apply(this, arguments)
    .then(function (response) {
      // 在响应返回后进行拦截处理
      console.log('拦截响应:', response);

      return response;
    });
};

// 使用 fetch 函数发送请求
fetch('https://api.example.com')
  .then(function (response) {
    // 处理响应数据
  })
  .catch(function (error) {
    // 处理错误信息
  });

3、使用axios

// interceptorManager.js
import axios from 'axios';

const interceptorManager = {
  registerInterceptor: (responseCallback) => {
    axios.interceptors.response.use((response) => {
      // 在响应数据处理前，将其传递给回调函数
      responseCallback(response);

      return response;
    });
  },

  unregisterInterceptor: () => {
    axios.interceptors.response.eject();
  },
};

export default interceptorManager;

// YourReactComponent.js
import React, { useEffect, useState } from 'react';
import interceptorManager from './interceptorManager';

const YourReactComponent = () => {
  const [responseData, setResponseData] = useState(null);

  const handleResponse = (response) => {
    // 处理响应数据
    setResponseData(response.data);
  };

  useEffect(() => {
    interceptorManager.registerInterceptor(handleResponse);

    return () => {
      interceptorManager.unregisterInterceptor();
    };
  }, []);

  return (
    <div>
      {/* 使用 responseData 进行渲染 */}
    </div>
  );
};

export default YourReactComponent;