《javascript高级程序设计》学习笔记 | 11.3.异步函数
发布于 17 天前 作者 simon9124 546 次浏览 来自 分享

关注前端小讴,阅读更多原创技术文章

异步函数

  • ES8 新增异步函数(async/await),是 ES6 期约模式在 ECMAScript 函数中的应用
  • 同步方式的代码执行异步

相关代码→

异步函数

  • ES8 对函数进行了扩展,新增 2 个关键字asyncawait

async

  • 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 {<fulfilled>: "foo"},被当作已解决的期约
foo().then((result) => console.log(result)) // 'foo'

async function bar2() {
  return ['bar'] // 返回没有实现thenable接口的对象
}
console.log(bar2()) // Promise {<fulfilled>: ['bar']},被当作已解决的期约
bar2().then((result) => console.log(result)) // ['bar']

async function baz2() {
  const thenable = {
    then(callback) {
      callback('baz')
    },
  }
  return thenable // 返回实现了thenable接口的非期约对象
}
console.log(baz2()) // Promise {<pending>}
baz2().then((result) => console.log(result)) // 'baz',由then()解包

async function qux() {
  return Promise.resolve('qux') // 返回解决的期约
}
console.log(qux()) // Promise {<pending>}
qux().then((result) => console.log(result)) // 'qux',由then()解包

async function rejectQux() {
  return Promise.reject('qux') // 返回拒绝的期约
}
console.log(rejectQux()) // Promise {<pending>}
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() // 3
  • await会尝试解包对象的值(与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 的限制

  • 必须异步函数中使用
  • 不能在顶级上下文(如<script>标签或模块)中使用
  • 可以定义并立即调用异步函数
  • 异步函数的特质不会扩展到嵌套函数
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() // 3

function 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真正起作用的是awaitasync只是标识符)
    • JS 在运行时碰到await关键字,会记录在哪里暂停执行
    • 等到await右边的值可以用时,JS 向消息队列推送任务,该任务恢复异步函数的执行
    • 即使await右边跟着一个立即可用的值,函数也会暂停,且其余部分会被异步求值
// 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()

  • 可以利用异步函数实现类似JAVAThread.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 p4

  console.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 关键字会怎样?函数的其余部分会在何时恢复执行?
  • 写一段代码,用异步函数实现在程序中加入非阻塞的暂停
  • 写一段代码,用异步函数平行执行多个期约,随机设定这些期约的延迟,并计算期约全部完成后的使用的时间
  • 写一段代码,用异步函数做期约连锁
回到顶部