vue用使用异步+reduce实现循环调用接口（上一个接口调用完毕再调用下一个接口）

需求介绍：

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')
	})
}

参考文章：五种在循环中使用 async/await 的方法

需求二：

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)
    })
}