使用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想象成我们用来替换请求结果的Promise
    setTimeout(resolve, 10, 'two');
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value);  // 最终两个promise都将执行完成，但是结果返回的却是最快的那个Promise,因此答案是'two'
}); 

基于此，我们便可以使用fetch和Promise.race([promise1, promise2])来进行模拟：

export function fetchWithAbort(fetchPromise: any) {  // 封装一个带有abort功能的函数，将我们的fetch请求传入。
    let abort = null
    const abortPromise = new Promise((resolve, reject) => {  // 创建一个abortPromise，调用abort()会立刻reject('abort')
        abort = () => {
            reject('abort');
        }
    })
    let promiseWithAbort: any = Promise.race([fetchPromise, abortPromise])
    promiseWithAbort.abort = abort // 将abort方法传递给promiseWithAbort的abort属性
    return promiseWithAbort 
}

使用方法：

// 发送请求
const newFetch = fetchWithAbort(request(url)); 
newFetch.then(res=>{  
   // 这里res将会返回正常的请求数据
}).catch(e=>{  
   // 捕获异常以及abort做进一步处理...
});

// 中止请求
newFetch.abort(); // 调用abort()方法将会立刻reject('abort')；

2.3 关于 superagent 和 axios 模块中止请求简介

对于熟悉该部分使用方法的伙伴来说可以选择跳过，有兴趣的可以翻阅文档。

1、superagent

let req = request
   .get('/search')
   .then(res => {
      // res.body, res.headers, res.status
   })
   .catch(err => {
      // err.message, err.response
   });
// 调用abort方法即可中止请求
req.abort();

2、axios

可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：

import axios from 'axios';
var CancelToken = axios.CancelToken; 
var source = CancelToken.source(); // 调用CancelTokens上的source方法创建cancel token

axios.get('/user/12345', {
  cancelToken: source.token   // 这里将source.token穿递给cancelToken属性
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) { // 对抛出的异常进行判断是否是cancel来做进一步处理
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

Note : 可以使用同一个 cancel token 取消多个请求

三、react useEffect 取消订阅的正确方式

实际开发中因为使用 fetch 模块，因此只能通过模拟中止请求来解决问题，但面临的问题就是我们必须面对最后一请求返回数据，怎么才能让该数据不执行 setState 呢？上面思路也说了，我们可以在执行 unmount 时给出一个标记比如定义一个 const unmount = useRef() 设置 unmount.current = true 每次在执行 setState 时判断该值是否 true 从而跳过 setState 操作。

但是当面临多个 Effect，并且他们都将在参数发生变化时发送数据请求，这种情况我们应该如何取消订阅？在没有仔细翻阅 React 文档之前，我尝试性地在两个 useEffect 中同时加入了返回函数，结果发现每次执行 useEffect 时但会函数都将执行。React hooks 指出effect 在每次渲染的时候都会执行，React 会在执行当前 effect 之前对上一个 effect 进行清除。显然我们并不需要频繁操作返回函数，只需要在页面切换出去执行一次返回函数即可。因此可以单独写一个useEffect，设置第二个参数为空数组即可。

错误写法：

const [state,setState] = useState(null);
const unmount = useRef(false);

const fetchData1 = () =>{
      fetchFun(params).then(res=>{
            !unmount.current && setState(res.content); 
      }).catch(e=>{
            // 
      });
}
...
useEffect(()=>{
      fetchData1();
      fetchData2();
      return ()=>{
            unmount.current = true;
      }
},['a']);

useEffect(()=>{
      fetchData1();
      return ()=>{
            unmount.current = true;
      }
},['b'])

正确写法：

const [state,setState] = useState(null);
const unmount = useRef(false);

const fetchData1 = () =>{
      fetchFun(params).then(res=>{
            !unmount.current && setState(res.content);
      }).catch(e=>{
            // 
      });
}
...
useEffect(()=>{
      fetchData1();
      fetchData2();
},['a']);

useEffect(()=>{
      fetchData1();
},['b'])

useEffect(()=>{
      return ()=>{
            unmount.current = true;
      }
},[])

四、参考文档

MDN的使用 Fetch文档
MDN的使用Promise.race()
MDN的使用AbortController构造函数中止请求
superagent使用文档
axios使用文档
React Hooks文档
以上是我总结的各数据请求模块abort方法，另附自建博客地址：徐小武的个人博客