js-ES6學習筆記-async函數

標籤：gets   const   非同步作業   match   函數   ext   reject   ring   his   

1、async 函數是 Generator 函數的文法糖。前文有一個 Generator 函數，依次讀取兩個檔案。

var fs = require(‘fs‘);var readFile = function (fileName) {  return new Promise(function (resolve, reject) {    fs.readFile(fileName, function(error, data) {      if (error) reject(error);      resolve(data);    });  });};var gen = function* () {  var f1 = yield readFile(‘/etc/fstab‘);  var f2 = yield readFile(‘/etc/shells‘);  console.log(f1.toString());  console.log(f2.toString());};

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

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

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

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

1. 內建執行器。async函數內建執行器。也就是說，async函數的執行，與普通函數一模一樣，只要一行。

   var result = asyncReadFile();

   上面的代碼調用了asyncReadFile函數，然後它就會自動執行，輸出最後結果。這完全不像 Generator 函數，需要調用next方法

2. 更好的語義。async和await，比起星號和yield，語義更清楚了。async表示函數裡有非同步作業，await表示緊跟在後面的運算式需要等待結果。
3. 更廣的適用性。yield命令後面只能是 Thunk 函數或 Promise 對象，而async函數的await命令後面，可以是Promise 對象和原始類型的值（數值、字串和布爾值，但這時等同於同步操作）。
4. 傳回值是 Promise。async函數的傳回值是 Promise 對象，這比 Generator 函數的傳回值是 Iterator 對象方便多了。你可以用then方法指定下一步的操作。

進一步說，async函數完全可以看作多個非同步作業，封裝成的一個 Promise 對象，而await命令就是內部then命令的文法糖。

3、async函數返回一個 Promise 對象，可以使用then方法添加回呼函數。當函數執行的時候，一旦遇到await就會先返回，等到非同步作業完成，再接著執行函數體內後面的語句。

async function getStockPriceByName(name) {  var symbol = await getStockSymbol(name);  var stockPrice = await getStockPrice(symbol);  return stockPrice;}getStockPriceByName(‘goog‘).then(function (result) {  console.log(result);});

函數前面的async關鍵字，表明該函數內部有非同步作業。調用該函數時，會立即返回一個Promise對象。

4、另一個例子，指定多少毫秒後輸出一個值。

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

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

 

js-ES6學習筆記-async函數