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


Posted in Javascript onNovember 06, 2019

业务上出现一个问题:如果连续对同一个接口发出请求,参数不同,有时候先请求的比后请求的返回数据慢,导致数据顺序混乱,或者数据被覆盖的问题,所以需要控制请求的顺序。

解决方法:

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菜单切换到b菜单中,a返回的数据比b返回的慢,导致覆盖了state,此时虽然切换到b菜单,但是页面上的数据是a的数据。

解决方法:使用axios中的CancelToken,对于之前的请求进行禁止。

//取消接口相同参数不同的处于pending状态下的请求
export const pending = []
let CancelToken = axios.CancelToken
let cancelPending = (config) => {
 for(let i=pending.length-1; i>=0; i--){
  if (!!config) {
   if (pending[i].u === config.url && pending[i].delPending) {
    console.log('delete request')
    pending[i].f() // 取消请求
    pending.splice(i, 1) // 移除当前请求记录
   }
  } else {
   pending[i].f() // 取消请求
   pending.splice(i, 1) // 移除当前请求记录
  }
 }
}

接着在请求前进行拦截

/**
 * 请求前拦截
 */
export function requestSuccessFunc (config) {
 cancelPending(config)
 config.cancelToken = new CancelToken((c) => {
  pending.push({'u': config.url, 'f': c, delPending: config.delPending})
 })
 return config
}

/**
 * 请求结果预处理
 * @param response
 * @returns {Promise<never>}
 */
export function responseSuccessFunc (response) {
 cancelPending(response.config)
}

拓展:如果在切换路由的时候可以将之前页面中请求处于pengding状态的取消

export function routerAfterEachFunc () {
 // 这里可以做路由后操作
 //切换路由时取消之前页面处于pending的请求
 for(let i=pending.length-1; i>=0; i--){
  pending[i].f() // 取消请求
  pending.splice(i, 1) // 移除当前请求记录
 }
 console.log(pending)
}

....

const ROUTER = new Router({
 routes: CONST_ROUTER
})
ROUTER.afterEach(routerAfterEachFunc)
export default ROUTER

4.假设这里不是请求同一个接口,而是上一个接口返回的数据作为下一个接口请求的参数,这是可以使用async await

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
js的2种继承方式详解
Mar 04 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
深入理解Vuex 模块化(module)
Sep 26 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
vuex state中的数组变化监听实例
Nov 06 #Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 #Javascript
webpack是如何实现模块化加载的方法
Nov 06 #Javascript
node读写Excel操作实例分析
Nov 06 #Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 #Javascript
electron 安装,调试,打包的具体使用
Nov 06 #Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 #Javascript
You might like
一段php加密解密的代码
2006/10/09 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP的拦截器实例分析
2014/11/03 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
AngularJS内置指令
2015/02/04 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python 深度学习中的4种激活函数
2020/09/18 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
几个Shell Script面试题
2014/04/18 面试题
护士岗前培训自我评鉴
2014/02/28 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
留守儿童工作方案
2014/06/02 职场文书
合作意向书怎么写
2019/06/24 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
判断Python中的Nonetype类型
2021/05/25 Python