含義
ES2017標(biāo)準(zhǔn)引入了async函數(shù),使得異步操作變得更加方便.
async函數(shù)其實就是Generator函數(shù)的語法糖.
Generator函數(shù)依次讀取兩個文件:
const fs = require('fs');
const readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return reject(error);
resolve(data);
});
});
};
const gen = function* () {
const f1 = yield readFile('/etc/fstab');
const f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
協(xié)程async函數(shù),如下:
const asyncReadFile = async function () {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
比較可以發(fā)現(xiàn),async函數(shù)就是將Generator函數(shù)的星號(*)替換成async,將yield替換成await.
async函數(shù)對Generator函數(shù)的改進,體現(xiàn)在以下幾點:
- 內(nèi)置執(zhí)行器
Generator函數(shù)的執(zhí)行必須靠執(zhí)行器,所以才有了co模塊,而asnyc函數(shù)自帶執(zhí)行器.也就是說,asnyc函數(shù)的執(zhí)行,與普通函數(shù)一模一樣,只要一行
asyncReadFile();
- 更好的語義
async表示函數(shù)里有異步操作,await表示緊跟在后面的表達式需要等待結(jié)果 - 更廣的適用性
co模塊約定,yield命令后面只能是Thunk函數(shù)或Promise對象,而asnyc函數(shù)的await命令后面,可以是Promise對象和原始類型的值(數(shù)值,字符串和布爾值,但這是等同于同步操作) - 返回值是Promise
asnyc函數(shù)的返回值是Promise對象,這比Generator函數(shù)的返回值是Iterator對象方便多了.可以使用then方法指定下一步的操作.
進一步說,asnyc函數(shù)完全可以看做多個異步操作,包裝成的一個Promise對象,而await命令就是內(nèi)部then命令的語法糖.
基本用法
async函數(shù)返回一個Promise對象,可以使用then方法添加回調(diào)函數(shù).當(dāng)函數(shù)執(zhí)行的時候,一旦遇到await就會先返回,等到異步操作完成,在家這執(zhí)行函數(shù)體內(nèi)后面的語句.
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函數(shù)有多種使用形式
// 函數(shù)聲明
async function foo() {}
// 函數(shù)表達式
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(…);
// 箭頭函數(shù)
const foo = async () => {};
語法
難點是錯誤處理機制
返回Promise對象
async函數(shù)內(nèi)部return語句返回的值,會成為then方法回調(diào)函數(shù)的參數(shù)
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"
async函數(shù)內(nèi)部拋出錯誤,會導(dǎo)致返回的Promise對象變成reject狀態(tài).拋出的錯誤對象會被catch方法回調(diào)函數(shù)接收到.
Promise對象的狀態(tài)變化
asnyc函數(shù)返回的Promise對象,必須等到內(nèi)部所有await命令后面的Promise對象執(zhí)行完,才會發(fā)生執(zhí)行狀態(tài)改變,除非遇到return語句或者拋出錯誤.也就是說,只有asnyc函數(shù)內(nèi)部的異步操作執(zhí)行完,才會執(zhí)行then方法指定的回調(diào)函數(shù).
await命令
正常情況下,await命令后面是一個Promise對象,如果不是,會被轉(zhuǎn)成一個立即resolve的Promise對象.
async function f() {
return await 123;
}
f().then(v => console.log(v))
// 123
await命令后面的Promise對象如果變成reject狀態(tài),則reject的參數(shù)會被catch方法的回調(diào)函數(shù)接收到.
只要一個await語句后面的Promise變?yōu)?code>reject,那么整個async函數(shù)都會中斷執(zhí)行
有時我們希望即使前一個異步操作失敗,也不要中斷后面的異步操作,有兩種方法:
1.可以將第一個await放在try...catch結(jié)構(gòu)里面
async function f() {
try {
await Promise.reject('出錯了');
} catch(e) {
}
return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// hello world
2.await后面的Promise對象再跟一個catch方法,處理前面可能出現(xiàn)的錯誤
錯誤處理
如果await后面的異步操作出錯,那么等同于async函數(shù)返回的Promise對象被reject
防止出錯的方法,也是將其放在try...catch代碼塊之中
async function f() {
try {
await new Promise(function (resolve, reject) {
throw new Error('出錯了');
});
} catch(e) {
}
return await('hello world');
}
如果有多個await命令,可以統(tǒng)一放在try...catch結(jié)構(gòu)中.
使用注意點
-
await命令后面的Promise對象,運行結(jié)果可能是rejected,所以最好把await命令放在try...catch代碼塊中 - 多個
await命令后面的異步操作,如果不存在繼發(fā)關(guān)系,最好讓它們同時觸發(fā).
// 寫法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 寫法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
-
await命令只能用在async函數(shù)之中
function dbFuc(db) { //這里不需要 async
let docs = [{}, {}, {}];
// 可能得到錯誤結(jié)果
docs.forEach(async function (doc) {
await db.post(doc);
});
}
可能不會正常工作的原因是這時三個db.post操作將是并發(fā)執(zhí)行,而不是繼發(fā)執(zhí)行.正確的寫法是采用for循環(huán)
async function dbFuc(db) {
let docs = [{}, {}, {}];
for (let doc of docs) {
await db.post(doc);
}
}
async函數(shù)的實現(xiàn)原理
實現(xiàn)原理就是將Generator函數(shù)和自動執(zhí)行器,包裝在一個函數(shù)里
async function fn(args) {
// ...
}
// 等同于
function fn(args) {
//spawn函數(shù)就是自動執(zhí)行器
return spawn(function* () {
// ...
});
}
spawn函數(shù)的實現(xiàn)
function spawn(genF) {
return new Promise(function(resolve, reject) {
const gen = genF();
function step(nextF) {
let next;
try {
next = nextF();
} catch(e) {
return reject(e);
}
if(next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(function(v) {
step(function() { return gen.next(v); });
}, function(e) {
step(function() { return gen.throw(e); });
});
}
step(function() { return gen.next(undefined); });
});
}
與其他異步處理方法的比較
async函數(shù)實現(xiàn)最簡潔,最符合語義,幾乎沒有語義不相關(guān)的代碼.它將Generator寫法中的自動執(zhí)行器,改在語言層面提供,不暴露給用戶.如果使用Generator函數(shù),自動自行器需要用戶自己提供.
實例:按順序完成異步操作
async function logInOrder(urls) {
// 并發(fā)讀取遠程URL
const textPromises = urls.map(async url => {
const response = await fetch(url);
return response.text();
});
// 按次序輸出
for (const textPromise of textPromises) {
console.log(await textPromise);
}
}
上面代碼中,雖然map方法的參數(shù)是async函數(shù),但它是并發(fā)執(zhí)行的,因為只有async函數(shù)內(nèi)部是繼發(fā)執(zhí)行,外包不收影響.后面的for...of循環(huán)內(nèi)部使用了await,因此實現(xiàn)了按順序輸出.
異步遍歷器
主要調(diào)用遍歷器對象的next方法,就會得到一個對象.這里隱含著一個規(guī)定,next方法必須是同步的.如果遍歷器對象正好指向同步操作就沒有問題,但對于異步操作來說就不合適了.只要調(diào)用就必須立刻返回值.目前的解決辦法是,Generator函數(shù)里面的異步操作,返回一個Thunk函數(shù)或者Promise對象.
ES2018引入了"異步遍歷器",為異步操作提供原生的遍歷器接口,即value和done這兩個屬性都是異步產(chǎn)生.
異步遍歷的接口
異步遍歷器的最大的語法特點,就是調(diào)用遍歷器的next方法,返回的是一個Promise對象
asyncIterator
.next()
.then(
({ value, done }) => /* ... */
);
對象的異步遍歷器接口,部署在Symbol.asyncIterator屬性上.不管是什么樣的對象,只要它的Symbol.asyncIterator屬性有值,就表示應(yīng)該對它進行異步遍歷.
const asyncIterable = createAsyncIterable(['a', 'b']);
const asyncIterator = asyncIterable[Symbol.asyncIterator]();
asyncIterator
.next()
.then(iterResult1 => {
console.log(iterResult1); // { value: 'a', done: false }
return asyncIterator.next();
})
.then(iterResult2 => {
console.log(iterResult2); // { value: 'b', done: false }
return asyncIterator.next();
})
.then(iterResult3 => {
console.log(iterResult3); // { value: undefined, done: true }
});
由于異步遍歷器的next方法,返回的是一個Promise對象,因此可以把它放在await命令后面.
async function f() {
const asyncIterable = createAsyncIterable(['a', 'b']);
const asyncIterator = asyncIterable[Symbol.asyncIterator]();
console.log(await asyncIterator.next());
// { value: 'a', done: false }
console.log(await asyncIterator.next());
// { value: 'b', done: false }
console.log(await asyncIterator.next());
// { value: undefined, done: true }
}
注意,異步遍歷器的next方法是可以連續(xù)調(diào)用的,不必等到上一步產(chǎn)生的Promise對象resolve以后在調(diào)用.這種情況下,next方法會累計起來,自動按照每一步的順序運行下去.
1.可以把所有的next方法放在Promise.all方法里面:
const asyncGenObj = createAsyncIterable(['a', 'b']);
const [{value: v1}, {value: v2}] = await Promise.all([
asyncGenObj.next(), asyncGenObj.next()
]);
console.log(v1, v2); // a b
2.一次性調(diào)用所有的next方法,然后await最后一步操作
async function runner() {
const writer = openFile('someFile.txt');
writer.next('hello');
writer.next('world');
await writer.return();
}
runner();
for await...of
新引入的for await...of用來循環(huán)異步的Iterator接口
async function f() {
for await (const x of createAsyncIterable(['a', 'b'])) {
console.log(x);
}
}
// a
// b
createAsyncIterable()返回一個擁有異步遍歷器接口的對象,for...of循環(huán)自動調(diào)用這個對象的異步遍歷器的next方法,會得到一個Promise對象.await用來處理這個Promise對象,一旦resolve,就把得到的值傳入for...of的循環(huán)體.
for await...of循環(huán)的一個用途,是部署了asnycIterable操作的異步接口,可以直接放入這個循環(huán).
如果next方法返回的Promsie對象被reject,for await...of就會報錯,要用try...catch捕捉.
注意:for await...of也可以用于同步遍歷器.
異步Generator函數(shù)
類似于Generator函數(shù)返回一個同步遍歷器對象一樣,異步Generator函數(shù)的作用,是返回一個異步遍歷器對象
語法上,異步Generator函數(shù)就是async函數(shù)與Generator函數(shù)的結(jié)合
async function* gen() {
yield 'hello';
}
const genObj = gen();
genObj.next().then(x => console.log(x));
// { value: 'hello', done: false }
異步遍歷器的設(shè)計目的之一,就是Generator函數(shù)處理同步操作和異步操作時,能夠使用同一套接口
// 同步 Generator 函數(shù)
function* map(iterable, func) {
const iter = iterable[Symbol.iterator]();
while (true) {
const {value, done} = iter.next();
if (done) break;
yield func(value);
}
}
// 異步 Generator 函數(shù)
async function* map(iterable, func) {
const iter = iterable[Symbol.asyncIterator]();
while (true) {
const {value, done} = await iter.next();
if (done) break;
yield func(value);
}
}
異步操作前面使用await關(guān)鍵字標(biāo)明,應(yīng)該返回Promise對象.凡是使用yeild關(guān)鍵字的地方,就是next方法停下來的地方,他后面的表達式的值,會作為next()返回對象的value屬性,這一點是與同步Generator函數(shù)一直的.
異步Generator函數(shù)內(nèi)部,能夠同時使用await和yield命令.await命令用于將外部操作產(chǎn)生的值輸入函數(shù)內(nèi)部,yield命令用于將函數(shù)內(nèi)部的值輸出.
注意:普通asnyc函數(shù)返回的是一個Promise對象,而異步Generator函數(shù)返回的是一個異步Iterator對象.區(qū)別在于,前者自帶執(zhí)行器,后者通過for await...of執(zhí)行,或者自己編寫執(zhí)行器.
異步Generator函數(shù)的執(zhí)行器:
async function takeAsync(asyncIterable, count = Infinity) {
const result = [];
const iterator = asyncIterable[Symbol.asyncIterator]();
while (result.length < count) {
const {value, done} = await iterator.next();
if (done) break;
result.push(value);
}
return result;
}
異步Generator函數(shù)出現(xiàn)以后,JavaScript就有了四種函數(shù)形式:普通函數(shù),async函數(shù),Generator函數(shù)和異步Generator函數(shù).基本上,如果是一系列按照順序執(zhí)行的異步操作(比如讀取文件,然后寫入新內(nèi)容,再存入硬盤),可以使用async函數(shù);如果是一系列產(chǎn)生相同數(shù)據(jù)結(jié)構(gòu)的異步操作(比如一行一行讀取啥文件),可以使用異步Generator函數(shù).
異步Generator函數(shù)也可以通過next方法的參數(shù),接收外部傳入的數(shù)據(jù):
const writer = openFile('someFile.txt');
writer.next('hello'); // 立即執(zhí)行
writer.next('world'); // 立即執(zhí)行
await writer.return(); // 等待寫入結(jié)束
每次next方法都是同步執(zhí)行的,最后的await命令用于等待整個寫入操作結(jié)束.
同步的數(shù)據(jù)結(jié)構(gòu),也可以使用異步Generator函數(shù).
yield*語句
yield*語句也可以跟一個異步遍歷器.
async function* gen1() {
yield 'a';
yield 'b';
return 2;
}
async function* gen2() {
// result 最終會等于 2
const result = yield* gen1();
}
與同步的Generator函數(shù)一樣,for await...of循環(huán)會展開yield*.
