async await的使用：多个值按顺序提交_async handleonsubmit() {

业务

点击提交按钮循环选择的人员数据，分别调用提交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('执行完了')
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

异步操作执行顺序的小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')})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

await 会阻塞当前async

关于执行顺序的问题可以参考大佬写的，蛮详细的
https://blog.csdn.net/m0_37922914/article/details/108564884