async function（异步函数）

async关键字

• async关键字用于声明一个异步函数

  • async（asynchronous）
  • sync（synchronous）

• async函数的写法有很多

  • 1.async function() {}
    2.const foo2 = async function() {}
    3.const foo3 = asunc () => {}
    4.class Person {async foo() {}}
    

执行流程

• 异步函数默认情况下与普通函数一致，内部代码是同步执行的

• 异步函数有返回值时，与普通函数的区别

  • 异步函数的返回值会被包裹到Promise.resolve中
  • 返回值如果是Promise，Promise.resolve的状态会由Promise决定
  • 返回值如果是一个对象并实现了thenable，那么会由对象的then方法决定

• 如果在异步函数中抛出异常，程序不会像普通函数那样报错，而是会作为Promise的reject来传递

​
// async function foo1() {}
// const foo2 = async () => {};
// class Foo {
//   async foo3() {}
// }
​
// 默认与普通函数执行流程一样
async function foo() {
    console.log("start");
​
    // 异步函数中的异常，会被作为异步函数返回的Promise的reject值
    throw new Error("throw err");
​
    console.log("end");
​
    // 1.返回普通值
    return "aa";
​
    // 2.返回thenable
    // return {
    //   then(resolve, reject) {
    //     resolve('thenable')
    //   }
    // }
​
    // 3.返回promise
    // return new Promise((resolve, reject) => {
    //   resolve('promise')
    // })
}
​
// 1.与普通函数区别-返回值-一定是一个Promise
const promise = foo();
promise
    .then((res) => {
    console.log(res);
})
    .catch((err) => console.log("异常被捕获：", err));
​
// 2.与普通函数区别-异常-
// 普通函数抛出异常后，后续代码不执行；异步函数抛出异常后，代码继续执行
// foo()
console.log(
    "后续代码"
);

await关键字

• async函数的另一个特殊之处是可以在内部使用await关键字

• awsit关键字的特点

  • 使用await后面通常会跟一个表达式，这个表达式会返回一个Promise，await会等到Promise的状态变为fulfilled之后继续执行异步函数
  • 如果await后面是一个普通的值，那么会直接返回这个值
  • 如果await后面是一个thenable对象，那么会根据对象的then方法调用来决定
  • 如果await后面的表达式返回的Promise是reject状态，那么会将这个reject结果直接作为函数的Promise的reject值

function requestData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve("表达式");
            // 如果reject，则会把对应reject的值作为整个foo函数返回Promise对应的reject的值，在调用函数的时候使用catch可以捕获
            reject('表达式 reject')
        }, 2000);
    });
}
​
async function foo() {
    // 没有结果时，await后面的代码都不会执行
​
    // 1.await后面通常跟一个表达式
    const res1 = await requestData();
    console.log("等待Promise的状态改变为fulfilled", res1);
​
    // 2.await后面跟一个普通的值
    const res2 = await "普通的值";
    console.log("等待Promise的状态改变为fulfilled", res2);
​
    // 3.await后面跟一个thenable
    const res3 = await {
        then(resolve, reject) {
            resolve("thenable");
        },
    };
    console.log("等待Promise的状态改变为fulfilled", res3);
​
    // 4.await后面跟一个Promise
    const res4 = await new Promise((resolve, reject) => {
        resolve("promise");
    });
    console.log("等待Promise的状态改变为fulfilled", res4);
}
foo().catch(err => {
    console.log(err);
});