这个异步问题你一定遇到过,但是解决方法不多。页面的数据。因为每个接口返回信息的时间不一样,你不能保证第一个请求就先返回数据,所以很可能停留在第一页却显示其他页面的数据。这种异步情况称为异步竞争条件。这时候肯定有读者会说这不容易,我可以很轻松的给你想出几个方案。节流、防抖、加载!这些方法固然可以解决问题,但不是长久之计,还会影响用户体验。其实还有一种方法可以完美解决问题:取消请求。当然,这个取消请求只是没有继续处理接口后续的响应,并没有真正取消请求。毕竟,如果请求已经发出了,我们是不可能沿着网线追回来的。下面以axios为例,看看如何取消请求:constCancelToken=axios.CancelToken;constsource=CancelToken.source();axios.get('/user/12345',{cancelToken:source.token}).catch(function(thrown){if(axios.isCancel(thrown)){console.log('Requestcanceled',thrown.message);}else{//handleerror}});axios.post('/user/12345',{name:'newname'},{cancelToken:source.token})//取消请求(消息参数可选)source.cancel('Operationcanceledbytheuser.');用法还是挺简单的,在可能出现异步竞态的时候就可以使用这种方法来解决。简单易用,不影响用户体验,代码打包后即可使用。
