簡(jiǎn)介

ES6中除了上篇文章講過(guò)的語(yǔ)法新特性和一些新的API之外，還有兩個(gè)非常重要的新特性就是Promise和Generator,今天我們將會(huì)詳細(xì)講解一下這兩個(gè)新特性。

Promise

什么是Promise

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案“回調(diào)函數(shù)和事件”更合理和更強(qiáng)大。

所謂Promise，簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。

從語(yǔ)法上說(shuō)，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。

Promise的特點(diǎn)

Promise有兩個(gè)特點(diǎn)：

對(duì)象的狀態(tài)不受外界影響。

Promise對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：Pending（進(jìn)行中）、Resolved（已完成，又稱(chēng) Fulfilled）和Rejected（已失敗）。

只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無(wú)法改變這個(gè)狀態(tài)。

一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。

Promise對(duì)象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)镽esolved和從Pending變?yōu)镽ejected。

這與事件（Event）完全不同，事件的特點(diǎn)是，如果你錯(cuò)過(guò)了它，再去監(jiān)聽(tīng)，是得不到結(jié)果的。

Promise的優(yōu)點(diǎn)

Promise將異步操作以同步操作的流程表達(dá)出來(lái)，避免了層層嵌套的回調(diào)函數(shù)。

Promise對(duì)象提供統(tǒng)一的接口，使得控制異步操作更加容易。

Promise的缺點(diǎn)

無(wú)法取消Promise，一旦新建它就會(huì)立即執(zhí)行，無(wú)法中途取消。
如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯(cuò)誤，不會(huì)反應(yīng)到外部。
當(dāng)處于Pending狀態(tài)時(shí)，無(wú)法得知目前進(jìn)展到哪一個(gè)階段（剛剛開(kāi)始還是即將完成）。

Promise的用法

Promise對(duì)象是一個(gè)構(gòu)造函數(shù)，用來(lái)生成Promise實(shí)例：

var promise = new Promise(function(resolve, reject) { 
// ... some code 
if (/* 異步操作成功 */){ 
resolve(value); 
} else { reject(error); } 
}
);

promise可以接then操作，then操作可以接兩個(gè)function參數(shù)，第一個(gè)function的參數(shù)就是構(gòu)建Promise的時(shí)候resolve的value，第二個(gè)function的參數(shù)就是構(gòu)建Promise的reject的error。

promise.then(function(value) { 
// success 
}, function(error) { 
// failure }
);

我們看一個(gè)具體的例子：

function timeout(ms){
    return new Promise(((resolve, reject) => {
        setTimeout(resolve,ms,'done');
    }))
}

timeout(100).then(value => console.log(value));

Promise中調(diào)用了一個(gè)setTimeout方法，并會(huì)定時(shí)觸發(fā)resolve方法，并傳入?yún)?shù)done。

最后程序輸出done。

Promise的執(zhí)行順序

Promise一經(jīng)創(chuàng)建就會(huì)立馬執(zhí)行。但是Promise.then中的方法，則會(huì)等到一個(gè)調(diào)用周期過(guò)后再次調(diào)用，我們看下面的例子：

let promise = new Promise(((resolve, reject) => {
    console.log('Step1');
    resolve();
}));

promise.then(() => {
    console.log('Step3');
});

console.log('Step2');

輸出：
Step1
Step2
Step3

Promise.prototype.then()

then方法返回的是一個(gè)新的Promise實(shí)例（注意，不是原來(lái)那個(gè)Promise實(shí)例）。因此可以采用鏈?zhǔn)綄?xiě)法，即then方法后面再調(diào)用另一個(gè)then方法.

getJSON("/users.json").then(function(json){
    return json.name;
}).then(function(name){
    console.log(name);
});

上面的代碼使用then方法，依次指定了兩個(gè)回調(diào)函數(shù)。第一個(gè)回調(diào)函數(shù)完成以后，會(huì)將返回結(jié)果作為參數(shù)，傳入第二個(gè)回調(diào)函數(shù)

Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的別名，用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。

getJSON("/users.json").then(function(json){
    return json.name;
}).catch(function(error){
    console.log(error);
});

Promise 對(duì)象的錯(cuò)誤具有“冒泡”性質(zhì)，會(huì)一直向后傳遞，直到被捕獲為止。也就是說(shuō)，錯(cuò)誤總是會(huì)被下一個(gè)catch語(yǔ)句捕獲

getJSON("/users.json").then(function(json){
    return json.name;
}).then(function(name){
    console.log(name);
}).catch(function(error){
    //處理前面所有產(chǎn)生的錯(cuò)誤
    console.log(error);
});

Promise.all()

Promise.all方法用于將多個(gè)Promise實(shí)例，包裝成一個(gè)新的Promise實(shí)例

var p = Promise.all([p1,p2,p3]);

只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會(huì)變成fulfilled，此時(shí)p1、p2、p3的返回值組成一個(gè)數(shù)組，傳遞給p的回調(diào)函數(shù)。
只要p1、p2、p3之中有一個(gè)被rejected，p的狀態(tài)就變成rejected，此時(shí)第一個(gè)被reject的實(shí)例的返回值，會(huì)傳遞給p的回調(diào)函數(shù)。

Promise.race()

Promise.race方法同樣是將多個(gè)Promise實(shí)例，包裝成一個(gè)新的Promise實(shí)例

var p = Promise.race([p1,p2,p3]);

只要p1、p2、p3之中有一個(gè)實(shí)例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個(gè)率先改變的 Promise 實(shí)例的返回值，就傳遞給p的回調(diào)函數(shù).

Promise.resolve()

Promise.resolve()將現(xiàn)有對(duì)象轉(zhuǎn)為Promise對(duì)象.

Promise.resolve('js');
//等價(jià)于
new Promise(resolve => resolve('js'));

那么什么樣的對(duì)象能夠轉(zhuǎn)化成為Promise對(duì)象呢？

參數(shù)是一個(gè)Promise實(shí)例
參數(shù)是一個(gè)thenable對(duì)象
參數(shù)不是具有then方法的對(duì)象，或根本就不是對(duì)象
不帶有任何參數(shù)

Promise.reject()

Promise.reject(reason)方法也會(huì)返回一個(gè)新的 Promise 實(shí)例，該實(shí)例的狀態(tài)為rejected

var p = Promise.reject('error');
//等價(jià)于
var p = new Promise((resolve,reject) => reject('error'));

Promise.reject()方法的參數(shù)，會(huì)原封不動(dòng)地作為reject的理由，變成后續(xù)方法的參數(shù)。這一點(diǎn)與Promise.resolve方法不一致

done()

Promise對(duì)象的回調(diào)鏈，不管以then方法或catch方法結(jié)尾，要是最后一個(gè)方法拋出錯(cuò)誤，都有可能無(wú)法捕捉到（因?yàn)镻romise內(nèi)部的錯(cuò)誤不會(huì)冒泡到全局）。因此，我們可以提供一個(gè)done方法，總是處于回調(diào)鏈的尾端，保證拋出任何可能出現(xiàn)的錯(cuò)誤

asyncFunc().then(f1).catch(f2).then(f3).done();

finally()

finally方法用于指定不管Promise對(duì)象最后狀態(tài)如何，都會(huì)執(zhí)行的操作。它與done方法的最大區(qū)別，它接受一個(gè)普通的回調(diào)函數(shù)作為參數(shù)，該函數(shù)不管怎樣都必須執(zhí)行.

server.listen(1000).then(function(){
    //do something
}.finally(server.stop);

Generator

什么是Generator

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

從語(yǔ)法上，首先可以把它理解成，Generator函數(shù)是一個(gè)狀態(tài)機(jī)，封裝了多個(gè)內(nèi)部狀態(tài)

執(zhí)行 Generator 函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象.

形式上，Generator 函數(shù)是一個(gè)普通函數(shù)，但是有兩個(gè)特征。一是，function關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào)；二是，函數(shù)體內(nèi)部使用yield語(yǔ)句，定義不同的內(nèi)部狀態(tài)。

舉個(gè)例子：

function * helloWorldGenerator(){
    yield 'hello';
    yield 'world';
    return 'ending';
}

var gen = helloWorldGenerator();

輸出結(jié)果：

console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

{ value: 'hello', done: false }
{ value: 'world', done: false }
{ value: 'ending', done: true }

yield

遍歷器對(duì)象的next方法的運(yùn)行邏輯如下:

（1）遇到y(tǒng)ield語(yǔ)句，就暫停執(zhí)行后面的操作，并將緊跟在yield后面的那個(gè)表達(dá)式的值，作為返回的對(duì)象的value屬性值。

（2）下一次調(diào)用next方法時(shí)，再繼續(xù)往下執(zhí)行，直到遇到下一個(gè)yield語(yǔ)句。

（3）如果沒(méi)有再遇到新的yield語(yǔ)句，就一直運(yùn)行到函數(shù)結(jié)束，直到return語(yǔ)句為止，并將return語(yǔ)句后面的表達(dá)式的值，作為返回的對(duì)象的value屬性值。

（4）如果該函數(shù)沒(méi)有return語(yǔ)句，則返回的對(duì)象的value屬性值為undefined。

注意，yield句本身沒(méi)有返回值，或者說(shuō)總是返回undefined。

next方法可以帶一個(gè)參數(shù)，該參數(shù)就會(huì)被當(dāng)作上一個(gè)yield語(yǔ)句的返回值。

function * f() {
    for( let i =0; true; i++){
        let reset = yield i;
        if(reset){
            i = -1;
        }
    }
}

let g = f();
console.log(g.next());
console.log(g.next());
console.log(g.next(true));

輸出結(jié)果：

{ value: 0, done: false }
{ value: 1, done: false }
{ value: 0, done: false }

可以看到最后的一步，我們使用next傳入的true替代了i的值，最后導(dǎo)致i= -1 + 1 = 0.

我們?cè)倏匆粋€(gè)例子：

function * f2(x){
    var y = 2 * ( yield ( x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var r1= f2(5);
console.log(r1.next());
console.log(r1.next());
console.log(r1.next());

var r2= f2(5);
console.log(r2.next());
console.log(r2.next(12));
console.log(r2.next(13));

輸出結(jié)果：

{ value: 6, done: false }
{ value: NaN, done: false }
{ value: NaN, done: true }

{ value: 6, done: false }
{ value: 8, done: false }
{ value: 42, done: true }

如果next不傳值的話(huà)，yield本身是沒(méi)有返回值的，所以我們會(huì)得到NaN。

但是如果next傳入特定的值，則該值會(huì)替換該yield，成為真正的返回值。

yield *

如果在 Generator 函數(shù)內(nèi)部，調(diào)用另一個(gè) Generator 函數(shù)，默認(rèn)情況下是沒(méi)有效果的

function * a1(){
    yield 'a';
    yield 'b';
}

function * b1(){
    yield 'x';
    a1();
    yield 'y';
}

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

輸出結(jié)果：

x
y

可以看到，在b1中調(diào)用a1是沒(méi)有效果的。

將上面的例子修改一下：

function * a1(){
    yield 'a';
    yield 'b';
}

function * b1(){
    yield 'x';
    yield * a1();
    yield 'y';
}

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

輸出結(jié)果：

x
a
b
y

異步操作的同步化表達(dá)

Generator函數(shù)的暫停執(zhí)行的效果，意味著可以把異步操作寫(xiě)在yield語(yǔ)句里面，等到調(diào)用next方法時(shí)再往后執(zhí)行。這實(shí)際上等同于不需要寫(xiě)回調(diào)函數(shù)了，因?yàn)楫惒讲僮鞯暮罄m(xù)操作可以放在yield語(yǔ)句下面，反正要等到調(diào)用next方法時(shí)再執(zhí)行。所以，Generator函數(shù)的一個(gè)重要實(shí)際意義就是用來(lái)處理異步操作，改寫(xiě)回調(diào)函數(shù)。

我們看一個(gè)怎么通過(guò)Generator來(lái)獲取一個(gè)Ajax的結(jié)果。

function * ajaxCall(){
    let result = yield request("http://www.flydean.com");
    let resp = JSON.parse(result);
    console.log(resp.value);
}

function request(url){
    makeAjaxCall(url, function(response){
        it.next(response);
    });
}

var it = ajaxCall();
it.next();

我們使用一個(gè)yield來(lái)獲取異步執(zhí)行的結(jié)果。但是我們?nèi)绾螌⑦@個(gè)yield傳給result變量呢？要記住yield本身是沒(méi)有返回值的。

我們需要調(diào)用generator的next方法，將異步執(zhí)行的結(jié)果傳進(jìn)去。這就是我們?cè)趓equest方法中做的事情。

Generator 的異步應(yīng)用

什么是異步應(yīng)用呢？

所謂"異步"，簡(jiǎn)單說(shuō)就是一個(gè)任務(wù)不是連續(xù)完成的，可以理解成該任務(wù)被人為分成兩段，先執(zhí)行第一段，然后轉(zhuǎn)而執(zhí)行其他任務(wù)，等做好了準(zhǔn)備，再回過(guò)頭執(zhí)行第二段。

比如，有一個(gè)任務(wù)是讀取文件進(jìn)行處理，任務(wù)的第一段是向操作系統(tǒng)發(fā)出請(qǐng)求，要求讀取文件。然后，程序執(zhí)行其他任務(wù)，等到操作系統(tǒng)返回文件，再接著執(zhí)行任務(wù)的第二段（處理文件）。這種不連續(xù)的執(zhí)行，就叫做異步。

相應(yīng)地，連續(xù)的執(zhí)行就叫做同步。由于是連續(xù)執(zhí)行，不能插入其他任務(wù)，所以操作系統(tǒng)從硬盤(pán)讀取文件的這段時(shí)間，程序只能干等著。

ES6誕生以前，異步編程的方法，大概有下面四種。
回調(diào)函數(shù)
事件監(jiān)聽(tīng)
發(fā)布/訂閱
Promise 對(duì)象

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

fs.readFile(fileA, 'utf-8', function(error,data){
    fs.readFile(fileB, 'utf-8', function(error,data){
}
})

如果依次讀取兩個(gè)以上的文件，就會(huì)出現(xiàn)多重嵌套。代碼不是縱向發(fā)展，而是橫向發(fā)展，很快就會(huì)亂成一團(tuán)，無(wú)法管理。因?yàn)槎鄠€(gè)異步操作形成了強(qiáng)耦合，只要有一個(gè)操作需要修改，它的上層回調(diào)函數(shù)和下層回調(diào)函數(shù)，可能都要跟著修改。這種情況就稱(chēng)為"回調(diào)函數(shù)地獄"（callback hell）。

Promise

Promise 對(duì)象就是為了解決這個(gè)問(wèn)題而提出的。它不是新的語(yǔ)法功能，而是一種新的寫(xiě)法，允許將回調(diào)函數(shù)的嵌套，改成鏈?zhǔn)秸{(diào)用。

let readFile = require('fs-readfile-promise');
readFile(fileA).then(function(){
    return readFile(fileB);
}).then(function(data){
    console.log(data);
})

Thunk函數(shù)和異步函數(shù)自動(dòng)執(zhí)行

在講Thunk函數(shù)之前，我們講一下函數(shù)的調(diào)用有兩種方式，一種是傳值調(diào)用，一種是傳名調(diào)用。

"傳值調(diào)用"（call by value），即在進(jìn)入函數(shù)體之前，就計(jì)算x + 5的值（等于6），再將這個(gè)值傳入函數(shù)f。C語(yǔ)言就采用這種策略。

“傳名調(diào)用”（call by name），即直接將表達(dá)式x + 5傳入函數(shù)體，只在用到它的時(shí)候求值。

編譯器的“傳名調(diào)用”實(shí)現(xiàn)，往往是將參數(shù)放到一個(gè)臨時(shí)函數(shù)之中，再將這個(gè)臨時(shí)函數(shù)傳入函數(shù)體。這個(gè)臨時(shí)函數(shù)就叫做 Thunk 函數(shù)。

舉個(gè)例子：

function f(m){
    return m * 2;
}

f(x + 5);

上面的代碼等于：

var thunk = function () {
    return x + 5;
}
function f(thunk){
    return thunk() * 2;
}

在 JavaScript 語(yǔ)言中，Thunk函數(shù)替換的不是表達(dá)式，而是多參數(shù)函數(shù)，將其替換成一個(gè)只接受回調(diào)函數(shù)作為參數(shù)的單參數(shù)函數(shù)。

怎么解釋呢？

比如nodejs中的：

fs.readFile(filename,[encoding],[callback(err,data)])

readFile接收3個(gè)參數(shù)，其中encoding是可選的。我們就以?xún)蓚€(gè)參數(shù)為例。

一般來(lái)說(shuō)，我們這樣調(diào)用：

fs.readFile(fileA,callback);

那么有沒(méi)有辦法將其改寫(xiě)成為單個(gè)參數(shù)的function的級(jí)聯(lián)調(diào)用呢？

var Thunk = function (fn){
    return function (...args){
        return functon (callback){
            return fn.call(this,...args, callback);
        }
    }
}

var readFileThunk = Thunk(fs.readFile);
readFileThunk(fileA)(callback);

可以看到上面的Thunk將兩個(gè)參數(shù)的函數(shù)改寫(xiě)成為了單個(gè)參數(shù)函數(shù)的級(jí)聯(lián)方式。或者說(shuō)Thunk是接收一個(gè)callback并執(zhí)行方法的函數(shù)。

這樣改寫(xiě)有什么用呢？Thunk函數(shù)現(xiàn)在可以用于 Generator 函數(shù)的自動(dòng)流程管理。

之前在講Generator的時(shí)候，如果Generator中有多個(gè)yield的異步方法，那么我們需要在next方法中傳入這些異步方法的執(zhí)行結(jié)果。

手動(dòng)傳入異步執(zhí)行結(jié)果當(dāng)然是可以的。但是有沒(méi)有自動(dòng)執(zhí)行的辦法呢？

let fs = require('fs');
let thunkify = require('thunkify');
let readFileThunk = thunkify(fs.readFile);

let gen = function * (){
    let r1 = yield readFileThunk('/tmp/file1');
    console.log(r1.toString());

    let r2 = yield readFileThunk('/tmp/file2');
    console.log(r2.toString());
}

let g = gen();

function run(fn){
    let gen = fn();

    function next (err, data){
        let result = gen.next(data);
        if(result.done) return;
        result.value(next);
    }
    next();
}

run(g);

gen.next返回的是一個(gè)對(duì)象，對(duì)象的value就是Thunk函數(shù)，我們向Thunk函數(shù)再次傳入next callback，從而出發(fā)下一次的yield操作。

有了這個(gè)執(zhí)行器，執(zhí)行Generator函數(shù)方便多了。不管內(nèi)部有多少個(gè)異步操作，直接把 Generator 函數(shù)傳入run函數(shù)即可。當(dāng)然，前提是每一個(gè)異步操作，都要是Thunk函數(shù)，也就是說(shuō)，跟在yield命令后面的必須是Thunk函數(shù)。

總結(jié)

Promise和Generator是ES6中引入的非常中要的語(yǔ)法，后面的koa框架就是Generator的一種具體的實(shí)現(xiàn)。我們會(huì)在后面的文章中詳細(xì)講解koa的使用，敬請(qǐng)期待。

本文作者：flydean程序那些事

本文鏈接：http://www.flydean.com/es6-promise-generator/

本文來(lái)源：flydean的博客

歡迎關(guān)注我的公眾號(hào):「程序那些事」最通俗的解讀，最深刻的干貨，最簡(jiǎn)潔的教程，眾多你不知道的小技巧等你來(lái)發(fā)現(xiàn)！

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

ES6中的Promise和Generator詳解

ES6中的Promise和Generator詳解

簡(jiǎn)介

Promise

什么是Promise

Promise的特點(diǎn)

Promise的優(yōu)點(diǎn)

Promise的缺點(diǎn)

Promise的用法

Promise的執(zhí)行順序

Promise.prototype.then()

Promise.prototype.catch()

Promise.all()

Promise.race()

Promise.resolve()

Promise.reject()

done()

finally()

Generator

什么是Generator

yield

yield *

異步操作的同步化表達(dá)

Generator 的異步應(yīng)用

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

Promise

Thunk函數(shù)和異步函數(shù)自動(dòng)執(zhí)行

總結(jié)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

ES6中的Promise和Generator詳解

簡(jiǎn)介

Promise

什么是Promise

Promise的特點(diǎn)

Promise的優(yōu)點(diǎn)

Promise的缺點(diǎn)

Promise的用法

Promise的執(zhí)行順序

Promise.prototype.then()

Promise.prototype.catch()

Promise.all()

Promise.race()

Promise.resolve()

Promise.reject()

done()

finally()

Generator

什么是Generator

yield

yield *

異步操作的同步化表達(dá)

Generator 的異步應(yīng)用

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

Promise

Thunk函數(shù)和異步函數(shù)自動(dòng)執(zhí)行

總結(jié)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频