《javascript高级程序设计》学习笔记|《javascript高级程序设计》学习笔记 | 11.3.异步函数
关注前端小讴，阅读更多原创技术文章异步函数
- ES8 新增异步函数（
async/await），是 ES6 期约模式在 ECMAScript 函数中的应用 - 以同步方式的代码执行异步
异步函数
- ES8 对函数进行了扩展，新增 2 个关键字
async和await
async关键字用于声明异步函数，可用在函数声明、函数表达式、箭头函数和方法上
async function foo() {} // 用在函数声明
let bar = async function () {} // 用在函数表达式
let baz = async () => {} // 用在箭头函数
class Qux {
async qux() {} // 用在方法
}async关键字让函数具有异步特性，代码仍同步求值，参数或闭包也具有普通 JS 函数的正常行为
async function foo() {
console.log(1)
}
foo()
console.log(2)
/*
1，foo()函数先被求值
2
*/- 异步函数
return返回的值，会被Promise.resolve()包装成期约对象，调用异步函数始终返回该期约对象
- 若
return关键字返回的是实现thenable接口的对象（callback、期约），该对象由提供给then()的处理程序解包 - 若
return关键字返回的是常规的值，返回值被当作已解决的期约（无return关键字，返回值被当作 undefined）
- 若
async function foo() {
return 'foo' // 返回原始值
}
console.log(foo()) // Promise {: "foo"}，被当作已解决的期约
foo().then((result) => console.log(result)) // 'foo'async function bar2() {
return ['bar'] // 返回没有实现thenable接口的对象
}
console.log(bar2()) // Promise {: ['bar']}，被当作已解决的期约
bar2().then((result) => console.log(result)) // ['bar']async function baz2() {
const thenable = {
then(callback) {
callback('baz')
},
}
return thenable // 返回实现了thenable接口的非期约对象
}
console.log(baz2()) // Promise {}
baz2().then((result) => console.log(result)) // 'baz'，由then()解包async function qux() {
return Promise.resolve('qux') // 返回解决的期约
}
console.log(qux()) // Promise {}
qux().then((result) => console.log(result)) // 'qux'，由then()解包async function rejectQux() {
return Promise.reject('qux') // 返回拒绝的期约
}
console.log(rejectQux()) // Promise {【《javascript高级程序设计》学习笔记|《javascript高级程序设计》学习笔记 | 11.3.异步函数】}
rejectQux().then(null, (result) => console.log(result)) // 'qux'，由then()解包
// Uncaught (in promise) qux
rejectQux().catch((result) => console.log(result)) // 'qux'，由catch()解包 - 异步函数中抛出错误会返回拒绝的期约
async function foo() {
console.log(1)
throw 3
}
foo().catch((result) => console.log(result)) // 给返回的期约添加拒绝处理程序
console.log(2)
/*
1，foo()函数先被求值
2
3
*/- 异步函数中拒绝期约的错误（非“返回拒绝的期约”）不会被异步函数捕获
async function foo() {
Promise.reject(3) // 拒绝的期约（非返回）
}
foo().catch((result) => console.log(result)) // catch()方法捕获不到
// Uncaught (in promise) 3，浏览器消息队列捕获await
- 使用
await关键字可以暂停异步函数代码执行，等待期约解决
let p = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 3)
})
p.then((x) => console.log(x)) // 3// 用async/await重写
async function foo() {
let p = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 3)
})
console.log(await p)
}
foo() // 3await会尝试解包对象的值（与yield类似），然后将该值传给表达式，而后异步恢复执行异步函数
async function foo() {
console.log(await Promise.resolve('foo')) // 将期约解包，再将值传给表达式
}
foo()async function bar2() {
return await Promise.resolve('bar')
}
bar2().then((res) => console.log(res)) // 'bar'async function baz2() {
await new Promise((resolve, reject) => {
setTimeout(resolve, 1000)
})
console.log('baz')
}
baz2() // 'baz'（1000毫秒后）await根据等待的值，执行不同的操作
- 若等待的值是实现
thenable接口的对象（callback、期约），该对象由await来解包 - 若等待的值是常规值，该值被当作已解决的期约（然后再由
await来解包）
- 若等待的值是实现
async function foo() {
console.log(await 'foo') // 等待原始值，被当作已解决的期约Promise.resolve('foo')，再由await解包
}
foo() // 'foo'async function bar2() {
console.log(await ['bar']) // 等待值是没有实现thenable接口的对象，被当作已解决的期约再由await解包
}
bar2() // ["bar"]async function baz2() {
const thenable = {
then(callback) {
callback('baz')
},
}
console.log(await thenable) // 等待值是实现了thenable接口的非期约对象，由await解包
}
baz2() // 'baz'async function qux() {
console.log(await Promise.resolve('qux')) // 等待值是解决的期约
}
qux() // 'qux'- 等待会抛出错误的同步操作，会返回拒绝的期约
async function foo() {
console.log(1)
await (() => {
throw 3 // 抛出错误的同步操作
})()
}
foo().catch((result) => console.log(result)) // 给返回的期约添加拒绝处理程序
console.log(2)
/*
1
2
3
*/- 对拒绝的期约使用
await，会释放错误值（将拒绝期约返回）
async function foo() {
console.log(1)
await Promise.reject(3) // 对拒绝的期约使用await，将其返回（后续代码不再执行）
console.log(4) // 不执行
}
foo().catch((result) => console.log(result)) // 给返回的期约添加拒绝处理程序
console.log(2)
/*
1
2
3
*/await 的限制
- 必须在异步函数中使用
- 不能在顶级上下文（如
标签或模块）中使用 - 可以定义并立即调用异步函数
- 异步函数的特质不会扩展到嵌套函数
async function foo() {
console.log(await Promise.resolve(3)) // 必须在异步函数中使用
}
foo() // 3
;
(async function () {
console.log(await Promise.resolve(3)) // 3，立即调用的异步函数表达式
})()const syncFn = async () => {
console.log(await Promise.resolve(3)) // 在箭头函数中使用，箭头函数前一样要加async
}
syncFn() // 3function foo() {
// console.log(await Promise.resolve(3)) // 不允许在同步函数中使用
}async function foo() {
// function bar() {
//console.log(await Promise.resolve(3)) // 错误：异步函数不会扩展到嵌套函数
// }
async function bar() {
console.log(await Promise.resolve(3)) // 需要在bar前加async
}
}停止和恢复执行
async/await真正起作用的是await（async只是标识符）
- JS 在运行时碰到
await关键字，会记录在哪里暂停执行 - 等到
await右边的值可以用时，JS 向消息队列推送任务，该任务恢复异步函数的执行 - 即使
await右边跟着一个立即可用的值，函数也会暂停，且其余部分会被异步求值
- JS 在运行时碰到
// async只是标识符
async function foo() {
console.log(2)
}
console.log(1)
foo()
console.log(3)
/*
1
2
3
*/// 遇到await -> 记录暂停 -> await右边的值可用 -> 恢复执行异步函数
async function foo() {
console.log(2)
await null // 暂停，且后续操作变为异步
// 为立即可用的值null向消息队列中添加一个任务
console.log(4)
}
console.log(1)
foo()
console.log(3)
/*
1
2
3
4
*/- 如果
await后面是一个期约，则会有两个任务被添加到消息队列并被异步求值
- 第一个任务是等待期约的返回值，第二个任务是拿到返回值后执行进程
- tc39 对
await后面是期约的情况做过 1 次修改，await Promise.resolve()不再生成 2 个异步任务，而只是 1 个
async function foo() {
console.log(2)
console.log(await Promise.resolve(8))
console.log(9)
}async function bar2() {
console.log(4)
console.log(await 6)
console.log(7)
}console.log(1)
foo()
console.log(3)
bar2()
console.log(5)
/*
书本顺序：1 2 3 4 5 6 7 8 9
浏览器顺序：1 2 3 4 5 8 9 6 7（tc39做过1次修改）
*/异步函数策略 实现 sleep()
- 可以利用异步函数实现类似
JAVA中Thread.sleep()的函数，在程序中加入非阻塞的暂停
function sleep(delay) {
return new Promise((resolve) => setTimeout(resolve, delay)) // 设定延迟，延迟后返回一个解决的期约
}
async function foo() {
const t0 = Date.now()
await sleep(1500) // 暂停约1500毫秒
console.log(Date.now() - t0)
}
foo() // 1507利用平行执行
- 按顺序等待 5 个随机的超时
async function randomDelay(id) {
const delay = Math.random() * 1000 // 随机延迟0-1000毫秒
return new Promise((resolve) =>
setTimeout(() => {
console.log(`${id} finished`)
resolve()
}, delay)
)
}async function foo() {
const t0 = Date.now()
await randomDelay(0)
await randomDelay(1)
await randomDelay(2)
await randomDelay(3)
await randomDelay(4)
console.log(`${Date.now() - t0} ms elapsed`)
}
foo()
/*
0 finished
1 finished
2 finished
3 finished
4 finished
3279 ms elapsed
*/// 用for循环重写
async function foo() {
const t0 = Date.now()
for (let i = 0;
i < 5;
i++) {
await randomDelay(i)
}
console.log(`${Date.now() - t0} ms elapsed`)
}
foo()
/*
0 finished
1 finished
2 finished
3 finished
4 finished
3314 ms elapsed
*/- 不考虑顺序时，可以先一次性初始化所有期约，分别等待结果（获得平行加速）
async function foo() {
const t0 = Date.now()// 一次性初始化所有期约
const p0 = randomDelay(0)
const p1 = randomDelay(1)
const p2 = randomDelay(2)
const p3 = randomDelay(3)
const p4 = randomDelay(4)// 分别等待结果，延迟各不相同
await p0
await p1
await p2
await p3
await p4console.log(`${Date.now() - t0} ms elapsed`)
}
foo()
/*
4 finished
3 finished
1 finished
0 finished
2 finished
870 ms elapsed，大幅度降低总耗时
*/// 用数组和for循环再次包装
async function foo() {
const t0 = Date.now()
const promises = Array(5)
.fill(null)
.map((item, i) => randomDelay(i))for (const p of promises) {
await p
}
console.log(`${Date.now() - t0} ms elapsed`)
}
foo()
/*
1 finished
3 finished
0 finished
4 finished
2 finished
806 ms elapsed
*/- 尽管期约未按顺序执行，但
await按顺序收到每个期约的值
async function randomDelay(id) {
const delay = Math.random() * 1000 // 随机延迟0-1000毫秒
return new Promise((resolve) =>
setTimeout(() => {
console.log(`${id} finished`)
resolve(id)
}, delay)
)
}
async function foo() {
const t0 = Date.now()
const promises = Array(5)
.fill(null)
.map((item, i) => randomDelay(i))for (const p of promises) {
console.log(`awaited ${await p}`)
}
console.log(`${Date.now() - t0} ms elapsed`)
}
foo()
/*
1 finished
4 finished
0 finished
awaited 0
awaited 1
2 finished
awaited 2
3 finished
awaited 3
awaited 4
833 ms elapsed
*/串行执行期约
- 使用
async/await做期约连锁
function addTwo(x) {
return x + 2
}
function addThree(x) {
return x + 3
}
function addFive(x) {
return x + 5
}
async function addTen(x) {
for (const fn of [addTwo, addThree, addFive]) {
x = await fn(x)
}
return x
}
addTen(9).then((res) => console.log(res)) // 19- 将函数改成异步函数，返回期约
async function addTwo(x) {
return x + 2
}
async function addThree(x) {
return x + 3
}
async function addFive(x) {
return x + 5
}
addTen(9).then((res) => console.log(res)) // 19栈追踪与内存管理
- 在超时处理执行和拒绝期约时，错误信息包含嵌套函数的标识符（被调用以创建最初期约实例的函数）栈追踪信息中不应该看到这些已经返回的函数
- JS 引擎会在创建期约时，尽可能保留完整的调用栈，抛出错误时栈追踪信息会占用内存，带来一些计算和存储成本
function fooPromiseExecutor(resolve, reject) {
setTimeout(reject, 1000, 'bar')
}
function foo() {
new Promise(fooPromiseExecutor)
}
foo()
/*
Uncaught (in promise) bar
setTimeout (async) // 错误信息包含嵌套函数的标识符
fooPromiseExecutor // fooPromiseExecutor函数已返回，不应该在栈追踪信息中看到
foo
*/- 换成异步函数，已经返回的函数不会出现在错误信息中，嵌套函数（在内存）中存储指向包含函数的指针，不会带来额外的消耗
async function foo() {
await new Promise(fooPromiseExecutor)
}
foo()
/*
Uncaught (in promise) bar
foo
async function (async)
foo
*/总结 & 问点
- async 关键字的用法是什么？根据函数内返回值的不同，异步函数的返回值有哪些情况？
- await 关键字的用法是什么？根据等待值的不同，调用异步函数有哪些情况？其使用有哪些限制？
- JS 运行时遇到 await 关键字会怎样？函数的其余部分会在何时恢复执行？
- 写一段代码，用异步函数实现在程序中加入非阻塞的暂停
- 写一段代码，用异步函数平行执行多个期约，随机设定这些期约的延迟，并计算期约全部完成后的使用的时间
- 写一段代码，用异步函数做期约连锁
推荐阅读
- 慢慢的美丽
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 《跨界歌手》:亲情永远比爱情更有泪点
- 诗歌:|诗歌: 《让我们举起世界杯，干了！》
- 期刊|期刊 | 国内核心期刊之（北大核心）
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- 人间词话的智慧
- 《一代诗人》37期，生活，江南j，拨动心潭的一泓秋水
- 广角叙述|广角叙述 展众生群像——试析鲁迅《示众》的展示艺术
- 书评——《小行星》