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

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

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

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

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

节流、防抖、加 Loading!

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

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

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

 
 
 
  1. const CancelToken = axios.CancelToken; 
  2. const source = CancelToken.source(); 
  3.  
  4. axios.get('/user/12345', { 
  5.   cancelToken: source.token 
  6. }).catch(function (thrown) { 
  7.   if (axios.isCancel(thrown)) { 
  8.     console.log('Request canceled', thrown.message); 
  9.   } else { 
  10.     // handle error 
  11.   } 
  12. }); 
  13.  
  14. axios.post('/user/12345', { 
  15.   name: 'new name' 
  16. }, { 
  17.   cancelToken: source.token 
  18. }) 
  19.  
  20. // cancel the request (the message parameter is optional) 
  21. source.cancel('Operation canceled by the user.'); 

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

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

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

广告

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