非同步程式設計的前世今生(非同步流程歷史)

JOKER_發表於2018-01-22
原文網址 : https://juejin.im/post/5a62d002f265da3e355b270b
非同步程式設計

眾所周知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

相關文章