大家肯定遇到过这样类似的场景:多个 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.');
用法还是挺简单的,对于可能会出现异步竞态的情况下大家可以采用这个方法来解决。简单好用,还不会影响用户体验,封装下代码就能用起来了。
1. 接口描述 接口请求域名: cvm.tencentcloudapi.com 。 本接口 (DescribeDisas...
本篇文章则介绍如何使用Python进行数据驱动。这里以pytest测试框架为例,重点讲...
本文已经过原作者 Orkhan Jafarov 授权翻译。 今天,我们来一起学习一下如何把元...
香港服务器备案吗?用香港的服务器 建站 ,目前是不需要备案的。我国实行 ICP备...
每年年底,顶尖IT分析公司都会对未来12个月进行云预测。可以说,没有任何IT分析...
前言 1. 服务器及系统版本 文章基于 腾讯云 服务器Linux CentOS7.9 Linux命令行...
登录华为云管理控制台 在云登录页面,输入账号及密码,登录管理控制台。 图1 控...
近日,中国电信集团投资有限公司(以下简称电信投资)与上海云轴信息科技有限公...
公司简介 作为一家以“智慧企业”战略驱动的体验公司,SAP是全球领先的企业应用...
近日,高德地图联合国家信息中心大数据发展部、清华大学戴姆勒可持续交通联合研...