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

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

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

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

节流、防抖、加 Loading!

[[382204]]

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

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

我们这边以 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.'); 

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