async-await

async 函数介绍

  1、async 函数执行结果是： 返回一个 Promise 对象（ newPromise ） 

• • fn 返回普通值（只要不抛错返回的 promise 的状态就是 fulfilled ）

    async function fn() {
        setTimeout(() => {resolve("syy")}, 3000) // 不会等待当前异步代码执行完，再确定 newPromise；
        return 10; // 如果没返回值，则 newPromise = {[[PromiseState]]: "fulfilled" , [[PromiseResult]]: undefined}
    }
    var newPromise = fn(); // newPromise : {[[PromiseState]]: "fulfilled" , [[PromiseResult]]: 10}

• • fn 返回 Promise 对象

    async function fn() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {resolve("syy")}, 3000)
        })
    }
    fn().then(res => { console.log(res); }); // syy , fn内部promise中的异步代码代码执行完成之后才会调用then方法的回调函数

  2、async 函数内部抛出错误，会导致返回的 Promise 对象变为 rejected 状态，抛出的错误对象会被 catch 方法回调函数接收到

// 抛错方式一、
async function getData(){
    throw new Error('出错了');
}
getData().catch(e=> console.log(e) );//Error: 出错了

// 抛错方式二、
async function getData2(){
    return Promise.reject('出错了'); 
}

  3、async 函数内部所有 await 命令后面的代码执行完，才会返回，除非遇到 return 语句或者抛出错误。

async function f() {
    await Promise.reject('出错了');//不会往下执行了
    await Promise.resolve('hello world');   
    ....
}   
console.log(f()); // {[[PromiseState]]: "rejected" , [[PromiseResult]]: "出错了"}

 

await 关键字介绍

   1、await 用于 async 函数内部 ； 会阻塞js代码 ；

• •   如果 await 后面是一个基本类型值，那 await 表达式的运算结果就是后面的结果

    var p = await 3 + 5; // p = 8

• •   如果 await 后面是 Promise 对象：当前 promise 变成 fulfilled 或 rejected 后,语句才会往下执行；

    async function fn() {
        return new Promise((resolve, reject) => {
            setTimeout(() => { resolve("syy") }, 3000)
        })
    }
    async function test() {
        var p = await fn();
        console.log(p); // syy
    };
    test();

 

  2、可以将第一个 await 放在 try...catch 结构里面，这样不管这个异步操作是否成功，第二个await都会执行  

async function f() {
  try {
      await Promise.reject('出错了');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}
f().then(v => console.log(v))  //hello world

 

  3、如果 await 后面的异步操作出错，那么等同于 async 函数返回的 Promise 对象被 reject

async function f() {
    await new Promise(function (resolve, reject) {
        throw new Error('出错了');
    });
}
f().catch(e => console.log(e))  //Error：出错了

 

  4、多个 await 命令后面的异步操作，如果不存在继发关系，最好让它们同时触发

let foo = await getFoo();
let bar = await getBar();
//上面代码中，getFoo和getBar是两个独立的异步操作（即互不依赖）。这样比较耗时，因为只有getFoo完成以后，才会执行getBar，完全可以让它们同时触发
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

 

•