首页 > 其他分享 >uni-app请求数据,在tab切换时,取消未完成的接口请求abort

uni-app请求数据,在tab切换时,取消未完成的接口请求abort

时间:2024-07-18 11:58:10浏览次数:15  
标签:请求 app blog abort 切换 tab uni data

1、在实现tab页功能切换时,如果是tab标签下显示的内容不一样时,要注意快速切换tab标签时,接口数据还没有请求回来时,切到另外tab导致数据展示错乱问题

排查问题

     

分析:

 

使用场景

  • bug: tab切换,当点击tab2时,由于接口反应比较慢,在数据返回之前切换tab,会造成tab2的数据会拼接在切换后的tab列表下面
  • 解决方法:在tab切换时,取消未完成的接口请求
            getList() {
                this.status == 'loading'
                // 用一个变量接受请求
                this.req = uni.request({
                    url: baseUrl + '/api/userOrder',
                    data: {
                        page: this.page,
                        order_status: this.tab == 0 ? 0 : this.tab == 1 ? 3 : -1
                    },
                    header: {
                        'content-type': 'application/x-www-form-urlencoded',
                        'Authorization': uni.getStorageSync('token') || ''
                    },
                    method: "get",
                    success: (res) => {
                        let data = res.data.data
                        if (data.length < 10) {
                            this.status = 'nomore'
                        } else {
                            this.status = 'loadmore'
                        }
                        this.list = this.list.concat(data)
                        uni.stopPullDownRefresh();
                    },
                })
            },
            change(index) {
                this.req.abort()  //tab切换时取消上次接口请求
                this.tab = index;
                this.page = 1
                this.status = 'loadmore',
                this.list = []
                this.getList()
            },

   

如果以上不好实现,可以用点击tab的时候加loading,然后不然点击,加载完再让点击,就不会出现上一个tab没请求完,点击另外一个tab,导致上一个tab的数据连接在新的list上

 

 

 

 

 

参考来源:
https://blog.csdn.net/weixin_43848576/article/details/108535482?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-108535482-blog-107718187.235^v43^pc_blog_bottom_relevance_base7&spm=1001.2101.3001.4242.1&utm_relevant_index=1
https://blog.csdn.net/qq_29384789/article/details/107718187

标签:请求,app,blog,abort,切换,tab,uni,data
From: https://www.cnblogs.com/qdlhj/p/18294779

相关文章

  • SpringBoot 跨域请求处理全攻略:从原理到实践
    文章目录SpringBoot如何处理跨域请求?你能说出几种方法?跨域请求概述跨域解决方案1.使用@CrossOrigin注解2.使用WebMvcConfigurer配置类3.使用过滤器(Filter)4.使用SpringSecurity处理CORS5.使用SpringCloudGateway处理CORS补充1.预检请求(PreflightRequests)2.其......
  • ApplicationContext 详细介绍
    一、概述ApplicationContext是Spring框架中的一个核心接口,它扩展了BeanFactory接口,并提供了更全面的功能。ApplicationContext不仅包含了BeanFactory的所有功能,还添加了国际化支持、资源访问、事件传播、以及更高级的容器特性,如自动装配和生命周期管理等。它是Spring应用中的核心......
  • request请求方式(get请求)
    在flask框架中,可以定义路由请求方式利用methods参数可以自己指定一个接口的请求方式get:把参数放在url后面,参数使用字符方式传输,所以也叫明文传输post:表单提交,采用字节流方式传递数据,文件传输必须用post 这里我们定义一个静态文件: get请求参数代码实现:fromflaskimpo......
  • 广告联盟APP小游戏开发养机
    广告联盟APP小游戏开发中的“养机”主要是指优化广告展示环境,提升广告效果,同时保障用户体验的过程。以下是一些关于广告联盟APP小游戏开发养机的具体建议:明确目标群体:了解游戏玩家的年龄、兴趣爱好以及使用习惯等信息,以便在游戏中植入符合他们需求的广告内容1。选择恰当的广告......
  • Java使用流实现浏览器自动下载文件(附前端请求代码)
    一、注意事项1.需要注意后端的响应头设置,告诉浏览器下载文件类型(Content-Type)以及文件名称。2.不同环境下中文路径以及文件名会出现乱码情况路径解决:filePath=newString((filePath).getBytes("ISO8859-1"),"UTF-8");文件名解决:response.setHeader("Content-Dispositi......
  • Flash简介及其中的Bootloader如何实现对APP程序的下载更新或重装
    目录1.eMMC、NandFlash都属于Flash,Flash的具体类别如下2.Bootloader在APP程序下载更新或重装中存在的意义3.Bootloader下载更新或重装APP程序的思路框架4.Bootloader下载更新或重装APP程序代码实现1.eMMC、NandFlash都属于Flash,Flash的具体类别如下       ......
  • Nginx 获取/传递真实IP、追踪请求包转发链 及 防范源IP伪造
    (转载)获取/传递真实IP环境模拟:客户端-->Nginx1/CDN/DDOS高防-->Nginx2-->后端ServerrequestHeader部分请求头字段:X-Real-IP用来保存客户端真实IP,默认为空X-Forwarded-For用来保存请求包的转发地址链,默认为空对应变量:$remote_addr此变量保存的是http请求的发起方IP,......
  • C. Jellyfish and Green Apple
    原题链接题解1.由于是除二操作,所以最后的平均数一定能表示成\(k_1\cdot\frac{1}{2^{i_1}}+...+k_t\cdot\frac{1}{2^{i_t}}\)的形式2.最小的\(\frac{1}{2^i}\)由于没有往下再分,所以数量一定是偶数,把他们的数量除二加到\(\frac{1}{2^{i-1}}\)上,此时\(i-1\)就变最小的了......
  • 达梦数据库的系统视图v$rapply_sys
    达梦数据库的系统视图v$rapply_sys在达梦数据库(DMDatabase)中,V$RAPPLY_SYS是一个系统视图,用于显示数据库的实时应用(Real-timeApply)系统信息。实时应用是一种数据库复制技术,允许将一个数据库的更改实时应用到另一个数据库中,通常用于数据同步、数据分发和灾难恢复等场景。......
  • uniapp(全端兼容) - 最新详细实现 “卡片式堆叠“ 轮播图效果,堆叠在一起的轮播图片可
    效果图在uni-app微信小程序/手机h5网页网站/安卓app/苹果app/支付宝小程序/nvue等(全平台完美兼容)开发中,实现uniApp各端都兼容的图片堆叠轮播图功能,层叠轮播插件,详细实现上下层叠轮播图并且在全平台通用兼容,卡片叠加在一起的轮播翻滚,错开叠加来回拖曳左右滚动切换,支持修改......