滨州网站开发/东莞优化疫情防控措施
最近在公司尝试使用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的第二参数中引入signalconsole.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想象成我们用来替换请求结果的PromisesetTimeout(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 = nullconst 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 tokenaxios.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使用文档
使用 Effect Hook – React
以上是我总结的各数据请求模块abort方法，另附自建博客地址：徐小武的个人博客