}
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页的前端面试题