业务
点击提交按钮循环选择的人员数据,分别调用提交api
由于提交方法是ajax是异步的,单纯的循环提交会出现顺序错乱
因此采用async await进行阻塞
代码
onSubmit() {
let that =this
let asyncList=[] //ajax方法数组
for(let i=0;i<that.selectEmployees.length;i++) {
let arg=that.selectEmployees[i]//需要传的参数
async function test(arg){enroll(arg.employeeId, that.courseId, 'UNCANCELED')}
asyncList.push({func:test,argument:arg})//将test方法放到数组中,顺便传下参数
};
async function async(){
for(var i=0;i<asyncList.length;i++){//循环ajax方法数组
await asyncList[i].func(asyncList[i].argument).then(()=>{//.then中可以进一步处理返回值
console.log('已执行'+i)
})
}
}
async().then(()=>{//所有的ajax执行完的处理
console.log('执行完了')
})
},
异步操作执行顺序的小demo
上面的代码其实可以简化为
function fuc1(){
return new Promise((resolve)=>{
setTimeout(() => {
resolve('fuc1')
console.log('fuc1')
}, 2000);
})
};
function fuc2(){
return new Promise((resolve)=>{
setTimeout(() => {
resolve('fuc2')
console.log('fuc2')
}, 1000);
})
};
var list=[fuc1,fuc2]
async function fuc(){
for(var i=0;i<list.length;i++){
console.log(list[i])
await list[i]().then(console.log(i+'done'))
}
};
fuc().then(()=>{console.log('all done')})
await 会阻塞当前async
关于执行顺序的问题可以参考大佬写的,蛮详细的
https://blog.csdn.net/m0_37922914/article/details/108564884