JS等待异步请求执行结束

需求场景

开发场景中一定会遇到的，点击提交按钮之后对表单内容进行验证，比如验证账号，卡号等在数据库唯一的值是否填写重复。逻辑上，必须调用验重接口，然后等待验证结果返回并且结果符合预期才可以提交数据。

一个需求：让一个promise异步函数执行结束之后再执行同步函数。

方法：用async await

function a(){
  console.log("a","最后执行");
}

function a1(){
  return new  Promise((resolve,reject)=>{
   setTimeout(function(){
     resolve(100); 
     console.log("a1");       
   },2000)
  })
}
function a2(){
  return new  Promise((resolve,reject)=>{
    setTimeout(function(){
      resolve(100); 
      console.log("a2");       
    },2000)
  })
}

async function exe(){
  await a1()
  await a2()
  a()
}
exe()

分别等待两秒之后，a1，a2输出。

a1
a2
a 最后执行

注意，a1，a2，方法的promise必须用return返回。

但是如果第二个请求依赖于第一个请求返回的结果，想在第一个请求完成之后拿到结果立即使用，这怎么搞。

同理，将第一个请求的then之后的处理函数也变成async 函数，配合await进行处理。

function a(){
    console.log("a","最后执行");
}

function b(){
    return new  Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve(100); 
            console.log("b");            
        },2000)
    })
}
function c(id){
    return new  Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve(id); 
            console.log("c");            
        },2000)
    })
}

async function exe(){
    await b().then( async (res)=>{
        await c(res).then((res)=>{
            console.log(res);
        },err=>{
            console.log(err);
        })    
   },err=>{
    console.log(err);
   })
    a()    
}

exe()

分别等待两秒之后，b，c输出

b
c
100
a 最后执行

下图为在vue2的一个应用，submitForm方法首先对表单进行基本输入条件的判定（比如是否有空值，正则表达式验证格式等），通过之后，await两个promise验证卡号和工号，通过控制台可以看到，的确进行了等待。

await到底在等啥？

await表达式的运算结果取决于它等的是什么。 · 如果它等到的不是一个Promise对象，那 await表达式的运算结果就是它等到的东西。 · 如果它等到的是一个Promise对象,await就忙起来了，它会阻塞后面的代码，等着Promise对象resolve,然后得到resolve 的值，作为await表达式的运算结果。

下面是个例子：

function a(){
    console.log("a","最后执行");
}

function b(){
    return new  Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve(100); 
            console.log("b");            
        },2000)
    })
}
async function exe(){
    let res = await b()
    console.log(res);
    a()
}
exe()
两秒后输出：
b
100
a 最后执行