详解 js中的async和await

Posted 2021-06-13 ZZZ --- jh

js中的async和await

await 后面接一个会return new promise的函数并执行它
await 只能放在async函数里

async
作为一个关键字放在函数的前面，表示该函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行 异步函数的调用跟普通函数一样

async function timeout(){
    return "helloworld";
}
console.log(timeout());
console.log("我在异步函数后面，会先执行谁呢");
// Promise { 'helloworld' }
// 我在异步函数后面，会先执行谁呢

await
await即等待，用于等待一个promise对象。它只能在异步函数 async function中使用，否则会报错
它的返回值不是promise对象而是promise对象处理之后的结果
await表达式会暂停当前 async function的执行，等待promise 处理完成.若 promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function，若 promise 处理异常(rejected)，await表达式会把promise 的异常原因抛出. 如果 await 操作符后的表达式的值不是一个 promise，那么该值将被转换为一个已正常处理的 promise.
语法: [返回值] = await 表达式;
           表达式: 一个 promise 对象或者任何要等待的值.
           返回值: 返回 promise 对象的处理结果. 如果等待的不是 promise 对象, 则返回该值本身.

在vue项目中应用举例:

data(){
   return {
     userInfo:{},
     activeName:'works', //确定点击的用户
     list:[],
   }
 },
async getInfo(){
   // 请求数据
   let data = await getOtherInfo[this.activeName]({userId:this.userInfo.userId});
   // 接收到的数据是不是点击到的数据,是的话赋值
   if(this.activeName === data.flag){
     this.list = data.list;
   }
 },