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對象，返回改對象的結果。