js中的異步Promise、Generator、async

Promise

Promise是js異步編程的解決方案，Promise是一個對象，內部會存在一個異步操作，Promise對象提供統一的api來獲取異步操作的結果。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

Promise構造函數接收一個函數作為參數，函數的兩個參數非別是resolve和reject，resolve將Promise對象的狀態從“未完成”變為“成功”，reject將狀態從“未完成”變為“失敗”，並且兩個方法會將異步操作的結果通過參數傳遞出去。

Promise的then方法可以指定成功和失敗的回調函數，並且將結果作為回調函數的參數。並且then方法返回一個新的Promise對象，所以可以鏈式調用。

catch方法是then(null, rejection)的別名，用於指定在發生錯誤時的回調函數。如果采用鏈式寫法，將catch放在最后，catch會捕捉到前面所有promise對象中的錯誤。

finally方法不論Promise對象最后是什么狀態都會執行。

Promise.resolve()方法返回一個Promise對象，如果傳入一個Promise對象會原封不動的返回此Promise對象，如果參數是一個原始值，會返回一個resolved狀態的Promise對象，回調函數會立即執行。

 

Generator函數

Generator是ES6提供的一種異步編程解決方案，調用Generator返回一個遍歷器對象，調用遍歷器對象的next()方法會返回一個對象，對象的done屬性指示是否遍歷完，value屬性指示狀態值（yield 后面表達式的值）。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

 next()方法還接收一個參數，可以向Generator函數體內輸入數據。下面第二個next的參數2傳遞給了上一個異步階段返回的結果變量y。

function* gen(x){
  var y = yield x + 2;
  return y;
}

var g = gen(1);
g.next() // { value: 3, done: false }
g.next(2) // { value: 2, done: true }

 

async

ES2017引入了async函數，async僅僅是Generator函數的語法糖，不同的是Generator函數需要調用next()方法一步步執行，async會自動執行。await命令后面可以是Promise對象，也可以是原始類型的值（會轉變為resolved狀態的Promise對象）。async函數返回一個Promise對象，return后的值會作為Promise對象then方法中成功回調函數中的參數。

async function getStockPriceByName(name) {
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName('goog').then(function (result) {
  console.log(result);
});

await命令后面是一個Promise對象，返回改對象的結果。