js異步編程發展

在最開始的時候，js異步編程是一件很痛苦的事，不過隨着技術發展，如今寫異步已經能夠像寫同步同樣舒服了。

主要的變化過程：

回調函數 ===>>> promise ===>>> generater ===>>> async/await

回調函數時代

dosomething(sucessCallback, errCallback)
複製代碼

這種寫法在多重異步處理的時候很容易出現回調地獄

promise寫法

promise最大的好處就是實現了鏈式調用的寫法,並且能夠用catch來捕獲異常。
不過Promise 對象的錯誤具備「冒泡」性質，會一直向後傳遞，直到被捕獲爲止；並且promise會吞掉錯誤，不向外部拋出

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}).catch(err => console.log(err));
複製代碼

generator寫法

Generator 函數是協程在 ES6 的實現，最大特色就是能夠交出函數的執行權，注意它不是語法糖。

• 第一步，協程A開始執行。
• 第二步，協程A執行到一半，進入暫停，執行權轉移到協程B。
• 第三步，（一段時間後）協程B交還執行權。
• 第四步，協程A恢復執行。

function* gen(x) {
  var y = yield x + 2;
  return y;
}
var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }
g.throw('出錯了');
複製代碼

yield以後的跟隨的對象或基本類型的值會被自動轉化爲promise。
generator最麻煩的就是須要本身運行next去執行下一步

async/await 寫法

這是generator+co庫的一個es7語法糖，最接近同步的語法。
因爲generator須要不斷地執行，因而有人寫了一個叫co的自執行函數庫。

var co = require('co');
co(gen);
複製代碼

這樣generator就能夠自動地執行了。因而就出現了async/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對象，能夠用.then的語法。

try {
    getStockPriceByName()
} catch(err) {
    console.log(error)
} finally {
    dosomething()
}
複製代碼

錯誤處理方面也更加接近同步的語法。

總結

只要可以寫es6語法，咱們就能夠用上async/await的語法來解決異步編程的須要了，這是將會是至關方便的一個體驗，也會給後續的人一個更清晰的代碼邏輯。