本章介紹 Brian Terlson 提議的 ECMAScript 2017 新特性 Async Functions(非同步函式) 。

概述

async(非同步) 函式變體

以下是已經存在的非同步函式變體。請注意無處不在的 async 關鍵字。

• 非同步函式宣告： async function foo() {}
• 非同步函式表示式： const foo = async function () {};
• 非同步函式定義：let obj = { async foo() {} }
• 非同步箭頭函式： const foo = async () => {};

async(非同步) 函式總是返回 Promises

async(非同步) 函式的 Promise 完成狀態：

JavaScript程式碼:
async function asyncFunc(){
return123;
}
asyncFunc()
.then(x => console.log(x));
// 123

async(非同步) 函式的 Promise 拒絕狀態：

JavaScript程式碼:
async function asyncFunc(){
thrownewError('Problem!');
}
asyncFunc()
.catch(err => console.log(err));
// Error: Problem!

通過 await 處理 async(非同步) 計算的結果和錯誤

await（只允許在 async(非同步) 函式內部使用）等待其操作物件 Promise 返回：

• 如果 Promise 是完成狀態，await 的結果是完成態的值。
• 如果 Promise 是拒絕狀態，await 會丟擲拒絕值。

處理單個 async(非同步) 返回值：

JavaScript程式碼:
async function asyncFunc(){
const result = await otherAsyncFunc();
    console.log(result);
}
// 等價於:
function asyncFunc(){
return otherAsyncFunc()
.then(
 
result =>{
        console.log(result);
});
}

按順序處理多個 async(非同步) 返回值：

JavaScript程式碼:
async function asyncFunc(){
const result1 = await otherAsyncFunc1();
    console.log(result1);
const result2 = await otherAsyncFunc2();
    console.log(result2);
}
// 等價於:
function asyncFunc(){
return otherAsyncFunc1()
.then(result1 =>{
        console.log(result1);
return otherAsyncFunc2();
})
.then(result2 =>{
        console.log(result2);
});
}

並行處理多個 async(非同步) 返回值：

JavaScript程式碼:
async function asyncFunc(){
const[result1, result2]= await Promise.all([
        otherAsyncFunc1(),
        otherAsyncFunc2(),
]);
    console.log(result1, result2);
}
// 等價於:
function asyncFunc(){
returnPromise.all([
        otherAsyncFunc1(),
        otherAsyncFunc2(),
])
.then([result1, result2]=>{
        console.log(result1, result2);
});
}

錯誤處理：

JavaScript程式碼:
async function asyncFunc(){
try{
        await otherAsyncFunc();
}catch(err){
        console.error(err);
}
}
// 等價於:
function asyncFunc(){
return otherAsyncFunc()
.catch(err =>{
        console.error(err);
});
}

理解 async(非同步) 函式

在我解釋 async(非同步) 函式之前，我需要解釋一下如何組合使用 Promises 和 Generator ，通過看起來同步的程式碼來執行 async(非同步) 操作。

對於能夠 async(非同步) 計算其一次性結果的函式，作為 ES6 一部分的 Promises 已經變得流行起來。一個例子是 客戶端 fetch API ，它是 XMLHttpRequest 獲取資料的替代方法。使用示例如下：

JavaScript程式碼:
function fetchJson(url){
return fetch(url)
.then(request => request.text())
.then(text =>{
return JSON.parse(text);
})
.catch(error =>{
        console.log(`ERROR: ${error.stack}`);
});
}
fetchJson('http://example.com/some_file.json')
.then(obj => console.log(obj));

通過 generator 來編寫非同步程式碼

co 是一個使用 Promise 和 generator 來實現看似同步編碼的庫，但與上一示例中使用的樣式相同：

JavaScript程式碼:
const fetchJson = co.wrap(function*(url){
try{
        let request = yield fetch(url);
        let text = yield request.text();
return JSON.parse(text);
}
catch(error){
        console.log(`ERROR: ${error.stack}`);
}
});

每次回撥函式（ generator 函式）產生一個 Promise 物件給 co ，回撥會被暫停，只有當 Promise 執行完成後，co 才會繼續執行回撥 。 如果 Promise 處於完成狀態，yield 返回完成狀態的值，如果處於拒絕狀態，yield 丟擲拒絕狀態的錯誤。此外，co 保證結果是通過回撥執行完成才返回的（類似於 then() 所做的工作）。

通過 async(非同步) 函式來編寫非同步程式碼

async(非同步) 函式用的特定語法基本上和 co 類似：

JavaScript程式碼:
async function fetchJson(url){
try{
        let request = await fetch(url);
        let text = await request.text();
return JSON.parse(text);
}
catch(error){
        console.log(`ERROR: ${error.stack}`);
}
}

在內部，非同步函式寫法更類似於 generators 。

以同步開始，非同步處理的 async(非同步) 函式

以下是 async(非同步)函式是如何工作的：

1. async(非同步) 函式總是返回一個 Promise 物件 p 。Promise 物件在 async(非同步) 函式開始執行時被建立。
2. 函式體執行過程中，可以通過 return 或 throw 終止執行。或者通過 await 暫停執行，在這種情況下，通常會在以後繼續執行。
3. 返回 Promise 物件 p。

當執行 async(非同步) 函式的函式體時，return x 中的 x 是 Promise 物件 p 的完成狀態的結果，而 throw err 是 p 的拒絕狀態的結果。執行結果是非同步返回的。換句話說：then() 和 catch() 的回撥總是在當前程式碼完成後執行。

以下是程式碼示例：

JavaScript程式碼:
async function asyncFunc(){
    console.log('asyncFunc()');// (A)
return'abc';
}
asyncFunc().
then(x => console.log(`Resolved: ${x}`));// (B)
console.log('main');// (C)
// Output:
// asyncFunc()
// main
// Resolved: abc

您可以認為是以下的執行順序：

1. 行A：async(非同步) 函式以同步開始。async(非同步) 函式的 Promise 通過 return 來返回完成狀態的結果。
2. 行C：執行繼續。
3. 行B：Promise 完成狀態通知是非同步發生的。

返回不被包裹的 Promise 物件

Promise 的 resolve 是一項標準操作。 return 就是使用它來 resolve async(非同步) 函式的 Promise p 的。這意味著：

1. 返回一個非 Promise 值，該值將被處理成 p 的完成狀態值。
2. 返回一個 Promise 物件，那麼 p 此時相當於是該 Promise 的狀態。

因此，您可以返回一個 Promise ，並且這個 Promise 不會包裹在別的 Promise 中：

JavaScript程式碼:
async function asyncFunc(){
returnPromise.resolve(123);
}
asyncFunc()
.then(x => console.log(x))// 123

有趣的是，返回一個拒絕狀態（reject）的 Promise 物件會導致 async(非同步) 函式被拒絕（reject）（通常，您可以使用 throw ）：

JavaScript程式碼:
async function asyncFunc(){
returnPromise.reject(newError('Problem!'));
}
asyncFunc()
.catch(err => console.error(err));// Error: Problem!

這與 Promise 解決方案的工作方式是一致的。 使你能夠在不使用 await 的情況下，使用其他 async(非同步) 計算來執行完成和拒絕處理：

JavaScript程式碼:
async function asyncFunc(){
return anotherAsyncFunc();
}

上面的程式碼示例和下面的類似，但是比下面的更高效。（以下程式碼示例沒有包裹 anotherAsyncFunc() 的 Promise ，而是包裹 anotherAsyncFunc() 本身 ）：

JavaScript程式碼:
async function asyncFunc(){
return await anotherAsyncFunc();
}

使用 await 小貼士

不要忘記使用 await

在 async(非同步) 函式中容易犯的一個錯誤就是在呼叫 async(非同步) 函式時忘記使用 await ：

JavaScript程式碼:
async function asyncFunc(){
const value = otherAsyncFunc();// missing `await`!
···
}

在這個例子中，方法執行返回的 Promise 物件賦值給了 value ，它通常不是你在 async(非同步) 函式中想要的結果。

await 甚至可以在 async(非同步) 函式不返回任何值的情況下起作用。它的 Promise 只是用來告訴呼叫者完成狀態。例如：

JavaScript程式碼:
async function foo(){
    await step1();// (A)
···
}

行A中的 await 確保在執行 foo() 剩餘部分之前， step1() 已經執行完成。

不需要使用 await 的情況

有時，你只想觸發非同步計算，並且不需要關注它什麼時候完成。以下是程式碼示例：

JavaScript程式碼:
async function asyncFunc(){
const writer = openFile('someFile.txt');
    writer.write('hello');// don’t wait
    writer.write('world');// don’t wait
    await writer.close();// wait for file to close
}

在這裡，我們不關心單個的寫入操作是否完成，只需要他們以正確的順序執行 (API必須保證，但這是由 async(非同步) 函式的執行模型所鼓勵的，正如我們所見)。

asyncFunc() 函式最後一行的 await 確保該函式僅在檔案寫入關閉後才會執行。

由於返回的 Promises 沒有被其他 async(非同步) 函式包裹，所以你可以用 return 替換 await writer.close() ：

JavaScript程式碼:
async function asyncFunc(){
const writer = openFile('someFile.txt');
    writer.write('hello');
    writer.write('world');
return writer.close();
}

這兩個版本各有利弊，await 版本可能稍微更容易理解。

await 是順序執行的，Promise.all() 是並行的

下面的程式碼呼叫了兩個 async(非同步) 函式， asyncFunc1() 和 asyncFunc1() 。

JavaScript程式碼:
async function foo(){
const result1 = await asyncFunc1();
const result2 = await asyncFunc2();
}

這兩個函式呼叫順序執行。但是並行執行它們往往會加快速度。您可以使用 Promise.all() ：

JavaScript程式碼:
async function foo(){
const[result1, result2]= await Promise.all([
        asyncFunc1(),
        asyncFunc2(),
]);
}

我們現在正在等待一個包含兩個元素的陣列的 Promise ，而不是等待兩個 Promise。

非同步函式和回撥

async(非同步) 函式的一個限制是 await(等待) 隻影響直接相關的 async(非同步) 函式。因此，async(非同步) 函式無法在回撥（但是，回撥可以是 async(非同步) 函式本身，稍後我們將會看到）中使用 await(等待)。這使得基於回撥的實用函式和方法難以使用。例子中我們將使用陣列方法 map() 和 forEach()。

Array.prototype.map()

我們從陣列方法 map() 開始講解。在下面的程式碼示例中，我們想要載入由 URLs 陣列指向的檔案，並將它們返回到陣列中。

JavaScript程式碼:
async function downloadContent(urls){
return urls.map(url =>{
// 錯誤的語法!
const content = await httpGet(url);
return content;
});
}

這不起作用，因為在正常箭頭函式中 await 語法上是非法的(愚人碼頭注： await(等待) 隻影響直接相關的 async(非同步) 函式)。那麼如何使用非同步的箭頭函式呢？

JavaScript程式碼:
async function downloadContent(urls){
return urls.map(async (url)=>{// 注意這一行中的 async ;
const content = await httpGet(url);
return content;
});
}

這段程式碼有兩個問題：

• 現在返回的結果是一個 Promises 物件的陣列，而不是一個字串的陣列。
• 一旦 map() 執行完成，回撥執行的工作並不能同時完成，因為 await 只暫停了包裹它的箭頭函式 和 httpGet() 非同步執行達到完成狀態。這意味著你不能使用 await，來等待 downloadContent() 執行結束。

我們可以通過 Promise.all() 來解決這兩個問題，Promise.all() 可以將一系列的 Promise 轉換為一個 Promise 陣列（所有值都是經過 Promise 完成並返回）：

JavaScript程式碼:
async function downloadContent(urls){
const promiseArray = urls.map(async (url)=>{
const content = await httpGet(url);
return content;
});
return await Promise.all(promiseArray);
}

map() 的回撥並不對 httpGet() 的結果起作用，只是起到不斷執行的作用。因此，這裡我們不需要一個非同步的箭頭函式，只需要一個普通的箭頭函式就能達到相同的結果。

JavaScript程式碼:
async function downloadContent(urls){
const promiseArray = urls.map(
        url => httpGet(url));
return await Promise.all(promiseArray);
}

我們仍然可以做一個小的改進：這個非同步函式稍微有點低效 – 首先通過 await 來解開 Promise.all() 的結果，然後通過 return 再次包裹它。 假設 return 不包裹 Promises，我們可以直接返回 Promise.all() 的結果：

JavaScript程式碼:
async function downloadContent(urls){
const promiseArray = urls.map(
        url => httpGet(url));
returnPromise.all(promiseArray);
}

Array.prototype.forEach()

我們使用陣列的 forEach() 方法在控制檯中列印幾個通過 URLs 載入的檔案的內容：

JavaScript程式碼:
async function logContent(urls){
    urls.forEach(url =>{
// Wrong syntax
const content = await httpGet(url);
        console.log(content);
});
}

同樣的，這裡的程式碼會產生一個語法錯誤，因為你不能在通常的箭頭函式內部使用 await 。

我們換作非同步箭頭函式：

JavaScript程式碼:
async function logContent(urls){
    urls.forEach(async url =>{
const content = await httpGet(url);
        console.log(content);
});
// Not finished here
}

這段程式碼起作用了，但是會出現一個警告：httpGet() 返回的 Promise 物件是非同步完成的，這也意味著當 forEach() 返回的時候回撥可能還沒有結束，因此你無法等到 logContent() 只能結束。

如果你並不想要這個結果，你可以將 forEach() 轉換為 for-of 迴圈。

JavaScript程式碼:
async function logContent(urls){
for(const url of urls){
const content = await httpGet(url);
        console.log(content);
}
}

現在一切都在 for-of 迴圈完成後完成。但是，處理步驟依次發生：httpGet() 只是在第一次呼叫完成後再次呼叫。如果您希望處理步驟並行執行，你必須使用 Promise.all()：

JavaScript程式碼:
async function logContent(urls){
    await Promise.all(urls.map(
        async url =>{
const content = await httpGet(url);
            console.log(content);
}));
}

map() 用於建立一個 Promises 陣列。 我們對他們的完成結果並不感興趣，我們只要 await(等待) 所有方法執行完成。這意味著我們希望的是在 async(非同步) 函式完成之後所有的執行都已經完成。我們也可以返回 Promise.all() ，但是該函式的結果是一個數組，其元素都是未完成狀態的。

使用非同步函式小貼士

瞭解你的 Promises

async(非同步) 函式的基礎就是 Promises 物件，這就是為什麼理解 Promises 對於理解 async(非同步) 函式至關重要。特別是當遇到不是基於 Promises 的老程式碼來實現 async(非同步) 函式時，你通常別無選擇，只能用 Promise 來重構。

舉個例子，這裡有個 “promisified” 版本的 XMLHttpRequest ：

JavaScript程式碼:
function httpGet(url, responseType=""){
returnnewPromise(
function(resolve, reject){
const request =newXMLHttpRequest();
            request.onload =function(){
if(this.status ===200){
// Success
                    resolve(this.response);
}else{
// Something went wrong (404 etc.)
                    reject(newError(this.statusText));
}
};
            request.onerror =function(){
                reject(newError(
'XMLHttpRequest Error: '+this.statusText));
};
            request.open('GET', url);
            xhr.responseType = responseType;
            request.send();
});
}

XMLHttpRequest 的 API 是基於回撥的。通過一個 async(非同步) 函式來實現它，意味著你必須在回撥中返回 Promise 的完成(fulfill) 或拒絕(reject) 狀態。這是不可能的，因為你只能通過 return 或者 throw 來完成這樣的操作。你不能從回撥函式內部 return 一個函式的結果。throw也有類似的約束。

因此，非同步函式的通用編碼風格是：

• 直接使用 Promise 物件來構建非同步原語。
• 用非同步函式來使用這些原語。

擴充套件閱讀：“Exploring ES6” 中的 “非同步程式設計中的 Promises 物件” 章節

立即呼叫非同步函式表示式

有時，如果你可以在模組或指令碼的頂層使用 await ，那將是一種很好的選擇。當然，它只能在非同步函式中使用。您可以建立一個非同步函式 main()  並立即呼叫它：

JavaScript程式碼:
async function main(){
    console.log(await asyncFunction());
}
main();

或者您可以使用立即呼叫非同步函式表示式：

JavaScript程式碼:
(async function(){
    console.log(await asyncFunction());
})();

另一個選擇是立即呼叫非同步箭頭函式：

JavaScript程式碼:
(async ()=>{
    console.log(await asyncFunction());
})();

用非同步函式進行單元測試

以下程式碼使用 測試框架 mocha 對非同步函式 asyncFun1() 和 asyncFun2() 來進行單元測試：

JavaScript程式碼:
import assert from 'assert';
// Bug: the following test always succeeds
test('Testing async code',function(){
    asyncFunc1()// (A)
.then(result1 =>{
        assert.strictEqual(result1,'a');// (B)
return asyncFunc2();
})
.then(result2 =>{
        assert.strictEqual(result2,'b');// (C)
});
});

然而，這個測試總是成功的，因為 mocha 不會等待 B 行和 C 行斷言執行完成。

你可以通過返回鏈式呼叫的 Promise 來解決這個問題，因為 mocha 會識別一個測試是否返回一個 Promise ，然後等待該 Promise 完成 再進行下一步（除非超時）。

JavaScript程式碼:
return asyncFunc1()// (A)

非同步函式總是返回 Promises ，這使得它們能方便的、完美的來進行這種單元測試：

JavaScript程式碼:
import assert from 'assert';
test('Testing async code', async function(){
const result1 = await asyncFunc1();
    assert.strictEqual(result1,'a');
const result2 = await asyncFunc2();
    assert.strictEqual(result2,'b');
});

在 mocha 中使用非同步單元測試非同步函式有兩個優點：程式碼更簡潔，能夠準確處理返回的 Promise 物件。

不要擔心沒有處理的拒絕拒態

當前的 JavaScript 引擎可以在拒絕態未處理的情況下提出警告。以下程式碼在過去會經常執行失敗，但是當前的 JavaScript 引擎可以進行警告：

JavaScript程式碼:
async function foo(){
thrownewError('Problem!');
}
foo();

閱讀延伸

• 非同步函式 （提出者Brian Terlson）