【前端】tab切换网络加载慢时数据出错？

最新推荐文章于 2024-07-24 11:09:48 发布

杨先森不是先生

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量577

点赞数 2

文章标签： javascript vue.js 前端 html es6 html5

本文链接：https://blog.csdn.net/qq_46870369/article/details/131568022

版权

我们在做tab切换时，有时数据加载的比较慢，或者网络环境不好时，数据返回时仍处于pending状态，再次点击tab切换时，由于第一次点击时数据加载慢，又点击其他tab或返回第一个tab时数据会把第二次tab的数据也push到data里面

就比如做一个这样的快速切换

错误展示

怎么样解决呢？其实方法有很多，你可以使用缓存组件或取消pending状态的请求，还有请求时可以做请求标识。由于我的需求样式差不多且tab切换比较少就没有做缓存。

今天这里呢就是请求时做请求标识。

首先在data里写一个初始值

然后请求时把data里面的初始值加一赋给一个新的变量，然后把变量值再次赋给初始值（这里是更新初始值，不然影响一下次的判断）

发起请求数据之后就可以判断初始值是否和新的变量值相同，等到两个值相同时在把数据push进去就好了。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

杨先森不是先生

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【前端】tab切换网络加载慢时数据出错？

tab切换时数据出错
复制链接

扫一扫

vue 实现tab切换保持数据状态

10-15

在Vue开发过程中，保持数据状态是常见的需求，特别是在实现Tab切换功能时，用户可能希望在切换Tab后，之前填写的数据或者加载的内容能够被保存。本文将深入探讨如何在Vue中实现Tab切换时保持数据状态。首先，让...

解决：点击el-tabs切换页面显示时调用多次接口的问题

qq_45259815的博客

07-13

1560

解决使用element组件el-tabs遇到的接口多次调用问题

1 条评论您还未登录，请先登录后发表或查看评论

每日水一单】tab共用接口快速切换导致数据错乱

m0_71223484的博客

11-10

986

这是一个群数据列表，群客户131，最近进群70，最近退群7个。测试过程中偶现最近退群数据不是已知的客户数据。经排查当最近进群数据有多个分页如每页10条，70条就有7页，这时在最近进群切换至最近退群速度过快就会把请求最近进群的参数带到最近退群请求里，接口返回的数据就会有异常。测试总结，测试数据得备充足，此问题在数据减少，速度不快的情况下是不会出现异常的，但是在一定量数据同时速度过快就必现。此类问题一般在客户正式环境容易暴露。问题规避，列表数据请求，分页处理机制要优化；tab共用接口注意做好隔

antd pro protable request请求有数据页面不渲染

我诗和远方

06-22

7351

最近在使用antd pro 中的proTable使用时，request请求明明请求到了数据，但是页面确没有渲染，我蒙蔽了，在文档中找到了postData属性，在postData打印时 function接受的一个参数为undefined ，当我mock了两条数据，使用function返回时页面渲染了网上查了好久，发现还没有大佬遇见过，所以写一篇文章帮大家少踩一些坑原来在request中返回一个promise成功只要将获取到的数据返回 Promist.resolve(数据) 就ok

axios拦截上一次请求响应的数据，解决tab切换太快至列表数据错乱

weixin_44779945的博客

04-29

1477

axios 封装首先引入axios 创建实例 import axios from 'axios' // 创建axios实例 const instance= axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 6000 // 请求超时时间 }) 然后加入axios的拦截器 instance.in...

tabs切换数据---多个tab页面使用一个data存储数据显示到el-table上,响应慢的请求数据覆盖掉响应快的数据

weixin_43502666的博客

10-15

843

2、当点击tab时可以将前面的请求cancel掉,使用axios中的方法:axios.CancelToken.source()方法会创建一个令牌,为每个tab请求添加入参{cancelToken:axios.CancelToken.source().token},每次点击按钮发送请求前,将存在令牌的请求cancel掉(this.cancelToken.cancel(“请求已取消”)😉。(3)this.$set(this.objData, index, ‘请求的结果’);//为存储结果的对象设置响应式属性。

vue处理tabs切换时请求数据不对的应对方法

weixin_46774564的博客

04-19

968

vuex // 需要处理的请求路径 const whiteUrl = ['/api/url'] const cancelAxios = { state: { cancelAxiosArr: [] // 取消请求token数组 }, mutations: { pushAxios(state, payload) { state.cancelAxiosArr.push(payload) }, clearAxios(state) { state.

前端项目实践案例——制作Tab选项卡点击切换效果

shhghvvh的博客

11-23

3225

制作Tab选项卡点击切换效果

视频上云/网络穿透/网络映射服务EasyNTS前端切换页面卡顿如何优化？

TSINGSEE青犀视频官方技术博客

09-07

395

EasyNTS作为视频上云网关，具备视频组网、远程运维等功能，上线前会经过研发部-测试部-项目部多重测试，在这个过程中不断完善产品。虽然EasyNTS目前已经上线，但是我们的测试并没有停止，近期就在测试时发现，在进入EasyNTS视频组网服务一段时间后，切换页面会变得卡顿。问题分析 1、打开控制台的network，发现首页的定时器在其他页面也在运行调取接口，运行时间长就会导致浏览器缓存资源增加，其他页面使用时就很卡。 2、切换导航的时候每次都会请求如下两个接口，浪费不必要的资源，而且网络环境较差

频繁发送请求时，返回慢的数据覆盖了返回快的数据

一小只虎的博客

03-27

972

当你在很短的时间内多次触发了页面上查询数据的功能，而你请求的接口返回数据又比较慢时，最后显示的数据总是返回最慢的那条数据，而不是你最后请求的数据，这时可以在每次请求之前通过阻止上次请求的方式避免这种情况的发生

基于Vue实现tab栏切换内容不断实时刷新数据功能

08-30

在开发Web应用时，我们经常遇到需要实现动态切换并实时更新数据的需求，特别是在有多个Tab栏的场景下。Vue.js作为一个轻量级的前端框架，提供了强大的数据绑定和组件化能力，非常适合处理这类问题。本篇文章将详细...

手机移动端Tab选项卡切换带下拉数据异步加载js插件

09-10

在Tab选项卡中，这意味着当用户切换选项卡或下拉时，仅加载所需的数据，而不是一次性加载所有内容，从而提高了加载速度和用户体验。 4. **JS插件实现** - JavaScript插件是实现这些功能的常用工具，它们通常包含一...

vue仿淘宝订单状态的tab切换效果

08-28

Vue仿淘宝订单状态Tab切换效果详解在本文中，我们将详细介绍如何使用Vue实现淘宝订单...通过使用Vue的动态数据切换、Tab切换、指令、数据驱动视图和生命周期钩子函数，我们可以轻松地实现复杂的订单状态切换效果。

vue3解决切换tab页每次切换加载数据导致数据缓慢问题

weixin_41621686的博客

01-04

1123

使用标识符来进行辨认有两个tab页搞个动态加载在开头的vedioload还没开始加载的时候判断是否加载过入股已经加载过则返回不要重新加载。由标签页的离线和在线数据都分开管理使用两个列表：即一个数组两个对象进行存储数组的下标有tab0 tab1 动态决定代替原来的直接覆盖数据。loadvideos会根据loadedTabs的状态决定是否需要加载数据。

2021-09-13

weixin_44815362的博客

09-13

279

tab切换并请求接口使用计算属性导致每次切换tab页签时出现卡顿现象（注意：页面动态循环且数据量大时才会出现卡顿）–解决方案禁止使用计算数据熏染tab中title 后端返回数据量较大且未作分页时table列表熏染html页面出现卡顿较慢/影响体验 --解决方案前端做table列表假分页 table列表请求（网络慢）导致响应慢一定需要加loading优化下载/导出报文数据量大导致前端响应超时（点击导出按钮后响应超时但后端还在生成报文中,再次点击下载又重新生成报文响应超时…） --解决方案后端.

【工作】-处理快速切换 Tab 导致列表数据不正确的情况

weixin_46254175的博客

09-22

644

取消之前的请求：在切换到新的 Tab 之前，首先检查是否有之前的请求正在进行中。如果是，可以使用取消请求的机制中止之前的请求，以确保不会更新当前 Tab 的数据。缓存请求结果：你可以在切换 Tab 时，将已获取的数据缓存起来，以避免重复请求相同的数据。当切换回之前已经获取过的 Tab 时，直接从缓存中获取数据进行展示，而不发起新的请求。防止并发请求：为了避免并发请求导致数据不正确，你可以在发起新请求之前添加一个标记来检查是否已有请求正在进行中。如果有，则不发起新请求，或者等待之前的请求完成后再发起新请求。

Web端的Tab控件在切换Tab时Load数据出错的处理

jcx5083761的专栏

11-21

3913

我们在应用Web端的Tab控件时，不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题，在Tab1正在加载数据的时候我们切换到Tab2，再切换回来，Load数据的控件就会出错，出错的情况有很多种，我做过测试这种情况在Chrome下面没有，IE和Firefox都存在，界面如下：报错的情况会有很多种，但是究其原因，都是由于在切换Tab1到Tab2的时候，实际上将Tab1的d

Tab切换过快导致数据紊乱

wang_fu_gui_ya的博客

09-19

848

这是一个典型左侧切换tab，右侧内容区根据tab切换刷新请求数据，当我们切换tab内容正在loading中再次切换其他tab就会导致数据紊乱。当我们试用queueRequest 函数连续调取接口时，第一个接口完成才回去执行第二个接口，但是bug依在。网上还有一种方法就是要修改底层axios去解决，这种方法不顺我心，所以没去做。最后解决方法还是我把问题想的太复杂了，在接口函数中增加tab的校准再赋值。初步解决以为是第二个接口比第一个快导致，所以我写了一个任务队列。

【React 】开发环境搭建详细指南