业务上出现一个问题：如果连续对同一个接口发出请求，参数不同，有时候先请求的比后请求的返回数据慢，导致数据顺序混乱，或者数据被覆盖的问题，所以需要控制请求的顺序。
解决方法:
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。