深刻理解 JavaScript 異步系列（5）—— async await

時間 2019-11-06

標籤深刻理解 javascript 異步系列 async await 欄目 JavaScript 简体版

原文原文鏈接

第一部分，ES7 中引入 async-await

原文地址 http://www.cnblogs.com/wangfupeng1988/p/6532734.html 未經做者容許，不得轉載~html

前面介紹完了Generator的異步處理，能夠說是跌跌撞撞，通過各類基礎介紹和封裝，好容易出了一個比較簡潔的異步處理方案，學習成本很是高————這顯然不是咱們想要的！前端

所以，還未發佈的 ES7 就乾脆本身參照Generator封裝了一套異步處理方案————async-await。說是參照，其實能夠理解爲是Generator的語法糖！node

本節示例代碼參照這裏git

本節內容概述

Generator和async-await的對比
使用async-await的不一樣和好處
接下來...

`Generator`和`async-await`的對比

先來一段Generator處理異步的代碼，前面已經介紹過了，看不明白的再獲取接着看。github

 
  co(function* () {
    const r1 = yield readFilePromise('some1.json')
    console.log(r1)  // 打印第 1 個文件內容
    const r2 = yield readFilePromise('some2.json')
    console.log(r2)  // 打印第 2 個文件內容
}) 
 

再來一段async-await的執行代碼以下，二者作一個比較。web

 
  const readFilePromise = Q.denodeify(fs.readFile)

// 定義 async 函數
const readFileAsync = async function () {
    const f1 = await readFilePromise('data1.json')
    const f2 = await readFilePromise('data2.json')
    console.log('data1.json', f1.toString())
    console.log('data2.json', f2.toString())

    return 'done' // 先忽略，後面會講到
}
// 執行
const result = readFileAsync() 
 

從上面兩端代碼比較看來，async function代替了function*，await代替了yield，其餘的再沒有什麼區別了。哦，還有，使用async-await時候不用再引用co這種第三方庫了，直接執行便可。面試

使用`async-await`的不一樣和好處

第一，await後面不能再跟thunk函數，而必須跟一個Promise對象（所以，Promise纔是異步的終極解決方案和將來）。跟其餘類型的數據也OK，可是會直接同步執行，而不是異步。npm

第二，執行const result = readFileAsync()返回的是個Promise對象，並且上面代碼中的return 'done'會直接被下面的then函數接收到json

 
  result.then(data => {
    console.log(data)  // done
}) 
 

第三，從代碼的易讀性來將，async-await更加易讀簡介，也更加符合代碼的語意。並且還不用引用第三方庫，也無需學習Generator那一堆東西，使用成本很是低。babel

所以，若是 ES7 正式發佈了以後，強烈推薦使用async-await。可是如今還沒有正式發佈，從穩定性考慮，仍是Generator更好一些。

接下來...

node v7 版本已經開始原生支持async-await了，不過 node 的目前穩定版本仍是v6，尚不支持，怎麼辦？———— 固然是萬能的babel！下一節就介紹。

第二部分，如何在 nodejs `v6.x`版本中使用 async-await

本節介紹一下如何使用babel來讓 node v6 版本也能運行async-await

本節內容概述

安裝必要的插件
建立入口文件並執行

安裝必要的插件

運行npm i babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-3 babel-runtime --save安裝一堆須要的插件。

而後在項目根目錄建立.babelrc文件，文件內容編寫爲

 
  {
  "presets": ["stage-3", "es2015"],
  "plugins": ["transform-runtime"]
} 
 

建立入口文件並執行

加入你編寫async-await的代碼文件是test.js，那麼你須要建立另外一個文件，例如test-entry.js做爲入口文件。入口文件內容編寫爲

 
  require("babel-core/register");
require("./test.js");

而後直接運行node test-entry.js就能夠了

第三部分，總體總結

一週左右的業餘時間總結完，寫完，也是累得我夠嗆。不算什麼體力活，可是每天的坐在書桌旁寫這些東西也是很考驗一我的的定力，沒點耐性是確定不行的 ———— 這算是獲獎感言嗎 😂

本節內容概述

基礎知識不可忽略
異步操做代碼的變化
寫在最後

礎知識不可忽略

這裏的基礎知識分爲兩部分，都不能忽略，都須要深刻研究和思考

什麼是異步，異步的實現原理，event-loop，以及和事件綁定的關係。這些在最初介紹時，都講過，不要看完了就忘記了；
不管異步操做的寫法如何變化，JS 仍是單線程、異步執行的語言，callback一直都存在並且發揮做用，這個在此前的章節一直強調；

異步操做代碼的變化

最後咱們來感覺一下，從一開始callback方式到後來的async-await方式，前先後後編寫異步代碼的變化。從變化中就能夠體會到，確實愈來愈簡潔，愈來愈易讀。

callback方式

 
  fs.readFile('some1.json', (err, data) => {
    fs.readFile('some2.json', (err, data) => {
        fs.readFile('some3.json', (err, data) => {
            fs.readFile('some4.json', (err, data) => {

            })
        })
    })
}) 
 

Promise方式

 
  readFilePromise('some1.json').then(data => {
    return readFilePromise('some2.json')
}).then(data => {
    return readFilePromise('some3.json')
}).then(data => {
    return readFilePromise('some4.json')
}) 
 

Generator方式

 
  co(function* () {
    const r1 = yield readFilePromise('some1.json')
    const r2 = yield readFilePromise('some2.json')
    const r3 = yield readFilePromise('some3.json')
    const r4 = yield readFilePromise('some4.json')
}) 
 

async-await方式

 
  const readFileAsync = async function () {
    const f1 = await readFilePromise('data1.json')
    const f2 = await readFilePromise('data2.json')
    const f3 = await readFilePromise('data3.json')
    const f4 = await readFilePromise('data4.json')
} 
 