乐趣区

关于javascript:ES6-系列十async和await

jiezi

“Code tailor”，为前端开发者提供技术相干资讯以及系列根底文章，微信关注“小和山的菜鸟们”公众号，及时获取最新文章。

前言

在开始学习之前，咱们想要告诉您的是，本文章是对阮一峰《ECMAScript6 入门》一书中 “async 和 await” 章节的总结，如果您已把握上面常识事项，则可跳过此环节间接进入题目练习

  • 呈现原由
  • 什么是 async？
  • 什么是 await？
  • 如何创立和应用？

如果您对某些局部有些忘记，👇🏻 曾经为您筹备好了！

学习链接

async 和 await 的学习

汇总总结

呈现原由

async functions 和 await 关键字是最近增加到 JavaScript 语言外面的。它们是 ECMAScript 2017 JavaScript 版的一部分（参见 ECMAScript Next support in Mozilla）。简略来说，它们是基于 promises 的语法糖，使异步代码更易于编写和浏览。通过应用它们，异步代码看起来更像是老式同步代码，因而它们十分值得学习。

什么是 async

async 函数是 AsyncFunction· 构造函数的实例，并且其中容许应用 await 关键字。

当应用 async 关键字，置于函数申明之前，使其成为 async function。异步函数是一个晓得怎么应用 await 关键字调用异步代码的函数。

语法

async function name([param[, param[, ... param]]]) {statements}

参数

name：函数名称

param：传递给函数参数的名称

statements：蕴含函数主体的表达式，可应用 await 机制

返回值

promise 这个 promise 要么会通过一个由 async 函数返回的值被解决，要么会通过一个从 async 函数中抛出的（或其中没有被捕捉到的）异样被回绝。

什么是 await

await 操作符用于期待一个Promise 对象。它只能在异步函数 async function 中应用。

await 表达式会暂停以后 async function 的执行，期待 Promise 解决实现。若 Promise 失常解决 (fulfilled )，其回调的 resolve 函数参数作为 await 表达式的值，继续执行 async function。若 Promise 解决异样，则抛出谬误起因

语法

;[返回值] = await 表达式

表达式

一个 Promise 对象或者任何要期待的值。

返回值

返回 Promise 对象的处理结果。如果期待的不是 Promise 对象，则返回该值自身。

创立和应用

让咱们将上节的 readFile 示例 转化为应用 async / await 看看它使事件变得简略了多少

const readFile = function (name, ms) {return new Promise((resolve, reject) => {setTimeout(() => {console.log(name + '读完了')
      resolve()}, ms)
  })
}

async function useAsyncAwait() {await readFile('first', 1000)
  await readFile('second', 2000)
  await readFile('third', 3000)
  await readFile('forth', 4000)
  await readFile('fifth', 5000)
  console.log('async 文件浏览结束')
}
useAsyncAwait()

长处

  • 内置执行器。意味着不须要像 generator 一样调用 next 函数或 co 模块
  • 更广的适用性。async 和 await 前面跟的都是 promise 函数，原始数据类型会被转为 promise
  • 语义更清晰、简洁

毛病

  • 大量的 await 代码会阻塞（程序并不会等在原地，而是持续事件循环，等到响应后持续往下走）程序运行，每个 await 都会期待前一个实现

更多细节请参考 JavaScript 异步发展史

题目自测

一：下列代码输入后果为（）

const myPromise = () => Promise.resolve('I have resolved!')

function firstFunction() {myPromise().then((res) => console.log(res))
  console.log('second')
}

async function secondFunction() {console.log(await myPromise())
  console.log('second')
}

firstFunction()
secondFunction()
  • A: I have resolved!, second and I have resolved!, second
  • B: second, I have resolved! and second, I have resolved!
  • C: I have resolved!, second and second, I have resolved!
  • D: second, I have resolved! and I have resolved!, second

二：以下代码输入为（）

async function getData() {return await Promise.resolve('I made it!')
}

const data = getData()
console.log(data)
  • A: "I made it!"
  • B: Promise {<resolved>: "I made it!"}
  • C: Promise {<pending>}
  • D: undefined

三：以下代码输入什么？

async function async1() {console.log('async1 start')
  await async2()
  console.log('async1 end')
}

async function async2() {console.log('async2')
}

console.log('script start')

setTimeout(function () {console.log('setTimeout')
}, 0)

async1()

new Promise(function (resolve) {console.log('promise1')
  resolve()}).then(function () {console.log('promise2')
})

console.log('script end')

题目解析

一、

Answer: D

Promise。仅当某个值胜利（或回绝）并且调用堆栈为空时，我才想应用该值。咱们能够在异步函数中同时应用 .then 和await关键字来获取此值。只管咱们能够同时应用 .then 和await来取得承诺的价值，但它们的工作形式略有不同。在 firstFunction 中，咱们（某种程度上）将 myPromise 函数在运行时放在一边，但持续运行其余代码，在本例中为 console.log（'second'）。而后，该函数应用我已解析的字符串解析，而后在看到调用堆栈为空之后将其记录下来。应用secondFunction 中的 await 关键字，咱们从字面上暂停了异步函数的执行，直到值解析结束，而后再移至下一行。这意味着它期待 myPromise 解析为我已解析的值，只有产生这种状况后，咱们才移至下一行：记录了第二行。

二、

Answer: A

异步函数总是返回一个承诺。期待依然须要期待要解决的承诺：调用 getData（） 时返回挂起的承诺，以便将数据设置为它。

如果咱们想拜访解析的值“我做到了”，咱们能够在数据上应用 .then（） 办法：

data.then(res => console.log(res))

会打印"I made it!"

三、

Answer: 

// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout
  • 首先，事件循环从宏工作（macrostack）队列开始，这个时候，宏工作队列中，只有一个 script (整体代码)工作。从宏工作队列中取出一个工作来执行。
  • 首先执行 console.log('script start')，输入‘script start’
  • 遇到 setTimeout 把 console.log('setTimeout') 放到 macrotask队列中
  • 执行 aync1() 输入 ‘async1 start' 和 'async2', 把 console.log('async1 end') 放到micro 队列中
  • 执行到 promise，输入 'promise1'，把 console.log('promise2') 放到 micro 队列中
  • 执行console.log('script end')，输入‘script end’
  • macrotask 执行实现会执行 microtask，把 microtask quene 外面的 microtask全副拿进去一次性执行完，所以会输入 'async1 end' 和‘promise2'
  • 开始新一轮的事件循环，去除执行一个macrotask 执行，所以会输入 ‘setTimeout'
退出移动版