关于javascript:javascript高级程序设计学习笔记-113异步函数

关注前端小讴，浏览更多原创技术文章

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 {<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 关键字能够暂停异步函数代码执行，期待期约解决

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
*/

必须在异步函数 中应用
不能在顶级上下文（如 <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真正起作用的是 await（async 只是标识符）
- 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 次批改）*/

能够利用异步函数实现相似 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 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 关键字会怎么？函数的其余部分会在何时复原执行？
写一段代码，用异步函数实现在程序中退出非阻塞的暂停
写一段代码，用异步函数平行执行多个期约，随机设定这些期约的提早，并计算期约全副实现后的应用的工夫
写一段代码，用异步函数做期约连锁

关于javascript:javascript高级程序设计学习笔记-113异步函数

异步函数

异步函数

async

await

await 的限度

进行和复原执行

异步函数策略

实现 sleep()

利用平行执行

串行执行期约

栈追踪与内存治理

总结 & 问点

Just My Socks（注册教程内含优惠码）

关于javascript:javascript高级程序设计学习笔记-113异步函数

异步函数

异步函数

async

await

await 的限度

进行和复原执行

异步函数策略

实现 sleep()

利用平行执行

串行执行期约

栈追踪与内存治理

总结 & 问点

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）