摘要：一方面，這里替代的是異步代碼的編寫方式，并非完全拋棄大家心愛的，地球人都知道是基于的，不用太傷心另一方面，是基于回調(diào)函數(shù)實現(xiàn)的，那也沒有替代回調(diào)函數(shù)咯重構(gòu)代碼之后，我仍然用到了庫。

摘要： 夸張點說，技術(shù)的發(fā)展與歷史一樣，順之者昌，逆之者亡。JS開發(fā)者們，趕緊擁抱Async/Await吧！

GitHub倉庫: Fundebug/promise-asyncawait

早在半年多之前，我就在鼓吹A(chǔ)sync/Await替代Promise的6個理由，似乎還招致了一些批評。然而，直到最近，我才真正開始進行代碼重構(gòu)，拋棄Promise，全面使用Async/Await。因為，Node 8終于LTS了！

是的是的。

這些天，我大概重構(gòu)了1000行代碼，最大的感覺是代碼簡潔了很多：

真正地用同步的方式寫異步代碼

不用寫then及其回調(diào)函數(shù)，減少代碼行數(shù)，也避免了代碼嵌套

所有異步調(diào)用可以寫在同一個代碼塊中，無需定義多余的中間變量

async函數(shù)會隱式地返回一個Promise，因此可以直接return變量，無需使用Promise.resolve進行轉(zhuǎn)換

下面，我們可以通過一個非常簡單的示例來體驗一下Async/Await的酸爽：

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的6個理由，批評者執(zhí)著于Async/Await是基于Promise實現(xiàn)的，因此替代這個詞不準(zhǔn)確，這就有點尷尬了。

一方面，這里替代的是異步代碼的編寫方式，并非完全拋棄大家心愛的Promise，地球人都知道Async/Await是基于Promise的，不用太傷心；另一方面，Promise是基于回調(diào)函數(shù)實現(xiàn)的，那Promise也沒有替代回調(diào)函數(shù)咯？

重構(gòu)代碼之后，我仍然用到了Promise庫bluebird。"Talk is cheap, Show me the code!"，大家不妨看看兩個示例。

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

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錯誤監(jiān)控平臺，支持各種前端和后端框架，可以幫助您第一時間發(fā)現(xiàn)BUG！

使用Promise.map讀取多個文件的數(shù)據(jù)，調(diào)用異步接口的時候有兩種方式：

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函數(shù)。但是，在調(diào)用readFile與Promise.map函數(shù)時，使用Async/Await與使用Promise是兩種不同寫法，它們是相互替代的關(guān)系。

有啊有啊。

使用了await的函數(shù)定義時要加一個async，調(diào)用異步函數(shù)的時候需要加一個await，這玩意寫多了也覺著煩，有時候還容易忘掉。不寫async代碼直接報錯，不寫await代碼執(zhí)行會出錯。

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寫著有點添亂，可不可以不寫呢？我想以后應(yīng)該是可以的，只要能夠自動識別異步代碼就行了，這應(yīng)該也是未來的發(fā)展方向。至于說如何實現(xiàn)，那我就不知道了哎。

JavaScript的異步編寫方式，從回調(diào)函數(shù)到Promise再到Async/Await，表面上只是寫法的變化，本質(zhì)上則是語言層的一次次抽象，讓我們可以用更簡單的方式實現(xiàn)同樣的功能，而程序員不需要去考慮代碼是如何執(zhí)行的。在我看來，這樣的進步應(yīng)該不會停止，有一天我們也許不用寫Async/Await了！

Async/Await替代Promise的6個理由

Async/Await是這樣簡化JavaScript代碼的

版權(quán)聲明:
轉(zhuǎn)載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/12/13/reconstruct-from-promise-to-async-await/