摘要：前言轉(zhuǎn)簡體重新排版布局代碼全面使用并且直接附上輸出結(jié)果補充細節(jié)補充內(nèi)容增加例子說明新增和在遍歷情況下怎么使用上文講了關(guān)于執(zhí)行機制單線程同異步任務(wù)事件循環(huán)的知識點我們知道在某一時刻內(nèi)只能執(zhí)行特定的一個任務(wù)并且會阻塞其它任務(wù)執(zhí)行為了解決這個

PS：
2018/08/08 轉(zhuǎn)簡體
2018/08/09 重新排版布局,代碼全面使用ES6并且直接附上輸出結(jié)果,補充細節(jié)
2018/08/13 補充Async..await內(nèi)容,增加例子說明
2018/08/20 新增Async..await和Promise.all在遍歷情況下怎么使用

上文講了關(guān)于Javascript執(zhí)行機制--單線程,同異步任務(wù),事件循環(huán)的知識點,我們知道Javascript在某一時刻內(nèi)只能執(zhí)行特定的一個任務(wù),并且會阻塞其它任務(wù)執(zhí)行,為了解決這個問題,Javascript語言將任務(wù)的執(zhí)行模式分成兩種：

同步(Synchronous)：一定要等任務(wù)執(zhí)行完了,得到結(jié)果,才執(zhí)行下一個任務(wù);

異步(Asynchronous)：不等任務(wù)執(zhí)行完,直接執(zhí)行下一個任務(wù),等到后面再繼續(xù)執(zhí)行未完成的任務(wù);

現(xiàn)在我們就講講關(guān)于異步編程的發(fā)展
更多細節(jié)請看阮一峰大神的《ECMAScript 6 入門》

如果看不清晰右鍵圖片新標簽頁打開

回調(diào)函數(shù)就是一個通過函數(shù)指針調(diào)用的函數(shù).如果你把函數(shù)的指針(地址)作為參數(shù)傳遞給另一個函數(shù),當這個指針被用來調(diào)用其所指向的函數(shù)時,我們就說這是回調(diào)函數(shù).回調(diào)函數(shù)不是由該函數(shù)的實現(xiàn)方直接調(diào)用,而是在特定的事件或條件發(fā)生時由另外的一方調(diào)用的,用于對該事件或條件進行響應(yīng).

⑴定義一個回調(diào)函數(shù);
⑵提供函數(shù)實現(xiàn)的一方在初始化的時候,將回調(diào)函數(shù)的函數(shù)指針注冊給調(diào)用者;
⑶當特定的事件或條件發(fā)生的時候,調(diào)用者使用函數(shù)指針調(diào)用回調(diào)函數(shù)對事件進行處理.

例如：

//定義一個回調(diào)函數(shù)
function callback() {
  console.log("I am a callback!");
}

//函數(shù)實現(xiàn)
function trigger(fn, time) {
  setTimeout(function() {
    fn && fn();
  }, time || 1000);
}

//耐心等兩秒哦
trigger(callback, 2000);

//輸出
//I am a callback!

線性理解能力缺失,代碼高度耦合,不利于維護閱讀,嵌套層級深的情況流程混亂,陷入“回調(diào)地獄”;

因為回調(diào)本身錯誤無法被外層代碼捕捉,需要在實現(xiàn)內(nèi)部里實現(xiàn)額外的容錯代碼(返回報錯,多次執(zhí)行,不執(zhí)行等);

tips：因為異步任務(wù)在執(zhí)行機制里處理方式不同的問題,try/catch語句只能捕捉執(zhí)行棧上的錯誤,詳情請回顧Javascript執(zhí)行機制--單線程,同異步任務(wù),事件循環(huán)

也叫觀察者模式,這是一種常見的編程方式,一個對象(目標對象和觀察者對象)的狀態(tài)發(fā)生改變,所有的依賴對象(觀察者對象)都將得到通知,進行廣播通知.執(zhí)行事件由觸發(fā)事件調(diào)用與順序無關(guān),易用低耦合并且不依賴函數(shù)調(diào)用.

  
    
    
  

  
    

      
item1
      
item2
      
item3
    
    
  

低耦合,目標對象和觀察者對象建立了一個抽象的關(guān)系;

一對多的映射關(guān)系,目標對象的狀態(tài)發(fā)生改變,所有的觀察者對象都將得到通知,進行各自的回調(diào)操作;

任務(wù)的執(zhí)行不取決于代碼的順序,而取決于某個事件是否發(fā)生;

盡管松耦合的通信方式優(yōu)于對象之間的硬編碼,代碼流程依然是硬傷,因為你可能不知道在哪里定義了什么回調(diào)函數(shù)觸發(fā)了什么事件發(fā)生;

這是一種類似事件監(jiān)聽但是卻更強大的設(shè)計模式(很多人也把兩者視為同一種模式,個人覺得還是有點區(qū)別的),例如：

前者由目標對象負責調(diào)度,后者由一個調(diào)度中心負責調(diào)度;

前者低耦合,后者不耦合;

例如我們可以自己封裝一個方法以實現(xiàn)更多監(jiān)聽事件

var listener = (function() {
  //訂閱隊列
  var list = [],
    //監(jiān)聽事件
    on = function(type, fn) {
      if (!list[type]) list[type] = [];
      list[type].push(fn);
    },
    //取消監(jiān)聽事件
    off = function(type, fn) {
      list[type] = [];
    },
    //觸發(fā)事件
    trigger = function() {
      //取出監(jiān)聽類型
      var type = Array.prototype.shift.call(arguments),
        queue = list[type],
        i = 0,
        len = queue.length;

      for (; i < len; i++) {
        //帶參數(shù)發(fā)布
        queue[i].apply(this, arguments);
      }
    };

  return {
    on: on,
    off: off,
    trigger: trigger,
  };
})();

listener.on("log", function() {
  console.log("I trigger a log!");
});
listener.trigger("log");

//取消之后不觸發(fā)
listener.off("log");
listener.trigger("log");

//輸出
//I trigger a log!

調(diào)度中心統(tǒng)一管理目標對象和觀察者對象相關(guān)信息,之間互不依賴;

上面的方法不管怎么變化,始終避不開回調(diào)地獄的困境,直到后來被社區(qū)提出和實現(xiàn)并且已經(jīng)被放置到ES6統(tǒng)一標準化的---Promise出現(xiàn).
簡單來說就兩個特性：

初始化時候的pending(進行中)狀態(tài)只能通過異步操作的結(jié)果更改成fulfilled/resolved(已成功)或者rejected(已失敗)的狀態(tài),即其他任何手段都不能影響到;

狀態(tài)一旦更改是不可逆,即使之后再添加回調(diào)函數(shù)也只是返回同個結(jié)果,這個特點恰恰能解決上面說的回調(diào)函數(shù)無法被外層代碼捕捉錯誤的缺點;

const promise = new Promise((resolve, reject) => {
  true ? resolve("success") : reject("error");
});
//Promise實例
console.log(promise);

promise.then(
  function resolved(res) {
    console.log(res);
  },
  function rejected(err) {
    console.log(err);
  }
);

//輸出
//Promise {  }
//success

Promise構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù),JavaScript 引擎提供兩個參數(shù)分別是：

其中rejected(已失敗)的狀態(tài)包括程序的錯誤也能捕捉并且不會中斷程序運行,并把錯誤原因當成參數(shù)傳遞下去

const promise = new Promise(function(resolve, reject) {
  //未定義變量
  return num;
});

promise.then(null, function rejected(err) {
  console.log(`rejected：${err}`);
});

//輸出
//rejected: ReferenceError: num is not defined

Promise 實例能訪問定義在原型對象Promise.prototype上的then方法.它的作用是為 Promise 實例添加狀態(tài)改變時的回調(diào)函數(shù),提供兩個參數(shù)分別是

const promise = new Promise(function(resolve, reject) {
  throw "error";
});

//有rejected處理函數(shù)
promise.then(
  function resolved(res) {
    console.log(res);
  },
  function rejected(err) {
    console.log(`捕捉錯誤：${err}`);
  }
);

//沒有rejected處理函數(shù)
promise.then(function resolved(res) {
  console.log(res);
});

//捕捉錯誤：error
//系統(tǒng)報錯

因為then返回的是一個新的Promise實例,所以可以鏈式調(diào)用,如果需要把當前結(jié)果作為下一個then方法的參數(shù)將它作為返回值return.

const promise = new Promise((resolve, reject) => {
  true ? resolve("success") : reject("error");
});

promise
  .then(function resolved(res) {
    console.log(res);
    //這次不返回結(jié)果了
  })
  .then(function resolved(res) {
    console.log(res);
    //這次返回其他
    return "成功";
  })
  .then(
    function resolved(res) {
      console.log(`成功信息：${res}`);
    },
    function rejected(err) {
      console.log(`失敗信息：${err}`);
    }
  );

//輸出
//success
//undefined
//成功信息：成功

Promise代碼量看著多只是為了讓讀者更直觀,采用ES6箭頭函數(shù)跟縮寫名稱可以壓縮成下面這樣

const promise = new Promise ((resolve, reject) => {
  true ? resolve ("success") : reject ("error");
});

promise.then (res => res, err => err);

then方法會隱性返回一個Promise或者開發(fā)者顯性返回任何值,而Promise有自己內(nèi)部機制處理：

如果回調(diào)函數(shù)中返回一個值或者不返回：

then返回resolved狀態(tài)Promise,并且將返回的值或者undefined作為參數(shù)值.

如果回調(diào)函數(shù)拋出錯誤：

then返回rejected狀態(tài)Promise,并且將拋出的錯誤作為參數(shù)值.

如果回調(diào)函數(shù)返回一個Promise：

Promise是pending狀態(tài),then返回pending狀態(tài)Promise,但是兩者的終態(tài)還會相同的,并且將回調(diào)函數(shù)Promise的參數(shù)值作為它的參數(shù)值;

Promise是resolved狀態(tài),then返回resolved狀態(tài)Promise,并且將回調(diào)函數(shù)Promise的參數(shù)值作為它的參數(shù)值;

Promise是rejected狀態(tài),then返回rejected狀態(tài)Promise,并且將回調(diào)函數(shù)Promise的參數(shù)值作為它的參數(shù)值;

前面說過狀態(tài)一旦更改是不可逆,即使之后再添加回調(diào)函數(shù)也只是返回同個結(jié)果

即使后面再拋出錯誤then也是返回resolved狀態(tài)Promise;

const promise = new Promise ((resolve, reject) => {
  resolve ();
  throw "error";
});

promise.then (
  res => {
    console.log (`resloved: ${res}`);
  },
  err => {
    console.log (`rejected: ${err}`);
  }
);

//輸出
//resloved: undefined

即使后面再顯性返回resolved狀態(tài)Promise也是返回rejected狀態(tài)Promise;

const promise = new Promise ((resolve, reject) => {
  reject ();
  return Promise.resolve ();
});

promise.then (
  res => {
    console.log (`resloved: ${res}`);
  },
  err => {
    console.log (`rejected: ${err}`);
  }
);

//輸出
//rejected: undefined

基本條件如下:

p1設(shè)定三秒后改變狀態(tài)

p2設(shè)定一秒后改變狀態(tài)

p1作為p2的返回參數(shù)傳遞

//開始執(zhí)行時間
console.log (`開始運行時間: ${new Date ().toTimeString ()}`);
const p1 = new Promise ((resolve, reject) => {
  //3秒后執(zhí)行
  setTimeout (resolve, 3000);
}),
  p2 = new Promise ((resolve, reject) => {
    //1秒后執(zhí)行
    setTimeout (() => resolve (p1), 1000);
  });

//處理時間
p2.then (
  res => {
    console.log (`p2返回成功狀態(tài)時間: ${new Date ().toTimeString ()}`);
  },
  err => {
    console.log (`p2返回失敗狀態(tài)時間: ${new Date ().toTimeString ()}`);
  }
);

//輸出
//開始運行時間: 09:27:44 GMT+0800 (中國標準時間)
//p2返回成功狀態(tài)時間: 09:27:47 GMT+0800 (中國標準時間)

//開始執(zhí)行時間
console.log(`開始運行時間: ${new Date().toTimeString()}`);
const p1 = new Promise((resolve, reject) => {
    //3秒后執(zhí)行
    setTimeout(reject, 3000);
  }),
  p2 = new Promise((resolve, reject) => {
    //1秒后執(zhí)行
    setTimeout(() => resolve(p1), 1000);
  });

//處理時間
p2.then(
  res => {
    console.log(`p2返回成功狀態(tài)時間: ${new Date().toTimeString()}`);
  },
  err => {
    console.log(`p2返回失敗狀態(tài)時間: ${new Date().toTimeString()}`);
  }
);

//輸出
//開始運行時間: 09:30:50 GMT+0800 (中國標準時間)
//p2返回失敗狀態(tài)時間: 09:30:53 GMT+0800 (中國標準時間)

//開始執(zhí)行時間
console.log (`開始運行時間: ${new Date ().toTimeString ()}`);
const p1 = new Promise ((resolve, reject) => {
  //3秒后執(zhí)行
  setTimeout (resolve, 3000);
}),
  p2 = new Promise ((resolve, reject) => {
    //1秒后執(zhí)行
    setTimeout (() => reject (p1), 1000);
  });

//處理時間
p2.then (
  res => {
    console.log (`p2返回成功狀態(tài)時間: ${new Date ().toTimeString ()}`);
  },
  err => {
    console.log (`p2返回失敗狀態(tài)時間: ${new Date ().toTimeString ()}`);
  }
);

//輸出
//開始運行時間: 09:31:33 GMT+0800 (中國標準時間)
//p2返回失敗狀態(tài)時間: 09:31:34 GMT+0800 (中國標準時間)

看完三個例子之后還有一個省略代碼可以得出結(jié)論：

結(jié)論：then回調(diào)函數(shù)的Promise狀態(tài)首先取決于調(diào)用函數(shù)(p2)狀態(tài),當它resolved(已成功)情況下才取決于返回函數(shù)Promise(p1)的狀態(tài).

如果Promise狀態(tài)變?yōu)閞ejected或者then方法運行中拋出錯誤,都可以用catch捕捉并且返回一個新的Promise實例,建議then方法省略錯誤處理,最底層添加一個catch處理機制;

const promise = new Promise((resolve, reject) => {
  throw "error";
});

//省略then錯誤處理
promise.then().catch(res => {
  console.log(res);
});

//輸出
//error

注意：如果決定使用catch處理的話前面就不能用reject做錯誤處理了,因為被攔截之后是不會再經(jīng)過catch了

const promise = new Promise((resolve, reject) => {
  throw "error";
});

promise
  .then(null, err => {
    console.log(`then: ${err}`);
    return err;
  })
  .catch(err => {
    //跳過
    console.log(`catch: ${err}`);
  })
  .then(
    res => {
      console.log(`resloved: ${res}`);
    },
    err => {
      console.log(`rejected: ${err}`);
    }
  );

//輸出
//then: error
//resloved: error

從結(jié)果可以看到第一個then有了錯誤處理函數(shù)之后會跳過catch方法,然后第二個then會在成功處理函數(shù)里打??？說好的狀態(tài)一旦更改是不可逆呢？？？
這里面又涉及到return值的問題了.

第一層then已經(jīng)做了錯誤處理,返回一個resloved狀態(tài)Promise;
因為catch不會處理resloved狀態(tài)Promise所以跳過;
第二層then接收并在resloved處理函數(shù)處理;

如果記性好的人應(yīng)該記得上面講解例子有個類似的寫法但是卻依然報錯,知道原因么？

const promise = new Promise(function(resolve, reject) {
  throw "error";
});

//有rejected處理函數(shù)
promise.then(
  function resolved(res) {
    console.log(res);
  },
  function rejected(err) {
    console.log(`捕捉錯誤：${err}`);
  }
);

//沒有rejected處理函數(shù)
promise.then(function resolved(res) {
  console.log(res);
});

//捕捉錯誤：error
//系統(tǒng)報錯

再重復(fù)一遍,Promise每次都會返回一個新的Promise實例,所以不能用鏈式調(diào)用后的結(jié)果來看待變量promise.

The Promise.all(iterable) method returns a single Promise that resolves when all of the promises in the iterable argument have resolved or when the iterable argument contains no promises. It rejects with the reason of the first promise that rejects.

大概意思就是當?shù)鲄?shù)里的所有Promise都返回成功狀態(tài)或者沒有Promise入?yún)⒌臅r候返回一個成功狀態(tài)Promise,否則返回第一個失敗狀態(tài)的Promise拋出的錯誤.
如果迭代器參數(shù)不是Promise也會被隱性調(diào)用Promise.resolve方法轉(zhuǎn)成Promis實例.(Promise.all方法的參數(shù)必須具有 Iterator 接口,且返回的每個成員都是 Promise 實例).

//成功
const p1 = new Promise((resolve, reject) => {
    resolve("suc1");
  }),
  //成功
  p2 = new Promise((resolve, reject) => {
    resolve("suc2");
  }),
  //失敗
  p3 = new Promise((resolve, reject) => {
    reject("err");
  });

Promise.all([p1, p2]).then(res => {
  console.log(`全部成功：${res}`);
});

Promise.all([p1, p3]).then(null, err => console.log(`第一個失?。?{err}`));

Promise.all([]).then(
  res => console.log("空數(shù)組返回成功Promise"),
  err => console.log("空數(shù)組返回失敗Promise")
);

//輸出
//空數(shù)組返回成功Promise
//全部成功：  (2) ["suc1", "suc2"]
//第一個失?。?err

注意: 如果空數(shù)組情況下立馬返回成功狀態(tài),盡管放在最后位置卻第一個打印結(jié)果！

跟all類似,區(qū)別在于兩點：

它只返回第一個改變Promise狀態(tài)的結(jié)果,不管成功失敗都只返回一個結(jié)果;

空數(shù)組情況下永遠不會執(zhí)行;

//成功
const p1 = new Promise((resolve, reject) => {
    resolve("suc1");
  }),
  //成功
  p2 = new Promise((resolve, reject) => {
    resolve("suc2");
  }),
  //失敗
  p3 = new Promise((resolve, reject) => {
    reject("err");
  });

Promise.race([p1, p2]).then(res => {
  console.log(`第一個返回成功：${res}`);
});

Promise.race([p3, p2]).then(null, err => console.log(`第一個返回失?。?{err}`));

Promise.race([]).then(
  res => console.log("空數(shù)組返回成功Promise"),
  err => console.log("空數(shù)組返回失敗Promise")
);

//輸出
//第一個返回成功：suc1
//第一個返回失?。篹rr

因為Promise的then方法會把函數(shù)結(jié)果放置到微任務(wù)隊列(micro tasks),也就是當次事件循環(huán)的最后執(zhí)行.如果你使用的是同步函數(shù)實際上是被無端延遲執(zhí)行了.如果不清楚這方面內(nèi)容可以再看一下我之前寫得Javascript執(zhí)行機制--單線程,同異步任務(wù),事件循環(huán)

function sync() {
  console.log("sync");
}

function async() {
  setTimeout(() => console.log("async"), 1000);
}

Promise.resolve().then(sync);
Promise.resolve().then(async);
console.log("end");

//輸出
//end
//sync
//async

實際上有兩種方法可以實現(xiàn)讓同步函數(shù)同步執(zhí)行,異步函數(shù)異步執(zhí)行,并且讓它們具有統(tǒng)一的 API.

function sync() {
  console.log("sync");
}

function async() {
  setTimeout(() => console.log("async"), 1000);
}

(() => new Promise(resolve => resolve(sync())))();

(() => new Promise(resolve => resolve(async())))();

console.log("end");

// 輸出
// sync
// end
// async

function sync() {
  console.log("sync");
}

function async() {
  setTimeout(() => console.log("async"), 1000);
}
(async () => sync())();
(async () => async())();
console.log("end");

// 輸出
// sync
// end
// async

異步流程能使用線性寫法鏈式調(diào)用,擺脫“回調(diào)地獄”;

多種方式的錯誤處理機制;

能將當前結(jié)果往下層層傳遞;

promise是一種規(guī)約,它在回調(diào)調(diào)用和錯誤處理規(guī)范化的基礎(chǔ)上給異步編程提供了更多的可能性;

一旦開始無法停止取消;

盡管可以用catch做統(tǒng)一錯誤處理,但是被中間層攔截了之后可能會造成干擾;

只能知道Promise在實例pending(進行中)、fulfilled(已成功)和rejected(已失敗)狀態(tài)中的一種,沒有更加詳細的進度信息;

盡管比回調(diào)函數(shù)稍好,但是寫法也十分冗余,過多的then讓代碼語義化不明;

每次都是返回新的Promise實例,犧牲性能代價略高;

Generator 函數(shù)是 ES6 提供的一種異步編程解決方案.

語法上,首先可以把它理解成,Generator 函數(shù)是一個狀態(tài)機,封裝了多個內(nèi)部狀態(tài).執(zhí)行 Generator 函數(shù)并不執(zhí)行里面程序而是返回一個遍歷器對象,可以依次遍歷 Generator 函數(shù)內(nèi)部的每一個狀態(tài).yield表達式是暫停執(zhí)行的標記,而next方法可以恢復(fù)執(zhí)行.
每一次調(diào)用next方法,都會返回數(shù)據(jù)結(jié)構(gòu)的當前成員的信息.具體來說,就是返回一個包含value和done兩個屬性的對象.其中,value屬性是當前成員的值,done屬性是一個布爾值,表示遍歷是否結(jié)束.

function關(guān)鍵字與函數(shù)名之間有一個星號就行,哪個位置都能通過;

函數(shù)體內(nèi)部使用yield表達式定義不同的內(nèi)部狀態(tài);

function* Generator() {
  yield "1";
  return "2";
}

const example = Generator();
console.log(example);
console.log(example.next());
console.log(example.next());

// 輸出
// Object [Generator] {}
// { value: "1", done: false }
// { value: "2", done: true }

yield表達式本身沒有返回值,或者說總是返回undefined.next方法可以帶一個參數(shù),該參數(shù)就會被當作上一個yield表達式的返回值.否則上一個yield表達式的返回值維持原狀不變,這個特性相當重要,我們就依賴它從外部向內(nèi)部注入不同的值,從而調(diào)整函數(shù)行為.調(diào)用next的時候,內(nèi)部指針會往下運行直到遇到下列情況:

遇到y(tǒng)ield表達式,它后面的表達式只有內(nèi)部指針指向該語句時才會執(zhí)行,并將它的值作為返回的vaule,然后暫停執(zhí)行;

遇到return表達式,將它的值作為返回的vaule,遍歷結(jié)束;

運行到函數(shù)結(jié)束,將undefined作為返回的vaule,遍歷結(jié)束;

2和3之后仍然可以繼續(xù)調(diào)用next,結(jié)果都是{value: undefined, done: true},即使return后面還有yield表達式也不會改變結(jié)果;

然后我們根據(jù)規(guī)則再去解讀那一段代碼的運行結(jié)果

function* foo() {
  let x = yield 1;
  console.log(`函數(shù)內(nèi)部x: ${x}`);

  let y = x * (yield x + 2);
  console.log(`函數(shù)內(nèi)部xy: ${x} ${y}`);

  return x + y;
}

const it = foo();
console.log(it.next(2));
console.log(it.next(3));
console.log(it.next(4));

// 輸出
// 函數(shù)內(nèi)部x: undefined
// Object { value: 1, done: false }
// 函數(shù)內(nèi)部x: 3
// Object { value: 5, done: false }
// 函數(shù)內(nèi)部xy: 3 12
// Object { value: 15, done: true }

第一次next: 執(zhí)行var x = yield 1后停止,因為沒有上一個yield表達式,所以入?yún)?不起效,輸出1;

第二次next: 執(zhí)行yield x + 2后停止,x等于入?yún)?,輸出5;

第三次next: 執(zhí)行return x + y后停止,上一個yield表達式var y = 3 * 4(x+2被入?yún)?取代了),輸出15;

概念其實很清晰,過程有點復(fù)雜,大家謹記next方法可以帶一個參數(shù),該參數(shù)就會被當作上一個yield表達式的返回值.否則上一個yield表達式的返回值維持原狀不變,然后根據(jù)這個規(guī)則來算就明白了.

Generator函數(shù)內(nèi)部,調(diào)用另一個Generator函數(shù),默認情況下是沒有效果的,需要用到y(tǒng)ield表達式,帶*會返回值,不帶*返回遍歷器對象.

function* foo() {
  bar(1);
  //內(nèi)部調(diào)用Generator函數(shù)
  yield bar(2);
  yield* bar(3);
  yield 1;
}

function* bar(num) {
  console.log(num);
  yield 2;
}

const it = foo();
console.log(it.next());
console.log(it.next());
console.log(it.next());

// 輸出
// { value: Object [Generator] {}, done: false }
// 3
// { value: 2, done: false }
// { value: 1, done: false }

從輸出結(jié)果可知只有yield * bar(3)生效.
如果被代理的 Generator 函數(shù)有return語句,那么就可以向代理它的Generator函數(shù)返回數(shù)據(jù).

function* genFuncWithReturn() {
  yield "a";
  yield "b";
  return "c";
}

function* logReturned(genObj) {
  const result = yield* genObj;
  //返回值
  console.log(result);
}

const it = logReturned(genFuncWithReturn());
console.log(it.next());
console.log(it.next());
console.log(it.next());

// 輸出
// { value: "a", done: false }
// { value: "b", done: false }
// c
// { value: undefined, done: true }

function* foo() {
  console.log(1);
  console.log(2);
  return;
}

const it = foo();
console.log(3);
it.next();

// 輸出
// 3
// 1
// 2

function foo() {
    yield 1;
}

const it = foo();

// 輸出
// Unexpected number

function* foo() {
  console.log("函數(shù)內(nèi)部x: " + (yield));
  yield 1;
}

const it = foo();
console.log(it.next());
console.log(it.next(3));

// 輸出
// { value: undefined, done: false }
// 函數(shù)內(nèi)部x: 3
// { value: 1, done: false }

Generator函數(shù)返回的遍歷器對象的throw方法(不是全局的throw方法)可以在函數(shù)體外拋出錯誤,這意味著出錯的代碼與處理錯誤的代碼,實現(xiàn)了時間和空間上的分離.然后在Generator函數(shù)體內(nèi)被捕獲后,會附帶執(zhí)行下一條yield表達式.

const err = function*() {
  try {
    yield;
  } catch (e) {
    console.log(`內(nèi)部捕獲: ${e}`);
  }
};
//執(zhí)行
const it = err();
console.log(it.next());

//外部捕獲錯誤
try {
  //兩次拋出錯誤
  console.log(it.throw("err1"));
  console.log(it.throw("err2"));
} catch (e) {
  console.log(`外部捕獲: ${e}`);
}

// 輸出
// { value: undefined, done: false }
// 內(nèi)部捕獲 err1
// { value: undefined, done: true }
// 外部捕獲 err2

所以這里實際執(zhí)行順序it.throw("err1") ? it.next() ? it.throw("err2")
同時,Generator函數(shù)體內(nèi)拋出的錯誤,也可以被函數(shù)體外的catch捕獲;

const err = function*() {
  yield "1";
  throw "err";
  yield;
  yield "2";
};
//執(zhí)行
const it = err();
console.log(it.next());

try {
  console.log(it.next());
} catch (e) {
  console.log("外部捕獲", e);
}
//捕捉錯誤之后繼續(xù)執(zhí)行
console.log(it.next());

// 輸出
// { value: "1", done: false }
// 外部捕獲 err
// { value: undefined, done: true }

注意最后一次執(zhí)行next函數(shù)返回{value: undefined, done: true},因為拋出錯誤后沒有做內(nèi)部捕獲,JS引擎會認為這個Generator函數(shù)已經(jīng)遍歷結(jié)束.

返回給定的值或者不傳默認undefined,并且終結(jié)遍歷 Generator 函數(shù).

function* Generator() {
  yield "1";
  yield "2";
  yield "3";
  return "4";
}

const it = Generator();
console.log(it.return(2));
console.log(it.next(3));

// 輸出
// { value: 2, done: true }
// { value: undefined, done: true }

//模擬ajax請求
function ajax() {
  return new Promise((resolve, reject) => {
    setTimeout(
      () =>
        resolve({
          abc: 123,
        }),
      1000
    );
  });
}

function* foo() {
  try {
    yield;
  } catch (err) {
    console.log(`內(nèi)部捕獲: ${err}`);
  }
  yield console.log("再次執(zhí)行");
  yield ajax();
  return res;
}

const it = foo();
it.next();
it.throw("somethings happend");
it.next().value.then(res => {
  console.log(res);
});

// 輸出
// 內(nèi)部捕獲: somethings happend
// 再次執(zhí)行
// { abc: 123 }

暫停執(zhí)行和恢復(fù)執(zhí)行,這是Generator能封裝異步任務(wù)的根本原因,強大的錯誤捕捉能力可以在寫法上更加自由.
我們可以在上面的代碼擴展出更多步驟,例如這種異步依賴的代碼可以以同步順序?qū)懗鰜?或者外層操作res1之后再傳到ajax2等.

function* foo() {
  var res1 = yield ajax1(),
    res2 = yield ajax2(res1);

  return res;
}

盡管Generator異步流程管理非常簡潔,但是操作流程不算方便,需要開發(fā)者決定什么時候執(zhí)行下一步,甚至你會發(fā)現(xiàn)在整個異步流程會充斥著多個next的身影.

for...of循環(huán)可以自動遍歷 Generator 函數(shù)時生成的Iterator對象,一旦next方法的返回對象的done屬性為true,循環(huán)就會中止,且不包含該返回對象,所以return語句會執(zhí)行,但不會顯示輸出.

function* Generator() {
  yield "1";
  yield "2";
  yield "3";
  return "4";
}

for (let v of Generator()) {
  console.log(v);
}

// 輸出
// 1
// 2
// 3

也可以用while實現(xiàn),區(qū)別在于for...of循環(huán)返回值,while返回數(shù)據(jù)結(jié)構(gòu)

function* Generator() {
  yield "1";
  yield "2";
  yield "3";
  return "4";
}

let it = Generator(),
  result = it.next();

while (!result.done) {
  console.log(result);
  result = it.next(result);
}

// 輸出
// { value: "1", done: false }
// { value: "2", done: false }
// { value: "3", done: false }

上面方法不適用于異步操作,如果之間需要依賴關(guān)系的話可能會導(dǎo)致后續(xù)執(zhí)行失敗,為了實現(xiàn)這種效果有些很出名的衍生庫co等,關(guān)鍵源碼很短也比較簡單,直接貼出來了.

/**
 * Execute the generator function or a generator
 * and return a promise.
 *
 * @param {Function} fn
 * @return {Promise}
 * @api public
 */

function co(gen) {
  var ctx = this;
  var args = slice.call(arguments, 1);

  // we wrap everything in a promise to avoid promise chaining,
  // which leads to memory leak errors.
  // see https://github.com/tj/co/issues/180
  return new Promise(function(resolve, reject) {
    if (typeof gen === "function") gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== "function") return resolve(gen);

    onFulfilled();

    /**
     * @param {Mixed} res
     * @return {Promise}
     * @api private
     */

    function onFulfilled(res) {
      var ret;
      try {
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      next(ret);
      return null;
    }

    /**
     * @param {Error} err
     * @return {Promise}
     * @api private
     */

    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    /**
     * Get the next value in the generator,
     * return a promise.
     *
     * @param {Object} ret
     * @return {Promise}
     * @api private
     */

    function next(ret) {
      if (ret.done) return resolve(ret.value);
      var value = toPromise.call(ctx, ret.value);
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      return onRejected(
        new TypeError(
          "You may only yield a function, promise, generator, array, or object, " +
            "but the following object was passed: "" +
            String(ret.value) +
            """
        )
      );
    }
  });
}

完整代碼請看co,具體用法就不說了

一種新的異步編程概念,ES6對協(xié)程的不完全實現(xiàn),使用同步的方式處理異步操作,改寫回調(diào)函數(shù);

出色的控制流管理,Generator內(nèi)部可以使用yield表達式定義不同的內(nèi)部狀態(tài)并且惰性執(zhí)行;

yield表達式具備記憶功能,next可以從上一次暫停點開始執(zhí)行;

通過next入?yún)⒑头祷刂悼梢越粨Q數(shù)據(jù)影響執(zhí)行函數(shù);

Generator函數(shù)體外拋出的錯誤,可以在函數(shù)體內(nèi)捕獲;反過來,Generator函數(shù)體內(nèi)拋出的錯誤,也可以被函數(shù)體外的catch捕獲;

相對復(fù)雜,需要了解更多的知識點,怎么正確使用Generator有很多注意地方,具體詳情自行查看文檔;

流程管理不夠靈活,衍生的co庫等都有些不足;

犧牲性能代價比較高;

ES2017 標準引入了 async 函數(shù),一句話,它就是 Generator 函數(shù)的語法糖.
如果說 Promise 主要解決的是異步回調(diào)問題,那么 async + await 主要解決的就是將異步問題同步化,降低異步編程的認知負擔.

function p1() {
  return Promise.resolve().then(res => console.log("p1"));
}

function p2() {
  return Promise.resolve().then(res => console.log("p2"));
}

async function Async() {
  console.log(1);
  await p1();
  console.log(2);
  await p2();
}

const it = Async().then(res => console.log(123));

// 輸出
// 1
// p1
// 2
// p2
// 123

async function Async() {
  return await 1;
}
Async().then(res => console.log(res));

// 輸出
// 1

async function Async() {
  await Promise.reject("err");
  console.log("不執(zhí)行了");
  await Promise.resolve();
};
Async().catch(err => console.log(err));

// 輸出
// err

//阻塞主線程
const delazy = (time = 2000) =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, time);
  });

//模擬請求
async function quest() {
  await delazy();
  return Promise.resolve({
    str: "123",
  });
}

//統(tǒng)一獲取
async function doSomethings() {
  const ary = await Promise.all([quest(), quest()]);
  console.log(ary.map(e => e.str));
}

doSomethings();

async function Async() {
  try {
    await Promise.reject("err").then(null, err => console.log(err));
    console.log("繼續(xù)執(zhí)行");
    await Promise.resolve("suc").then(res => console.log(res));
  } catch (err) {}
}
Async();

// 輸出
// 繼續(xù)執(zhí)行
// suc

function p1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
  });
}

function p2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(2), 1000);
  });
}

async function sum() {
  const [a, b] = await Promise.all([p1(), p2()]);
  console.log(a, b);
}
==================== OR ============================
async function sum() {
  const a = p1(),
    b = p2(),
    c = await a,
    d = await b;

  console.log(c, d);
}

sum();

// 輸出
// 1 2

如果想要跳過錯誤繼續(xù)執(zhí)行的解決辦法可以使用try..catch或者catch;

沒有依賴關(guān)系的異步操作可以直接用await后面接Promise.all()提高性能;

跟上面說的co類似,將Generator函數(shù)和自動執(zhí)行器,包裝在一個函數(shù)里.

async function fn(args) {}
//等價于
function fn(args) {
  return spawn(function*() {});
}

spawn函數(shù)就是自動執(zhí)行器

function spawn(genF) {
  return new Promise(function(resolve, reject) {
    const gen = genF();
    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch (e) {
        return reject(e);
      }
      if (next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(
        function(v) {
          step(function() {
            return gen.next(v);
          });
        },
        function(e) {
          step(function() {
            return gen.throw(e);
          });
        }
      );
    }
    step(function() {
      return gen.next(undefined);
    });
  });
}

代碼量不多也不難,建議認真學(xué)習里面的思路

內(nèi)置執(zhí)行器,不暴露給用戶;

更好的語義化,更簡潔的寫法;

async函數(shù)的await命令后面,可以是Promise對象和原始類型的值(數(shù)值、字符串和布爾值,但這時等同于同步操作);

async函數(shù)的返回值是Promise;

只要一個await語句后面的Promise變?yōu)閞eject,那么整個async函數(shù)都會中斷執(zhí)行;

錯誤處理機制復(fù)雜;

犧牲性能代價更高;