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

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

成都创新互联公司是一家专注网站建设、网络营销策划、微信小程序开发、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立10多年以来，已经为上千成都花箱各业的企业公司提供互联网服务。现在，服务的上千客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

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

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

节流、防抖、加 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.'); 
 
 
 

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

网站名称：这个异步问题你肯定遇到过，但是会解决的并不多
分享URL：http://www.mswzjz.com/qtweb/news44/171894.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联