职场中前端业务中常见的异步场景处理

主题 JavaScript
随着前端应用的复杂度提升，应用中的异步场景也越来越多。虽然 ES6 中 Promise、generator、async/await 语法能简化异步代码的编写，但是一些业务场景下还是需要花点心思去处理。

比如：

异步循环：需要循环拉取分页数据，直至数据为空。
异步取消：组件销毁后，异步才完成，需要避免更新组件的操作。
后续异步发生，忽略前面未完成异步：同一接口携带不同参数多次请求的竞态问题，先发后至，后发先至。
异步未完成时，后续相同异步等待并一起完成：同一幂等接口多次请求。
异步未完成时，后续异步等待：异步队列。
异步循环
async function requestAll() {
let hasNext = true;

while (hasNext) {
    const res = await axios(...);
    
    hasNext = res.hasNext;
}

}

requestAll();
复制代码
异步取消

这个报错还是挺常见的，大多数原因都是因为组件内调用了接口异步请求，然后组件因为一些原因（例如：切换页面）销毁了，之后接口请求才成功，然后调用了更新组件方法导致报错的。所以需要在组件销毁前的声明周期中，把与组件有关系的异步取消。

常见异步方法以及相应的取消方法：

setTimeout/setInterval
clearTimeout/clearInterval
XMLHttpRequest
new XMLHttpRequest().abort
axios（基于 XMLHttpRequest 封装）
axios.CancelToken
fetch
AbortController
FileReader
new FileReader().abort
对于普通的 Promise，因为 proposal-cancelable-promises 提案废弃了，只能参考 cancelToken 方案实现“取消”（非真取消，只是将 Promise 状态改为 rejeced）。

let cancelToken = () => {};

new Promise((resolve, reject) => { <