ES6的新特性（18）——async 函數

阿新 • • 發佈：2019-02-21

參數 inorder 取數據 inputfile 頁面 avatar struct on() 數組

async 函數

含義

ES2017 標準引入了 async 函數，使得異步操作變得更加方便。

async 函數是什麽？一句話，它就是 Generator 函數的語法糖。

前文有一個 Generator 函數，依次讀取兩個文件。

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());
};

寫成async函數，就是下面這樣。

const asyncReadFile = async function () {
  const f1  
= await readFile(‘/etc/fstab‘);
  const f2 = await readFile(‘/etc/shells‘);
  console.log(f1.toString());
  console.log(f2.toString());
};

一比較就會發現，async函數就是將 Generator 函數的星號（*）替換成async，將yield替換成await，僅此而已。

async函數對 Generator 函數的改進，體現在以下四點。

（1）內置執行器。

Generator 函數的執行必須靠執行器，所以才有了co模塊，而async函數自帶執行器。也就是說，async

函數的執行，與普通函數一模一樣，只要一行。

asyncReadFile();

上面的代碼調用了asyncReadFile函數，然後它就會自動執行，輸出最後結果。這完全不像 Generator 函數，需要調用next方法，或者用co模塊，才能真正執行，得到最後結果。

（2）更好的語義。

async和await，比起星號和yield，語義更清楚了。async表示函數裏有異步操作，await表示緊跟在後面的表達式需要等待結果。

（3）更廣的適用性。

co模塊約定，yield命令後面只能是 Thunk 函數或 Promise 對象，而async函數的await命令後面，可以是 Promise 對象和原始類型的值（數值、字符串和布爾值，但這時等同於同步操作）。

（4）返回值是 Promise。

async函數的返回值是 Promise 對象，這比 Generator 函數的返回值是 Iterator 對象方便多了。你可以用then方法指定下一步的操作。

進一步說，async函數完全可以看作多個異步操作，包裝成的一個 Promise 對象，而await命令就是內部then命令的語法糖。

基本用法

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 () => {};

語法

async函數的語法規則總體上比較簡單，難點是錯誤處理機制。

返回 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(v),
  e => console.log(e)
)
// Error: 出錯了

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。

await 命令

正常情況下，await命令後面是一個 Promise 對象。如果不是，會被轉成一個立即resolve的 Promise 對象。

async function f() {
  return await 123;
}

f().then(v => console.log(v))
// 123

上面代碼中，await命令的參數是數值123，它被轉成 Promise 對象，並立即resolve。

await命令後面的 Promise 對象如果變為reject狀態，則reject的參數會被catch方法的回調函數接收到。

async function f() {
  await Promise.reject(‘出錯了‘);
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出錯了

註意，上面代碼中，await語句前面沒有return，但是reject方法的參數依然傳入了catch方法的回調函數。這裏如果在await前面加上return，效果是一樣的。

只要一個await語句後面的 Promise 變為reject，那麽整個async函數都會中斷執行。

async function f() {
  await Promise.reject(‘出錯了‘);
  await Promise.resolve(‘hello world‘); // 不會執行
}

上面代碼中，第二個await語句是不會執行的，因為第一個await語句狀態變成了reject。

有時，我們希望即使前一個異步操作失敗，也不要中斷後面的異步操作。這時可以將第一個await放在try...catch結構裏面，這樣不管這個異步操作是否成功，第二個await都會執行。

async function f() {
  try {
    await Promise.reject(‘出錯了‘);
  } catch(e) {
  }
  return await Promise.resolve(‘hello world‘);
}

f()
.then(v => console.log(v))
// hello world

另一種方法是await後面的 Promise 對象再跟一個catch方法，處理前面可能出現的錯誤。

async function f() {
  await Promise.reject(‘出錯了‘)
    .catch(e => console.log(e));
  return await Promise.resolve(‘hello world‘);
}

f()
.then(v => console.log(v))
// 出錯了
// hello world

錯誤處理

如果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語句捕捉，然後進入下一輪循環。

使用註意點

第一點，前面已經說過，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);
  }
}

如果確實希望多個請求並發執行，可以使用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);
}

目前，esm模塊加載器支持頂層await，即await命令可以不放在 async 函數裏面，直接使用。

// async 函數的寫法
const start = async () => {
  const res = await fetch(‘google.com‘);
  return res.text();
};

start().then(console.log);

// 頂層 await 的寫法
const res = await fetch(‘google.com‘);
console.log(await res.text());

上面代碼中，第二種寫法的腳本必須使用esm加載器，才會生效。

async 函數的實現原理

async 函數的實現原理，就是將 Generator 函數和自動執行器，包裝在一個函數裏。

async function fn(args) {
  // ...
}

// 等同於

function fn(args) {
  return spawn(function* () {
    // ...
  });
}

所有的async函數都可以寫成上面的第二種形式，其中的spawn函數就是自動執行器。

下面給出spawn函數的實現，基本就是前文自動執行器的翻版。

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 函數與 Promise、Generator 函數的比較。

假定某個 DOM 元素上面，部署了一系列的動畫，前一個動畫結束，才能開始後一個。如果當中有一個動畫出錯，就不再往下執行，返回上一個成功執行的動畫的返回值。

首先是 Promise 的寫法。

function chainAnimationsPromise(elem, animations) {

  // 變量ret用來保存上一個動畫的返回值
  let ret = null;

  // 新建一個空的Promise
  let p = Promise.resolve();

  // 使用then方法，添加所有動畫
  for(let anim of animations) {
    p = p.then(function(val) {
      ret = val;
      return anim(elem);
    });
  }

  // 返回一個部署了錯誤捕捉機制的Promise
  return p.catch(function(e) {
    /* 忽略錯誤，繼續執行 */
  }).then(function() {
    return ret;
  });

}

雖然 Promise 的寫法比回調函數的寫法大大改進，但是一眼看上去，代碼完全都是 Promise 的 API（then、catch等等），操作本身的語義反而不容易看出來。

接著是 Generator 函數的寫法。

function chainAnimationsGenerator(elem, animations) {

  return spawn(function*() {
    let ret = null;
    try {
      for(let anim of animations) {
        ret = yield anim(elem);
      }
    } catch(e) {
      /* 忽略錯誤，繼續執行 */
    }
    return ret;
  });

}

上面代碼使用 Generator 函數遍歷了每個動畫，語義比 Promise 寫法更清晰，用戶定義的操作全部都出現在spawn函數的內部。這個寫法的問題在於，必須有一個任務運行器，自動執行 Generator 函數，上面代碼的spawn函數就是自動執行器，它返回一個 Promise 對象，而且必須保證yield語句後面的表達式，必須返回一個 Promise。

最後是 async 函數的寫法。

async function chainAnimationsAsync(elem, animations) {
  let ret = null;
  try {
    for(let anim of animations) {
      ret = await anim(elem);
    }
  } catch(e) {
    /* 忽略錯誤，繼續執行 */
  }
  return ret;
}

可以看到 Async 函數的實現最簡潔，最符合語義，幾乎沒有語義不相關的代碼。它將 Generator 寫法中的自動執行器，改在語言層面提供，不暴露給用戶，因此代碼量最少。如果使用 Generator 寫法，自動執行器需要用戶自己提供。

實例：按順序完成異步操作

實際開發中，經常遇到一組異步操作，需要按照順序完成。比如，依次遠程讀取一組 URL，然後按照讀取的順序輸出結果。

Promise 的寫法如下。

function logInOrder(urls) {
  // 遠程讀取所有URL
  const textPromises = urls.map(url => {
    return fetch(url).then(response => response.text());
  });

  // 按次序輸出
  textPromises.reduce((chain, textPromise) => {
    return chain.then(() => textPromise)
      .then(text => console.log(text));
  }, Promise.resolve());
}

上面代碼使用fetch方法，同時遠程讀取一組 URL。每個fetch操作都返回一個 Promise 對象，放入textPromises數組。然後，reduce方法依次處理每個 Promise 對象，然後使用then，將所有 Promise 對象連起來，因此就可以依次輸出結果。

這種寫法不太直觀，可讀性比較差。下面是 async 函數實現。

async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}

上面代碼確實大大簡化，問題是所有遠程操作都是繼發。只有前一個 URL 返回結果，才會去讀取下一個 URL，這樣做效率很差，非常浪費時間。我們需要的是並發發出遠程請求。

async function logInOrder(urls) {
  // 並發讀取遠程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方法的參數是async函數，但它是並發執行的，因為只有async函數內部是繼發執行，外部不受影響。後面的for..of循環內部使用了await，因此實現了按順序輸出。

異步遍歷器

《遍歷器》一章說過，Iterator 接口是一種數據遍歷的協議，只要調用遍歷器對象的next方法，就會得到一個對象，表示當前遍歷指針所在的那個位置的信息。next方法返回的對象的結構是{value, done}，其中value表示當前的數據的值，done是一個布爾值，表示遍歷是否結束。

這裏隱含著一個規定，next方法必須是同步的，只要調用就必須立刻返回值。也就是說，一旦執行next方法，就必須同步地得到value和done這兩個屬性。如果遍歷指針正好指向同步操作，當然沒有問題，但對於異步操作，就不太合適了。目前的解決方法是，Generator 函數裏面的異步操作，返回一個 Thunk 函數或者 Promise 對象，即value屬性是一個 Thunk 函數或者 Promise 對象，等待以後返回真正的值，而done屬性則還是同步產生的。

ES2018 引入了”異步遍歷器“（Async Iterator），為異步操作提供原生的遍歷器接口，即value和done這兩個屬性都是異步產生。

異步遍歷的接口

異步遍歷器的最大的語法特點，就是調用遍歷器的next方法，返回的是一個 Promise 對象。

asyncIterator
  .next()
  .then(
    ({ value, done }) => /* ... */
  );

上面代碼中，asyncIterator是一個異步遍歷器，調用next方法以後，返回一個 Promise 對象。因此，可以使用then方法指定，這個 Promise 對象的狀態變為resolve以後的回調函數。回調函數的參數，則是一個具有value和done兩個屬性的對象，這個跟同步遍歷器是一樣的。

我們知道，一個對象的同步遍歷器的接口，部署在Symbol.iterator屬性上面。同樣地，對象的異步遍歷器接口，部署在Symbol.asyncIterator屬性上面。不管是什麽樣的對象，只要它的Symbol.asyncIterator屬性有值，就表示應該對它進行異步遍歷。

下面是一個異步遍歷器的例子。

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 }
});

上面代碼中，異步遍歷器其實返回了兩次值。第一次調用的時候，返回一個 Promise 對象；等到 Promise 對象resolve了，再返回一個表示當前數據成員信息的對象。這就是說，異步遍歷器與同步遍歷器最終行為是一致的，只是會先返回 Promise 對象，作為中介。

由於異步遍歷器的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方法用await處理以後，就不必使用then方法了。整個流程已經很接近同步處理了。

註意，異步遍歷器的next方法是可以連續調用的，不必等到上一步產生的 Promise 對象resolve以後再調用。這種情況下，next方法會累積起來，自動按照每一步的順序運行下去。下面是一個例子，把所有的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

另一種用法是一次性調用所有的next方法，然後await最後一步操作。

async function runner() {
  const writer = openFile(‘someFile.txt‘);
  writer.next(‘hello‘);
  writer.next(‘world‘);
  await writer.return();
}

runner();

for await...of

前面介紹過，for...of循環用於遍歷同步的 Iterator 接口。新引入的for await...of循環，則是用於遍歷異步的 Iterator 接口。

async function f() {
  for await (const x of createAsyncIterable([‘a‘, ‘b‘])) {
    console.log(x);
  }
}
// a
// b

上面代碼中，createAsyncIterable()返回一個擁有異步遍歷器接口的對象，for...of循環自動調用這個對象的異步遍歷器的next方法，會得到一個 Promise 對象。await用來處理這個 Promise 對象，一旦resolve，就把得到的值（x）傳入for...of的循環體。

for await...of循環的一個用途，是部署了 asyncIterable 操作的異步接口，可以直接放入這個循環。

let body = ‘‘;

async function f() {
  for await(const data of req) body += data;
  const parsed = JSON.parse(body);
  console.log(‘got‘, parsed);
}

上面代碼中，req是一個 asyncIterable 對象，用來異步讀取數據。可以看到，使用for await...of循環以後，代碼會非常簡潔。

如果next方法返回的 Promise 對象被reject，for await...of就會報錯，要用try...catch捕捉。

async function () {
  try {
    for await (const x of createRejectingIterable()) {
      console.log(x);
    }
  } catch (e) {
    console.error(e);
  }
}

註意，for await...of循環也可以用於同步遍歷器。

(async function () {
  for await (const x of [‘a‘, ‘b‘]) {
    console.log(x);
  }
})();
// a
// b

Node v10 支持異步遍歷器，Stream 就部署了這個接口。下面是讀取文件的傳統寫法與異步遍歷器寫法的差異。

// 傳統寫法
function main(inputFilePath) {
  const readStream = fs.createReadStream(
    inputFilePath,
    { encoding: ‘utf8‘, highWaterMark: 1024 }
  );
  readStream.on(‘data‘, (chunk) => {
    console.log(‘>>> ‘+chunk);
  });
  readStream.on(‘end‘, () => {
    console.log(‘### DONE ###‘);
  });
}

// 異步遍歷器寫法
async function main(inputFilePath) {
  const readStream = fs.createReadStream(
    inputFilePath,
    { encoding: ‘utf8‘, highWaterMark: 1024 }
  );

  for await (const chunk of readStream) {
    console.log(‘>>> ‘+chunk);
  }
  console.log(‘### DONE ###‘);
}

異步 Generator 函數

就像 Generator 函數返回一個同步遍歷器對象一樣，異步 Generator 函數的作用，是返回一個異步遍歷器對象。

在語法上，異步 Generator 函數就是async函數與 Generator 函數的結合。

async function* gen() {
  yield ‘hello‘;
}
const genObj = gen();
genObj.next().then(x => console.log(x));
// { value: ‘hello‘, done: false }

上面代碼中，gen是一個異步 Generator 函數，執行後返回一個異步 Iterator 對象。對該對象調用next方法，返回一個 Promise 對象。

異步遍歷器的設計目的之一，就是 Generator 函數處理同步操作和異步操作時，能夠使用同一套接口。

// 同步 Generator 函數
function* map(iterable, func) {
  const iter = iterable[Symbol.iterator]();
  while (true) {
    const {value, done} = iter.next();
    if (done) break;
    yield func(value);
  }
}

// 異步 Generator 函數
async function* map(iterable, func) {
  const iter = iterable[Symbol.asyncIterator]();
  while (true) {
    const {value, done} = await iter.next();
    if (done) break;
    yield func(value);
  }
}

上面代碼中，map是一個 Generator 函數，第一個參數是可遍歷對象iterable，第二個參數是一個回調函數func。map的作用是將iterable每一步返回的值，使用func進行處理。上面有兩個版本的map，前一個處理同步遍歷器，後一個處理異步遍歷器，可以看到兩個版本的寫法基本上是一致的。

下面是另一個異步 Generator 函數的例子。

async function* readLines(path) {
  let file = await fileOpen(path);

  try {
    while (!file.EOF) {
      yield await file.readLine();
    }
  } finally {
    await file.close();
  }
}

上面代碼中，異步操作前面使用await關鍵字標明，即await後面的操作，應該返回 Promise 對象。凡是使用yield關鍵字的地方，就是next方法停下來的地方，它後面的表達式的值（即await file.readLine()的值），會作為next()返回對象的value屬性，這一點是與同步 Generator 函數一致的。

異步 Generator 函數內部，能夠同時使用await和yield命令。可以這樣理解，await命令用於將外部操作產生的值輸入函數內部，yield命令用於將函數內部的值輸出。

上面代碼定義的異步 Generator 函數的用法如下。

(async function () {
  for await (const line of readLines(filePath)) {
    console.log(line);
  }
})()

異步 Generator 函數可以與for await...of循環結合起來使用。

async function* prefixLines(asyncIterable) {
  for await (const line of asyncIterable) {
    yield ‘> ‘ + line;
  }
}

異步 Generator 函數的返回值是一個異步 Iterator，即每次調用它的next方法，會返回一個 Promise 對象，也就是說，跟在yield命令後面的，應該是一個 Promise 對象。如果像上面那個例子那樣，yield命令後面是一個字符串，會被自動包裝成一個 Promise 對象。

function fetchRandom() {
  const url = ‘https://www.random.org/decimal-fractions/‘
    + ‘?num=1&dec=10&col=1&format=plain&rnd=new‘;
  return fetch(url);
}

async function* asyncGenerator() {
  console.log(‘Start‘);
  const result = await fetchRandom(); // (A)
  yield ‘Result: ‘ + await result.text(); // (B)
  console.log(‘Done‘);
}

const ag = asyncGenerator();
ag.next().then(({value, done}) => {
  console.log(value);
})

上面代碼中，ag是asyncGenerator函數返回的異步遍歷器對象。調用ag.next()以後，上面代碼的執行順序如下。

ag.next()立刻返回一個 Promise 對象。
asyncGenerator函數開始執行，打印出Start。
await命令返回一個 Promise 對象，asyncGenerator函數停在這裏。
A 處變成 fulfilled 狀態，產生的值放入result變量，asyncGenerator函數繼續往下執行。
函數在 B 處的yield暫停執行，一旦yield命令取到值，ag.next()返回的那個 Promise 對象變成 fulfilled 狀態。
ag.next()後面的then方法指定的回調函數開始執行。該回調函數的參數是一個對象{value, done}，其中value的值是yield命令後面的那個表達式的值，done的值是false。

A 和 B 兩行的作用類似於下面的代碼。

return new Promise((resolve, reject) => {
  fetchRandom()
  .then(result => result.text())
  .then(result => {
     resolve({
       value: ‘Result: ‘ + result,
       done: false,
     });
  });
});

如果異步 Generator 函數拋出錯誤，會導致 Promise 對象的狀態變為reject，然後拋出的錯誤被catch方法捕獲。

async function* asyncGenerator() {
  throw new Error(‘Problem!‘);
}

asyncGenerator()
.next()
.catch(err => console.log(err)); // Error: Problem!

註意，普通的 async 函數返回的是一個 Promise 對象，而異步 Generator 函數返回的是一個異步 Iterator 對象。可以這樣理解，async 函數和異步 Generator 函數，是封裝異步操作的兩種方法，都用來達到同一種目的。區別在於，前者自帶執行器，後者通過for await...of執行，或者自己編寫執行器。下面就是一個異步 Generator 函數的執行器。

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 函數產生的異步遍歷器，會通過while循環自動執行，每當await iterator.next()完成，就會進入下一輪循環。一旦done屬性變為true，就會跳出循環，異步遍歷器執行結束。

下面是這個自動執行器的一個使用實例。

async function f() {
  async function* gen() {
    yield ‘a‘;
    yield ‘b‘;
    yield ‘c‘;
  }

  return await takeAsync(gen());
}

f().then(function (result) {
  console.log(result); // [‘a‘, ‘b‘, ‘c‘]
})

異步 Generator 函數出現以後，JavaScript 就有了四種函數形式：普通函數、async 函數、Generator 函數和異步 Generator 函數。請註意區分每種函數的不同之處。基本上，如果是一系列按照順序執行的異步操作（比如讀取文件，然後寫入新內容，再存入硬盤），可以使用 async 函數；如果是一系列產生相同數據結構的異步操作（比如一行一行讀取文件），可以使用異步 Generator 函數。

異步 Generator 函數也可以通過next方法的參數，接收外部傳入的數據。

const writer = openFile(‘someFile.txt‘);
writer.next(‘hello‘); // 立即執行
writer.next(‘world‘); // 立即執行
await writer.return(); // 等待寫入結束

上面代碼中，openFile是一個異步 Generator 函數。next方法的參數，向該函數內部的操作傳入數據。每次next方法都是同步執行的，最後的await命令用於等待整個寫入操作結束。

最後，同步的數據結構，也可以使用異步 Generator 函數。

async function* createAsyncIterable(syncIterable) {
  for (const elem of syncIterable) {
    yield elem;
  }
}

上面代碼中，由於沒有異步操作，所以也就沒有使用await關鍵字。

yield* 語句

yield*語句也可以跟一個異步遍歷器。

async function* gen1() {
  yield ‘a‘;
  yield ‘b‘;
  return 2;
}

async function* gen2() {
  // result 最終會等於 2
  const result = yield* gen1();
}

上面代碼中，gen2函數裏面的result變量，最後的值是2。

與同步 Generator 函數一樣，for await...of循環會展開yield*。

(async function () {
  for await (const x of gen2()) {
    console.log(x);
  }
})();
// a
// b

ES6的新特性（18）——async 函數

參數 inorder 取數據 inputfile 頁面 avatar struct on() 數組 async 函數含義 ES2017 標準引入了 async 函數，使得異步操作變得更加方便。 async 函數是什麽？一句話，它就是 Generator 函數的語法糖。前

ES6的新特性（18）——async 函數

async 函數

含義

基本用法

語法

返回 Promise 對象

Promise 對象的狀態變化

await 命令

錯誤處理

使用註意點

async 函數的實現原理

與其他異步處理方法的比較

實例：按順序完成異步操作

異步遍歷器

異步遍歷的接口

for await...of

異步 Generator 函數

yield* 語句

ES6的新特性（18）——async 函數

ES6學習筆記（四）—— async 函數

C++11 帶來的新特性（4）—— 匿名函數（Lambdas）

ES6必知必會（八）—— async 函數

ES6知識整理（6）--Symbol函數

ES6的新特性（3）——變量的解構賦值

ES6的新特性（15）——Promise 對象

ES6語法：函式新特性（一）

MySQL 8.0.2復制新特性（翻譯）

Java 接口新特性（Java8）

ES6必知必會（七）—— Generator 函數

Java8新特性（一）---Lambda表示式

php7新特性（二）：面向物件部分

新特性（2）---一致性初始化，使用者自定義初值列

新特性（4）---Foreach，String Literal

新特性（3）---move語義

Java8的新特性（四）

Java8的新特性（三）

Java8的新特性（二）

C++11 帶來的新特性（2）—— 統一初始化（Uniform Initialization）

ES6的新特性（18）——async 函數

async 函數

含義

基本用法

語法

返回 Promise 對象

Promise 對象的狀態變化

await 命令

錯誤處理

使用註意點

async 函數的實現原理

與其他異步處理方法的比較

實例：按順序完成異步操作

異步遍歷器

異步遍歷的接口

for await...of

異步 Generator 函數

yield* 語句

相關推薦