15、async函式
目錄
1、基本用法
async函式返回一個 Promise 物件，可以使用then方法添加回調函式。
當函式執行的時候，一旦遇到await就會先返回，等到非同步操作完成，再接著執行函式體內後面的語句。
async function getStockPriceByName(name) { const symbol = await getStockSymbol(name); const stockPrice = await getStockPrice(symbol); return stockPrice; } getStockPriceByName('goog').then(function (result) { console.log(result); });
上面程式碼是一個獲取股票報價的函式，函式前面的async關鍵字，表明該函式內部有非同步操作。呼叫該函式時，會立即返回一個Promise物件。
下面是另一個例子，指定多少毫秒後輸出一個值。
function timeout(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } async function asyncPrint(value, ms) { await timeout(ms); console.log(value); } asyncPrint('hello world', 50);
上面程式碼指定 50 毫秒以後，輸出hello world。
由於async函式返回的是 Promise 物件，可以作為await命令的引數。所以，上面的例子也可以寫成下面的形式。
async function timeout(ms) { await new Promise((resolve) => { setTimeout(resolve, ms); }); } async function asyncPrint(value, ms) { await timeout(ms); console.log(value); } asyncPrint('hello world', 50);
async 函式有多種使用形式。
// 函式宣告
async function foo() {}
// 函式表示式
const foo = async function () {};
// 物件的方法
let obj = { async foo() {} };
obj.foo().then(...)
// Class 的方法
class Storage {
constructor() {
this.cachePromise = caches.open('avatars');
}
async getAvatar(name) {
const cache = await this.cachePromise;
return cache.match(`/avatars/${name}.jpg`);
}
}
const storage = new Storage();
storage.getAvatar('jake').then(…);
// 箭頭函式
const foo = async () => {};2、語法
1、返回 Promise 物件
async函式返回一個 Promise 物件。
async函式內部return語句返回的值，會成為then方法回撥函式的引數。
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"
上面程式碼中，函式f內部return命令返回的值，會被then方法回撥函式接收到。
async函式內部丟擲錯誤，會導致返回的 Promise 物件變為reject狀態。丟擲的錯誤物件會被catch方法回撥函式接收到。
async function f() {
throw new Error('出錯了');
}
f().then(
v => console.log('resolve', v),
e => console.log('reject', e)
)
//reject Error: 出錯了2、Promise 物件的狀態變化
async函式返回的 Promise 物件，必須等到內部所有await命令後面的 Promise 物件執行完，才會發生狀態改變，除非遇到return語句或者丟擲錯誤。也就是說，只有async函式內部的非同步操作執行完，才會執行then方法指定的回撥函式。
下面是一個例子。
async function getTitle(url) {
let response = await fetch(url);
let html = await response.text();
return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"
上面程式碼中，函式getTitle內部有三個操作：抓取網頁、取出文字、匹配頁面標題。只有這三個操作全部完成，才會執行then方法裡面的console.log。
3、await 命令
正常情況下，await命令後面是一個 Promise 物件，返回該物件的結果。如果不是 Promise 物件，就直接返回對應的值。
async function f() {
// 等同於
// return 123;
return await 123;
}
f().then(v => console.log(v))
// 123
上面程式碼中，await命令的引數是數值123，這時等同於return 123。
另一種情況是，await命令後面是一個thenable物件（即定義了then方法的物件），那麼await會將其等同於 Promise 物件。
class Sleep {
constructor(timeout) {
this.timeout = timeout;
}
then(resolve, reject) {
const startTime = Date.now();
setTimeout(
() => resolve(Date.now() - startTime),
this.timeout
);
}
}
(async () => {
const sleepTime = await new Sleep(1000);
console.log(sleepTime);
})();
// 1000
上面程式碼中，await命令後面是一個Sleep物件的例項。這個例項不是 Promise 物件，但是因為定義了then方法，await會將其視為Promise處理。
4、錯誤處理
如果await後面的非同步操作出錯，那麼等同於async函式返回的 Promise 物件被reject。
async function f() {
await new Promise(function (resolve, reject) {
throw new Error('出錯了');
});
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// Error：出錯了
上面程式碼中，async函式f執行後，await後面的 Promise 物件會丟擲一個錯誤物件，導致catch方法的回撥函式被呼叫，它的引數就是丟擲的錯誤物件。具體的執行機制，可以參考後文的“async 函式的實現原理”。
防止出錯的方法，也是將其放在try...catch程式碼塊之中。
async function f() {
try {
await new Promise(function (resolve, reject) {
throw new Error('出錯了');
});
} catch(e) {
}
return await('hello world');
}
如果有多個await命令，可以統一放在try...catch結構中。
async function main() {
try {
const val1 = await firstStep();
const val2 = await secondStep(val1);
const val3 = await thirdStep(val1, val2);
console.log('Final: ', val3);
}
catch (err) {
console.error(err);
}
}
下面的例子使用try...catch結構，實現多次重複嘗試。
const superagent = require('superagent');
const NUM_RETRIES = 3;
async function test() {
let i;
for (i = 0; i < NUM_RETRIES; ++i) {
try {
await superagent.get('http://google.com/this-throws-an-error');
break;
} catch(err) {}
}
console.log(i); // 3
}
test();
上面程式碼中，如果await操作成功，就會使用break語句退出迴圈；如果失敗，會被catch語句捕捉，然後進入下一輪迴圈。
5、使用注意點
第一點，前面已經說過，await命令後面的Promise物件，執行結果可能是rejected，所以最好把await命令放在try...catch程式碼塊中。
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
// 另一種寫法
async function myFunction() {
await somethingThatReturnsAPromise()
.catch(function (err) {
console.log(err);
});
}
第二點，多個await命令後面的非同步操作，如果不存在繼發關係，最好讓它們同時觸發。
let foo = await getFoo();
let bar = await getBar();
上面程式碼中，getFoo和getBar是兩個獨立的非同步操作（即互不依賴），被寫成繼發關係。這樣比較耗時，因為只有getFoo完成以後，才會執行getBar，完全可以讓它們同時觸發。
// 寫法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 寫法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
上面兩種寫法，getFoo和getBar都是同時觸發，這樣就會縮短程式的執行時間。
第三點，await命令只能用在async函式之中，如果用在普通函式，就會報錯。
async function dbFuc(db) {
let docs = [{}, {}, {}];
// 報錯
docs.forEach(function (doc) {
await db.post(doc);
});
}
上面程式碼會報錯，因為await用在普通函式之中了。但是，如果將forEach方法的引數改成async函式，也有問題。
function dbFuc(db) { //這裡不需要 async
let docs = [{}, {}, {}];
// 可能得到錯誤結果
docs.forEach(async function (doc) {
await db.post(doc);
});
}
上面程式碼可能不會正常工作，原因是這時三個db.post()操作將是併發執行，也就是同時執行，而不是繼發執行。正確的寫法是採用for迴圈。
async function dbFuc(db) {
let docs = [{}, {}, {}];
for (let doc of docs) {
await db.post(doc);
}
}
另一種方法是使用陣列的reduce()方法。
async function dbFuc(db) {
let docs = [{}, {}, {}];
await docs.reduce(async (_, doc) => {
await _;
await db.post(doc);
}, undefined);
}
上面例子中，reduce()方法的第一個引數是async函式，導致該函式的第一個引數是前一步操作返回的 Promise 物件，所以必須使用await等待它操作結束。另外，reduce()方法返回的是docs陣列最後一個成員的async函式的執行結果，也是一個 Promise 物件，導致在它前面也必須加上await。
上面的reduce()的引數函式裡面沒有return語句，原因是這個函式的主要目的是db.post()操作，不是返回值。而且async函式不管有沒有return語句，總是返回一個 Promise 物件，所以這裡的return是不必要的。
如果確實希望多個請求併發執行，可以使用Promise.all方法。當三個請求都會resolved時，下面兩種寫法效果相同。
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = await Promise.all(promises);
console.log(results);
}
// 或者使用下面的寫法
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = [];
for (let promise of promises) {
results.push(await promise);
}
console.log(results);
}
第四點，async 函式可以保留執行堆疊。
const a = () => {
b().then(() => c());
};
上面程式碼中，函式a內部運行了一個非同步任務b()。當b()執行的時候，函式a()不會中斷，而是繼續執行。等到b()執行結束，可能a()早就執行結束了，b()所在的上下文環境已經消失了。如果b()或c()報錯，錯誤堆疊將不包括a()。
現在將這個例子改成async函式。
const a = async () => {
await b();
c();
};
上面程式碼中，b()執行的時候，a()是暫停執行，上下文環境都儲存著。一旦b()或c()報錯，錯誤堆疊將包括a()。
（該筆記學習參考阮一峰老師的《ECMAScript 6 入門》，整理總結了我自己覺得重要的部分，如需觀看原文可點選網址：https://es6.ruanyifeng.com/#docs/intro）