重構：從Promise到Async/Await

摘要： 誇張點說，技術的發展與歷史同樣，順之者昌，逆之者亡。JS開發者們，趕忙擁抱Async/Await吧！

• GitHub倉庫: Fundebug/promise-asyncawait

早在半年多以前，我就在鼓吹Async/Await替代Promise的6個理由，彷佛還招致了一些批評。然而，直到最近，我才真正開始進行代碼重構，拋棄Promise，全面使用Async/Await。由於，Node 8終於LTS了！

Async/Await真的比Promise好嗎？

是的是的。

這些天，我大概重構了1000行代碼，最大的感受是代碼簡潔了不少：

• 真正地用同步的方式寫異步代碼
• 不用寫then及其回調函數，減小代碼行數，也避免了代碼嵌套
• 全部異步調用能夠寫在同一個代碼塊中，無需定義多餘的中間變量
• async函數會隱式地返回一個Promise，所以能夠直接return變量，無需使用Promise.resolve進行轉換

下面，咱們能夠經過一個很是簡單的示例來體驗一下Async/Await的酸爽：

示例1

const Promise = require("bluebird")
var readFile = Promise.promisify(require("fs").readFile)

// 使用Promise
function usePromise() {
    let a
    readFile("a.txt", "utf8")
        .then(tmp =>
        {
            a = tmp
            return readFile("b.txt", "utf8")
        })
        .then(b =>
        {
            let result = a + b
            console.log(result) // 輸出"Hello, Fundebug!"
        })

}

// 使用Async/Await
async function useAsyncAwait() {
    let a = await readFile("a.txt", "utf8")
    let b = await readFile("b.txt", "utf8")
    let result = a + b
    console.log(result) // 輸出"Hello, Fundebug!"
}

usePromise()
useAsyncAwait()
複製代碼

由示例可知，使用Async/Await極大地簡化了代碼，使得代碼可讀性提升了很是多。

Async/Await真的替代了Promise？

是的是的。

對於Async/Await替代Promise的6個理由，批評者執着於Async/Await是基於Promise實現的，所以替代這個詞不許確，這就有點尷尬了。

一方面，這裏替代的是異步代碼的編寫方式，並不是徹底拋棄你們心愛的Promise，地球人都知道Async/Await是基於Promise的，不用太傷心；另外一方面，Promise是基於回調函數實現的，那Promise也沒有替代回調函數咯？

重構代碼以後，我仍然用到了Promise庫bluebird。"Talk is cheap, Show me the code!"，你們不妨看看兩個示例。

示例2：Promise.promisify

使用Promise.promisify將不支持Promise的方法Promise化，調用異步接口的時候有兩種方式：

const Promise = require("bluebird")
var readFile = Promise.promisify(require("fs").readFile)

// 使用Promise
function usePromise() {
    readFile("b.txt", "utf8")
        .then(b =>
        {
            console.log(b)
        })
}

// 使用Async/Await
async function useAsyncAwait() {
    var b = await readFile("b.txt", "utf8")
    console.log(b) // 輸出"Fundebug!"
}

usePromise()
useAsyncAwait()
複製代碼

Fundebug是全棧JavaScript錯誤監控平臺，支持各類前端和後端框架，能夠幫助您第一時間發現BUG！

示例3：Promise.map

使用Promise.map讀取多個文件的數據，調用異步接口的時候有兩種方式：

const Promise = require("bluebird")
var readFile = Promise.promisify(require("fs").readFile)
var files = ["a.txt", "b.txt"]

// 使用Promise
function usePromise() {
    Promise.map(files, file =>
        {
            return readFile(file, "utf8")
        })
        .then(results =>
        {
            console.log(results)
        })
}

// 使用Async/Await
async function useAsyncAwait() {
    var results = await Promise.map(files, file =>
    {
        return readFile(file, "utf8")
    })
    console.log(results)
}

usePromise()
useAsyncAwait()
複製代碼

沒錯，個人確使用了Promise庫，readFile與Promise.map都是Promise函數。可是，在調用readFile與Promise.map函數時，使用Async/Await與使用Promise是兩種不一樣寫法，它們是相互替代的關係。

Async/Await有什麼問題嗎？

有啊有啊。

使用了await的函數定義時要加一個async，調用異步函數的時候須要加一個await，這玩意寫多了也覺着煩，有時候還容易忘掉。不寫async代碼直接報錯，不寫await代碼執行會出錯。

示例4

const Promise = require("bluebird")
var readFile = Promise.promisify(require("fs").readFile)

// 沒有Async
function withoutAsync() {
    let b = await readFile("b.txt", "utf8") // 報錯"SyntaxError: Unexpected identifier"
    console.log(b) 
}

// 沒有await
async function withoutAwait() {
    let b = readFile("b.txt", "utf8")
    console.log(b) // 打印"Promise..."
}

withoutAsync()
withoutAwait()
複製代碼

既然Async/Await寫着有點添亂，可不能夠不寫呢？我想之後應該是能夠的，只要可以自動識別異步代碼就好了，這應該也是將來的發展方向。至於說如何實現，那我就不知道了哎。

總結

JavaScript的異步編寫方式，從回調函數到Promise再到Async/Await，表面上只是寫法的變化，本質上則是語言層的一次次抽象，讓咱們能夠用更簡單的方式實現一樣的功能，而程序員不須要去考慮代碼是如何執行的。在我看來，這樣的進步應該不會中止，有一天咱們也許不用寫Async/Await了！

參考

• Async/Await替代Promise的6個理由
• Async/Await是這樣簡化JavaScript代碼的

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了7億+錯誤事件，獲得了Google、360、金山軟件、百姓網等衆多知名用戶的承認。歡迎免費試用！

版權聲明

轉載時請註明做者Fundebug以及本文地址：
blog.fundebug.com/2017/12/13/…