详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题_vue循环调用同一个接口 - CSDN文库

43 浏览量更新于2023-03-16 评论收藏 51KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

的问题的问题

主要介绍了详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题，文中通过示例代码介绍的非

常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

业务上出现一个问题：如果连续对同一个接口发出请求，参数不同，有时候先请求的比后请求的返回数据慢，导致数据顺序混

乱，或者数据被覆盖的问题，所以需要控制请求的顺序。

解决方法解决方法:

1.直接跟后台沟通，将所有参数放到数组里后台统一接收并返回所有数据再由前端进行数据的拆分使用。

2.对于出现返回的数据混乱问题。

假设场景：页面中需要对三个部门请求对应的部门人员，三个部门人员的数据为一个二维数组，连续发送请求，但由于返回

数据的顺序不定，导致数组中的数据顺序不是按照部门的顺序。

解决方法：使用promise.all + axios。

//获取部门人员的请求

getDepartPerson (departData) {

let that = this

return new Promise(function(resolve,reject) {

that.$axios({

method: 'get',

url: ...,

params: {

...

}

}).then(res => {

const data = res.data.map(item => {

return {

value: item.userId,

label: item.userName

}

})

resolve(data)

})

})

},

//使用promise.all控制返回的数据顺序

setPersonData() {

const data = [{

departId: 1,

departName: '部门1'

}, {

departId: 2,

departName: '部门2'

}, {

departId: 3,

departName: '部门3'

}]

let promise1 = this.getDepartPerson(data[0])

let promise2 = this.getDepartPerson(data[1])

let promise3 = this.getDepartPerson(data[2])

console.log(promise1,promise2,promise3)

let that = this

Promise.all([promise1,promise2,promise3]).then(value => {

console.log(value) //value返回的数据是按顺序的

})

},

这里要注意

在promise中this不能指向vue的，所以在promise使用前赋值

let that = this

3.对于返回数据出现覆盖的问题

假设场景：切换菜单的时候总是会向后台发送同一个请求，不同参数。且假设这几个菜单共用vuex中的一个state，假设从a菜

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38683562

粉丝: 6
资源: 970

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈