JavaScript异步编程之async await_trao 生成的代码包含‘async await‘,因为该模块使用的是&quot；外部脚本

}

const result = sayHello()
复制代码

现在 result 是什么类型？答案是：Promise<string>，如果将 sayHello 函数中的 return 语句删除，result 是什么类型？答案是：Promise<void>。总结一下，async 函数总是返回一个 promise 对象。


### await 关键字




---


await 关键字可以在 async 函数中使用，也能在 JavaScript modules 的顶层使用。只有将 async 函数与 await 关键字合在一起使用时，async 函数的优势在能体现出来。


await 可以放在任何基于 promise 的异步函数前面，它会暂停后面的代码，直到 promise 的状态变成 fulfilled，然后返回结果值。

functionhello() {
return’hello’
}

asyncfunctionsayHello() {
returnawaithello() // js 不会报错，但是这样写没有意义。
}
复制代码

### async 函数的执行过程




---


以下面这个例子为例来介绍 async 函数的执行过程

asyncfunctionfoo() {
const result1 = awaitnewPromise((resolve) =>setTimeout(resolve, 1000, ‘1’))
const result2 = awaitnewPromise((resolve) =>setTimeout(resolve, 1000, ‘2’))
}

foo()
复制代码

在 foo 函数中有两个 await，程序在执行 foo 函数的时候会分为 3 个阶段。


1. foo 函数体中的第一行被同步执行，这时会得到一个 pending 状态的 promise，foo 函数被挂起并且交出进程的控制权。


2. 当第一个 promise 的状态变成 fulfilled 或者 rejected 之后，进程的控制权重新回到 foo 函数。如果 promise 的状态是 fulfilled，那么将 1 赋值给 result1 变量，程序继续运行，第二个 promise 被创建，foo 函数再次被挂起并且交出进程的控制权。


3. 当第二个 promise 的状态变成 fulfilled 或者 rejected 之后，进程的控制权重新回到 foo 函数。如果 promise 的状态是 fulfilled，那么将 2 赋值给 result2 变量，程序继续运行，foo 函数返回一个用 undefined 兑现的 promise


在 async 函数中，promise 链是分阶段创建的。


### 捕获错误




---


使用 try...catch 捕获 async/await 的错误，现在改写上面的 foo 函数

asyncfunctionfoo() {
try {
const result1 = awaitnewPromise((resolve) =>setTimeout(resolve, 1000, ‘1’))
// 1秒之后 promise 的状态变成 rejectedconst result2 = awaitnewPromise((resolve, reject) =>setTimeout(reject, 1000, ‘error in 2’))
} catch(error){
// 在这里可以得到 promise 被拒绝的理由console.log(error) // error in 2
}
}

foo()
复制代码

### 错误的使用案例




---


使用 async/await 的一个常见错误是，太多的串行。先看个简单例子：

asyncfunctionserial(){
awaitwaitTime(500);
awaitwaitTime(500);
}
复制代码

serial 至少需要 1000ms 才能执行完。如果第二个 await 不依赖第一个 await 的结果，我们完全可以将两个 await 平行

asyncfunctionparallel(){
const p1 = waitTime(500)
const p2 = waitTime(500)
await p1;
await p2;
}
复制代码

parallel 大概 500 ms 就能执行完，因为两个 await 是同时发生的。


再来看一个与业务相关的例子，比如，在这里有多个商品 ID，我们要用商品 ID 通过异步请求拿到商品详情，我们可以这样写：

asyncfunctiongetGoodsDetail(ids) {
const result = [];

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题