这个异步问题你肯定遇到过，但是会解决的并不多

大家肯定遇到过这样类似的个异场景：多个 Tab 页点击切换功能，如果用户点击频繁，步问不多很可能会出现当前页面显示别的题肯页面的数据。

因为每个接口返回信息的定遇到过但会的并时间是不同的，你不能保证先请求的解决一定最先返回数据，那么就很可能会出现停留在页面一却出现别的个异页面的数据的情况。云服务器这种异步的步问不多情况术语称之为异步竞态。

这时肯定有读者会说了，题肯这还不简单，定遇到过但会的并我能给你轻松想出好几个解决办法。解决

节流、个异防抖、步问不多加 Loading!

这些做法固然能解决问题，题肯但是定遇到过但会的并都治标不治本，而且还影响了用户体验，解决其实还有种办法能够完美解决问题：取消请求。

当然了这个取消请求它只是不继续处理接口后续的高防服务器响应了，并不是真的把请求给取消了。毕竟请求如果已经发出去的话，我们也不能顺着网线把它追回来。

我们这边以 axios 为例来看看怎么取消请求：

const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get(/user/12345, {    cancelToken: source.token }).catch(function (thrown) {    if (axios.isCancel(thrown)) {      console.log(Request canceled, thrown.message);   } else {      // handle error   } }); axios.post(/user/12345, {    name: new name }, {    cancelToken: source.token }) // cancel the request (the message parameter is optional) source.cancel(Operation canceled by the user.); 

用法还是挺简单的，对于可能会出现异步竞态的情况下大家可以采用这个方法来解决。简单好用，还不会影响用户体验，封装下代码就能用起来了。

源码下载