重構：從Promise到Async/Await

時間 2019-12-05

標籤 promise async await 欄目 Java 简体版

原文原文鏈接

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

GitHub倉庫: Fundebug/promise-asyncawait

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

Async/Await真的比Promise好嗎？

是的是的。前端

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

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

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

示例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極大地簡化了代碼，使得代碼可讀性提升了很是多。git

Async/Await真的替代了Promise？

是的是的。程序員

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

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

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

示例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了！

參考

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。