react取消所有请求_使用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对象。 运用

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;

}

},[])

四、参考文档

以上是我总结的各数据请求模块abort方法，另附自建博客地址：徐小武的个人博客