如何解决多个Tab页点击切换功能所导致的问题

本篇内容主要讲解“如何解决多个Tab页点击切换功能所导致的问题”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何解决多个Tab页点击切换功能所导致的问题”吧!

大家肯定遇到过这样类似的场景：多个 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.');

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

到此，相信大家对“如何解决多个Tab页点击切换功能所导致的问题”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！