[JavaScript]_ 异步函数（async/await）

这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」。

异步函数，也称为“async/await”(语法关键字)，是 ES6 期约模式在 ECMAScript 函数中的应用。 async/await 是 ES8 规范新增的。

他的作用是：让以同步方式写的代码能够异步执行。

在认识Promise(一)有提到，Promise可以解决回调函数深入嵌套（回调地狱）的问题, 虽然它可以解决嵌套的问题，但实际上还是使用函数处理，只不过链式调用的。如果说其他代码要访问上一个处理程序的值，那么就需要写一个解决的处理程序。（处理程序就是一个函数）如下所示：

let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3));
p.then((x) => console.log(x)); 

ES8 的 async/await 旨在解决利用异步结构组织代码的问题。

async

async用来定义异步函数，这个异步函数具有普通的JavaScript函数的正常行为，区别就是这个异步函数始终会返回一个期约对象。

// 同普通的`JavaScript`函数一样的
async function foo() { 
    console.log(1); 
    return 1;
}
foo()
console.log(2)
// 1
// 2

// 区别
async function foo1() { 
    console.log(1); 
    return 1;
}

foo1().then((res) => {
    console.log(res)
})

async function foo2() { 
    console.log(2); 
}

foo2().then((res) => {
    console.log(res)
})

async function foo3() { 
    console.log(3); 
    return Promise.resolve(3)
}

foo3().then((res) => {
    console.log(res)
})

• 如果return的值是一个Promise对象，那么就以这个return的值为准。
• 如果return的值不是Promise对象，那么就会被Promise.resolve()包装成一个Promise对象。
• 如果这个异步函数没有return值,那么就返回一个解决值为undefined的Promise对象。

1. 如果随意抛出一个错误呢？

async function foo() { 
    console.log(1); 
    throw 123;
}
foo().catch((er) => {console.log(er)})

可以被catch方法捕获。

3. 如果使用return一个Promise.reject()值呢？

async function foo4() { 
    console.log(4); 
    return Promise.reject(4)
}
foo4().catch((err) => {
    console.log(err)
})

return一个Promise.reject()值可以被catch方法捕获。(但不是通过return返回的拒绝期约的错误不会被异步函数捕获)

async function foo() { 
    console.log(1); 
    Promise.reject(3);
}

await

await关键字可以暂停异步函数代码的执行，等待期约解决。

每天学习一小节