使用React hooks结合fetch中止请求的方法探讨

最近在公司尝试使用React hooks结合fetch请求进行项目开发遇到了两个问题：① 用户频繁切换界面上的 5 个维度按钮，由于网络响应过慢导致最新的请求数据被之前的请求结果覆盖。② 路由切换导致 unmount 页面的数据还在请求并更新 state 导致内存泄漏的现象。下面围绕这两个问题展开分析：

一、思路

• 问一思路就是在发送最新请求的同时abort过时的请求，或者我们可以抛弃过时请求拿到的数据。
• 问二两种思路：一种是在 unmount 钩子中abort未完成的请求，这样就不会进行 state 更新。另一种是在 unmount 钩子中想办法跳过更新state。

二、关于 fetch 请求 abort 的解决方法

由于本次项目开发是多人合作的，项目一直使用的是 fetch 模块，对于一直习惯于使用 axios 的我来说只能钻进文档里求解，结果发现 fetch 的浏览器兼容性也不是很好，并且当前还不支持 abort 方法，目前来说解决该问题的方法有两种：

• 使用 AbortController 构造函数中止请求
• Promise.race 模拟中止请求

2.1 使用 AbortController 构造函数中止请求(实验中)

该功能尚在实验阶段，未来语法可能还会有改动，该构造函数创建一个新的AbortController对象。 运用AbortSignal 对象完成与 DOM 请求的通信，使用起来比较简单：

var controller = new AbortController(); //  创建一个实例
var signal = controller.signal;

function fetchData() {
   
      fetch(url,{
   
            signal
      }).then(function(res) {
    // 在fetch的第二参数中引入signal
            console.log(res)
      }).catch(function(e) {
   
            console.log(e)
      })
}

controller.abort(); // 调用controller.abort()即可中止此次请求。

2.2 Promise.race 模拟中止请求(请求赛跑，谁先完成就返回谁)

该方法其实无法中止已发送出去的请求，只是通过 Promise.race 方法返回另一个 Promise 对象来取代我们不想要的请求结果。用 MDN 的话说就是使用Promise.race(iterable)返回一个 promise，一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。

举个栗子：

const promise1 = new Promise(function(resolve, reject) {
     // Promise1想象成我们需要中止的请求，
    setTimeout(resolve, 5000, 'one');
});

const promise2 = new Promise(function(resolve, reject) {
     // Promise2想象成我们用来替换请求结果的