眾所周知javascript是單線程的，它的設(shè)計之初是為瀏覽器設(shè)計的GUI編程語言，GUI編程的特性之一是保證UI線程一定不能阻塞，否則體驗(yàn)不佳，甚至界面卡死。

所謂"單線程"，就是指一次只能完成一件任務(wù)。如果有多個任務(wù)，就必須排隊，前面一個任務(wù)完成，再執(zhí)行后面一個任務(wù)，以此類推。

什么叫異步？

• 所謂異步簡單說就是一個任務(wù)分成兩段，先執(zhí)行一段，轉(zhuǎn)而執(zhí)行其他任務(wù)，等做好了準(zhǔn)備轉(zhuǎn)而執(zhí)行第二段。

以下是當(dāng)有ABC三個任務(wù)，同步或異步執(zhí)行的流程圖：

同步

> 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--|

異步編程時就需要指定異步任務(wù)完成后需要執(zhí)行的指令，異步的發(fā)展歷程如下：

1. 回調(diào)函數(shù)
2. Promise
3. Generator
4. co
5. async,await

下面會一步一步展現(xiàn)各種方式。

回調(diào)函數(shù)

　　function f1(callback){

　　　　setTimeout(function () {

　　　　　　// f1的任務(wù)代碼

　　　　　　callback();

　　　　}, 1000);

　　}

缺點(diǎn) :

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

Promise

Promise 不僅可以避免回調(diào)地獄，還可以統(tǒng)一捕獲失敗的原因，目前也應(yīng)用廣泛

  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. 生成器是一個函數(shù)，需要加* ，可以用來生成迭代器
2. 生成器函數(shù)和普通函數(shù)不一樣，普通函數(shù)是一旦調(diào)用一定會執(zhí)行完，但是生成器函數(shù)中間可以暫停。
3. 生成器和普通函數(shù)不一樣，調(diào)用它并不會立即執(zhí)行
4. 它會返回此生成器的迭代器,迭代器是一個對象，每調(diào)用一次next就可以返回一個值對象

function *go(a){
  console.log(1);
  //此處的b用來供外界輸入進(jìn)來的
  //這一行實(shí)現(xiàn)輸入和輸出，本次的輸出放在yield后面，下次的輸入放在yield前面
  let b =  yield a;
  console.log(2);
  let c = yield b;
  console.log(3);
  return c;
}
let it = go("a值");
//next第一次執(zhí)行不需要參數(shù)，傳參數(shù)沒有意義
let r1 = it.next();
//第一次調(diào)用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

隨著前端的迅速發(fā)展，大神們覺得要像同步代碼一樣寫異步，co問世了，co是 TJ 大神結(jié)合了promise 和 生成器 的一個庫，實(shí)際上還是幫助我們自動執(zhí)行迭代器

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();//我們要讓我們的生成器持續(xù)執(zhí)行
  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是語法糖，內(nèi)部是generator+promise實(shí)現(xiàn)
async函數(shù)就是將Generator函數(shù)的星號（*）替換成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會進(jìn)行詳細(xì)的介紹。

下一篇 javascript 運(yùn)行機(jī)制 EventLoop