vue用使用异步+reduce实现循环调用接口(上一个接口调用完毕再调用下一个接口)
vue循环请求同一个接口,等接口返回数据之后在进行下次循环(在项目中,有时候会需要批量操作,有些更特殊的还需要按顺序调用接口。注意点:(批量下发10个任务,按任务序号顺序下发,同时需要等上一个任务下发完成再进行下一个任务的下发(不然可能会有后面的接口执行更快提前下发的情况))// 批量下发 multipleIssue() {
·
需求介绍:
vue循环请求同一个接口,等接口返回数据之后在进行下次循环(在项目中,有时候会需要批量操作,有些更特殊的还需要按顺序调用接口。)
注意点:(批量下发10个任务,按任务序号顺序下发,同时需要等上一个任务下发完成再进行下一个任务的下发(不然可能会有后面的接口执行更快提前下发的情况))
代码如下:
// 批量下发
multipleIssue() {
const arr = [123, 456, ...id]
var that = this // 改变this指向
function callPromise(item) {
return new Promise((resolve, reject) => {
testInterface({ id: item }).then((res) => {
if (res.status) {
that.$message({ // 方法内部用that替代this
message: '下发成功',
type: 'success'
})
resolve(item)
} else {
that.$message.error(res.msg)
}
})
})
}
const result = arr.reduce((accumulatorPromise, next) => {
return accumulatorPromise.then(() => { // 上一个接口执行完毕再执行下一个
return callPromise(next)
})
}, Promise.resolve())
result.then(e => {
console.log('All Promises Resolved')
})
}
需求二:
vue如何循环请求同一个接口十次,等第一个请求完成再请求第二个以此类推…请求到第十次如果十次都没结果等三秒重新发起请求?
function request(){
return new Promise((res, rej) => {
setTimeout(() => {
Math.random() > 0.5 ? res() : rej()
}, Math.random() * 1000 + 1000)
})
}
function loop(){
let flag = false
let p = Promise.resolve()
for(let i = 0; i < 10; i++){
p = p.then(_ => {
return request().then(_ => {
flag = true
}, err => {})
})
}
p.then(_ => {
flag || setTimeout(loop, 3000)
})
}
更多推荐
已为社区贡献15条内容
所有评论(0)