vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

摘要:
此问题在项目中遇到。记录要求连续五次请求相同的接口,但参数不同。一开始,forEach接口用于循环调用接口。发现有时第一个请求返回的数据比后面的请求返回的速度慢,导致数据混乱。因此,需要控制请求的顺序。因为您需要获取五次数据,然后依次将它们放入指定的数组中。

项目中遇到该问题,记录一下

需求是连续请求5次同一个接口,但是参数不一样。最开始使用 forEach 接口循环调用接口,发现有时候先请求的比后请求的返回数据慢,导致数据顺序混乱,所以需要控制请求的顺序。

因为需要将5次数据拿到依次放入指定的数组中。

这里就使用到了 Promise.all

vue中使用axios对同一个接口连续请求导致返回数据混乱的问题第1张

getLawhelpMethod(){
                const objArrs = [
                    {
                        serverType:'1',
                        articleType:'1'
                    },
                    {
                        serverType:'1',
                        articleType:'2'
                    },
                    {
                        serverType:'1',
                        articleType:'3'
                    },
                    {
                        serverType:'1',
                        articleType:'4'
                    },
                    {
                        serverType:'1',
                        articleType:'5'
                    },
                ]
                this.tabsData.tabMain = []
                let promise1 = getService(objArrs[0])
                let promise2 = getService(objArrs[1])
                let promise3 = getService(objArrs[2])
                let promise4 = getService(objArrs[3])
                let promise5 = getService(objArrs[4])

                Promise.all([promise1,promise2,promise3,promise4,promise5]).then(res => {   // 接口完成
                    // console.log(res)   // res 返回的数据是按顺序返回的一个数组
                     const resData = res.map((item)=>{
                        if(item.rows.length){
                            return {
                                content: item.rows[0].content
                            }
                        }else{
                            return {
                                content: '暂无数据'
                            }
                        }
                    })
                    this.tabsData.tabMain = resData
 
     
        res.forEach((item)=>{   // 这里再用 forEach 就不会数据混乱了(之前是因为请求接口了)
                        if(item.rows.length){
                            this.tabsData.tabMain.push({content:item.rows[0].content})
                        }else{
                            this.tabsData.tabMain.push({content:'暂无数据'})
                        }
       })
                   
 
                })
},

参考链接:https://segmentfault.com/a/1190000020916235?utm_source=tag-newest

免责声明:文章转载自《vue中使用axios对同一个接口连续请求导致返回数据混乱的问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇delphi基本语法工装与设备的区别下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue 笔记

新建项目 vue init webpack  ”项目名称“ 安装element-ui cnpm i element-ui--save main.js导入element-ui: import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(...

前端代码与node代码组合启动 concurrently

vue-demo 中的 package.json 中 scripts "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "start": "npm run serve"}, node-serve 的 package.jso...

iOS KVC 键值编码

1 什么是键值编码 键值编码,key value coding, 简称KVC KVC, 通过字符串间接的获取、改变对象的状态。 2 KVC的基本使用 通过字符串获取对象的状态 接口 oc对象的实例方法:- (id)valueForKey:(NSString *)key; 实例 找name属性或者name方法 如果找不到,就找name和_na...

vue对比其他框架

对比其他框架React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件。 将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。 性能简介 Vue 的性能是优于 React 的。如果你对此表示怀疑,请继续阅读。我们会解释为...

vue 中使用 cesium

vue 中使用 cesium 我是在 vue 项目里面使用的 cesium,但是呢,有点问题,就是有些语法在js转vue的时候有些许的限制,比如说js中相对路径引入文件是一切OK的,vue 也能解决,但是呢,在引入的文件中又引用了其他的文件,vue 处理起来就不是特别的好用,所以说,我是直接在 vue 文件里面使用 iframe 标签引入的 html 文件...

深入理解Apollo核心机制之配置读取——轮询

前两篇内容 《深入理解Apollo核心机制之配置读取——前言》 《深入理解Apollo核心机制之配置读取——ConfigService定时扫描》 概述 读取配置除了默认5分钟间隔去轮询接口拉取配置,还有客户端主动长轮询ConfigService,等待通知后主动拉取配置。本文就看看客户端是如何开始客户端轮询的,以及轮询中的具体细节。 RemoteConfig...