详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
业务上出现一个问题：如果连续对同一个接口发出请求，参数不同，有时候先请求的比后请求的返回数据慢，导致数据顺序混乱，或者数据被覆盖的问题，所以需要控制请求的顺序。
解决方法:
1.直接跟后台沟通，将所有参数放到数组里后台统一接收并返回所有数据再由前端进行数据的拆分使用。
2.对于出现返回的数据混乱问题。
假设场景：页面中需要对三个部门请求对应的部门人员，三个部门人员的数据为一个二维数组，连续发送请求，但由于返回数据的顺序不定，导致数组中的数据顺序不是按照部门的顺序。
解决方法：使用promise.all+axios。
//获取部门人员的请求
getDepartPerson(departData){
letthat=this
returnnewPromise(function(resolve,reject){
that.$axios({
method:'get',
url:...,
params:{
...
}
}).then(res=>{
constdata=res.data.map(item=>{
return{
value:item.userId,
label:item.userName
}
})
resolve(data)
})
})
},
//使用promise.all控制返回的数据顺序
setPersonData(){
constdata=[{
departId:1,
departName:'部门1'
},{
departId:2,
departName:'部门2'
},{
departId:3,
departName:'部门3'
}]
letpromise1=this.getDepartPerson(data[0])
letpromise2=this.getDepartPerson(data[1])
letpromise3=this.getDepartPerson(data[2])
console.log(promise1,promise2,promise3)
letthat=this
Promise.all([promise1,promise2,promise3]).then(value=>{
console.log(value)//value返回的数据是按顺序的
})
},
这里要注意
在promise中this不能指向vue的，所以在promise使用前赋值
letthat=this
3.对于返回数据出现覆盖的问题
假设场景：切换菜单的时候总是会向后台发送同一个请求，不同参数。且假设这几个菜单共用vuex中的一个state，假设从a菜单切换到b菜单中，a返回的数据比b返回的慢，导致覆盖了state，此时虽然切换到b菜单，但是页面上的数据是a的数据。
解决方法：使用axios中的CancelToken，对于之前的请求进行禁止。
//取消接口相同参数不同的处于pending状态下的请求
exportconstpending=[]
letCancelToken=axios.CancelToken
letcancelPending=(config)=>{
for(leti=pending.length-1;i>=0;i--){
if(!!config){
if(pending[i].u===config.url&&pending[i].delPending){
console.log('deleterequest')
pending[i].f()//取消请求
pending.splice(i,1)//移除当前请求记录
}
}else{
pending[i].f()//取消请求
pending.splice(i,1)//移除当前请求记录
}
}
}
接着在请求前进行拦截
/**
*请求前拦截
*/
exportfunctionrequestSuccessFunc(config){
cancelPending(config)
config.cancelToken=newCancelToken((c)=>{
pending.push({'u':config.url,'f':c,delPending:config.delPending})
})
returnconfig
}
/**
*请求结果预处理
*@paramresponse
*@returns{Promise}
*/
exportfunctionresponseSuccessFunc(response){
cancelPending(response.config)
}
拓展：如果在切换路由的时候可以将之前页面中请求处于pengding状态的取消
exportfunctionrouterAfterEachFunc(){
//这里可以做路由后操作
//切换路由时取消之前页面处于pending的请求
for(leti=pending.length-1;i>=0;i--){
pending[i].f()//取消请求
pending.splice(i,1)//移除当前请求记录
}
console.log(pending)
}
....
constROUTER=newRouter({
routes:CONST_ROUTER
})
ROUTER.afterEach(routerAfterEachFunc)
exportdefaultROUTER
4.假设这里不是请求同一个接口，而是上一个接口返回的数据作为下一个接口请求的参数，这是可以使用asyncawait
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。