異步編程的前世此生(異步流程歷史)

衆所周知javascript是單線程的，它的設計之初是爲瀏覽器設計的GUI編程語言，GUI編程的特性之一是保證UI線程必定不能阻塞，不然體驗不佳，甚至界面卡死。

所謂"單線程"，就是指一次只能完成一件任務。若是有多個任務，就必須排隊，前面一個任務完成，再執行後面一個任務，以此類推。

什麼叫異步？

• 所謂異步簡單說就是一個任務分紅兩段，先執行一段，轉而執行其餘任務，等作好了準備轉而執行第二段。

如下是當有ABC三個任務，同步或異步執行的流程圖：

同步

> thread ->|----A-----||-----B-----------||-------C------|
複製代碼

異步

A-Start ---------------------------------------- A-End   
           | B-Start ----------------------------------------|--- B-End   
           |   |     C-Start -------------------- C-End      |     |   
           V   V       V                           V         V     V      
  thread-> |-A-|---B---|-C-|-A-|-C-|--A--|-B-|--C--|---A-----|--B--|
複製代碼

異步編程時就須要指定異步任務完成後須要執行的指令，異步的發展歷程以下：

1. 回調函數
2. Promise
3. Generator
4. co
5. async,await

下面會一步一步展示各類方式。

回調函數

function f1(callback){

setTimeout(function () {

// f1的任務代碼
    callback();

}, 1000);

}
複製代碼

缺點 :

1. 不利於代碼的閱讀和維護，各個部分之間高度耦合，流程會很混亂
2. 每一個任務只能指定一個回調函數。
3. 不能捕獲異常 （try catch 同步執行，回調函數會加入隊列，沒法捕獲錯誤）

Promise

Promise 不只能夠避免回調地獄，還能夠統一捕獲失敗的緣由，目前也應用普遍

let promise = new Promise(function (resolve,reject) {
    resolve('wo')
});
promise.then(function (data) {
    return data +'shuai'
}).then(function (data) {
    console.log(data)
}).catch(function (err) {
    console.log(err)
});// woshuai
複製代碼

Generator(ECMAScript6)

1. 生成器是一個函數，須要加* ，能夠用來生成迭代器
2. 生成器函數和普通函數不同，普通函數是一旦調用必定會執行完，可是生成器函數中間能夠暫停。
3. 生成器和普通函數不同，調用它並不會當即執行
4. 它會返回今生成器的迭代器,迭代器是一個對象，每調用一次next就能夠返回一個值對象

function *go(a){
  console.log(1);
  //此處的b用來供外界輸入進來的
  //這一行實現輸入和輸出，本次的輸出放在yield後面，下次的輸入放在yield前面
  let b =  yield a;
  console.log(2);
  let c = yield b;
  console.log(3);
  return c;
}
let it = go("a值");
//next第一次執行不須要參數，傳參數沒有意義
let r1 = it.next();
//第一次調用next會返回一個對象，此對象有兩個屬性，一個是value就是yield後面那個值，一個是done表示是否迭代完成
console.log(r1);//{ value: 'a', done: false }
let r2 = it.next('B值');
console.log(r2);//{ value: 'B值', done: false }
let r3 = it.next('C值');
console.log(r3);//{ value: 'C值', done: true }
複製代碼

co

隨着前端的迅速發展，大神們以爲要像同步代碼同樣寫異步，co問世了，co是 TJ 大神結合了promise 和 生成器 的一個庫，實際上仍是幫助咱們自動執行迭代器

let fs = require('fs');

function readFile(filename) {
  return new Promise(function (resolve, reject) {
    fs.readFile(filename, 'utf8', function (err, data) {
      err ? reject(err) : resolve(data);
    });
  })
}
function *read() {
  console.log('開始');
  let a = yield readFile('1.txt');
  console.log(a);
  let b = yield readFile('2.txt');
  console.log(b);
  let c = yield readFile('3.txt');
  console.log(c);
  return c;
}
function co(gen) {
  let it = gen();//咱們要讓咱們的生成器持續執行
  return new Promise(function (resolve, reject) {
    !function next(lastVal) {
        let {value,done} = it.next(lastVal);
        if(done){
          resolve(value);
        }else{
          value.then(next,reject);
        }
    }()
  });
}
co(read).then(function (data) {
  console.log(data);
});
複製代碼

async/await

async await是語法糖，內部是generator+promise實現 async函數就是將Generator函數的星號（*）替換成async，將yield替換成await

let Promise = require('bluebird');
let readFile = Promise.promisify(require('fs').readFile);
async function read() {
  //await後面必須跟一個promise,
  let a = await readFile('./1.txt','utf8');
  console.log(a);
  let b = await readFile('./2.txt','utf8');
  console.log(b);
  let c = await readFile('./3.txt','utf8');
  console.log(c);
  return 'ok';
}
複製代碼

setTimeout,process.nextTick,ajax,setImmediate均可以處理異步邏輯，下一篇文章EventLoop會進行詳細的介紹。

下一篇 javascript 運行機制 EventLoop