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

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