ES6的promise的學習

1.Promise的含義：

Promise是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6將其寫進了語言標准，統一了用法，原生提供了Promise對象。

所謂Promise，簡單說就是一個容器，里面保存着某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise是一個對象，從它可以獲取異步操作的消息。Promise提供統一的API，各種異步操作都可以用同樣的方法進行處理。

Promise對象有以下兩個特點。

（1）對象的狀態不受外界影響。Promise對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱Fulfilled）和Rejected（已失敗）。只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。

（2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態改變，只有兩種可能：從Pending變為Resolved和從Pending變為Rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對Promise對象添加回調函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。

 

2.Promise的基本實現

var promiseCount=0;
function testPromise(){
    var thisPromiseCount = ++promiseCount;
    var p=new Promise(function(resolve, reject){
        //resolve成功  reject失敗
        setTimeout(function(){
            if(thisPromiseCount<2){
                resolve(thisPromiseCount);
            }else{
                reject(thisPromiseCount)
            }
        },Math.random()*2000+1000);
    });

    p.then(function(val){
        console.log("end: "+val+" Promise被滿足了(異步代碼結束)");
        return 'success';
    },function(error){
        console.error('error:'+error+"Promise失敗(異步代碼結束)");
        return 'error'
    }).then(function(val){
        console.log(val);
    })
  }

  testPromise();

上面是一個簡單的Promise的基本實現。Promise構造函數接受一個函數作為參數，該函數的兩個參數分別是resolve和reject。resolve表示成功后執行的方法，reject是失敗后執行的方法；new Promise會生成一實例，實例生成后，可以用then方法分別指定Resolved狀態和Reject狀態的回調函數。then有兩個回調函數，第一個是成功后的回調，第二個是失敗后的回調。

 

 

3. Promise.prototype.then

then方法返回的是一個新的Promise實例（注意，不是原來那個Promise實例）。因此可以采用鏈式寫法，即then方法后面再調用另一個then方法。第一個參數是resolved的回調函數，第二個是可選的，rejected回調函數

var getJSON = function(url) {
    var promise = new Promise(function(resolve, reject){
        var client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();

        function handler() {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status === 200) {
                resolve(this.response);
            } else {
                reject(new Error(this.statusText));
            }
        };
    });

    return promise;
};
getJSON("/post/1.json").then(function(post) {
    return getJSON(post.commentURL);
}).then(function funcA(comments) {
    console.log("Resolved: ", comments);
}, function funcB(err){
    console.log("Rejected: ", err);
});

上面的代碼使用then方法，依次指定了兩個回調函數。第一個回調函數完成以后，會將返回結果作為參數，傳入第二個回調函數。

 

4. Promise.prototype.all

 

Promise.all方法用於將多個Promise實例，包裝成一個新的Promise實例。
數組或者可以不是數組，但必須具有Iterator接口，且返回的每個成員都是Promise實例。
（1）只有proList的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時proList的返回值組成一個數組，傳遞給p的回調函數。
（2）只要proList之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。

ar arr=[1,2,3];
function getPro(a){
    return new Promise(function(resolve,reject){
        if(a>2){
            reject(a);
        }
        resolve(a)
    })
}
var proList=arr.map(function(id){
    return getPro(id);
});

Promise.all(proList).then(function(val){
    console.log(val);
}).catch(function(e){
    console.log('error:'+e);
});

 

上面的例子是一個簡單的promise.all的實現，prolist里面的三個promise實例，如果三個都返回resolve，那么就會走第一個then里面的方法，如果有一個返回reject，那么久會走到最后的catch方法；

 

4.Promise.prototype.race

Promise.race(),參數跟Promise.all參數一樣，
下面例子只要p1、p2之中有一個實例率先改變狀態，p3的狀態就跟着改變。那個率先改變的Promise實例的返回值，就傳遞給p3的回調函數。p3的回調是看率先改變狀態p1或者p2的promise里面的函數resolve還是reject，
如果率先改變狀態的promise是reject，那么就會走catch回調，反之會走then的第一個回調方法；

 

var p1=new Promise(function(resolve,reject){
    setTimeout(function(){
        console.log(p1);
        resolve('p1:=>success');
    },Math.random()*1000)
});
var p2=new Promise(function(resolve,reject){
    setTimeout(function(){
        console.log(p2);
        reject('p2:=>error');
    },Math.random()*1000)
});

var p3=Promise.race([p1,p2]).then(function(data){
    console.log(p3);
    console.log(data);
}).catch(function(error){
    console.log(p3);
    console.log(error);
});

 

5.Promise.prototype.catch

catch捕獲錯誤 會捕獲所有catch上面的所有then方法里面的錯誤；

 

/**
 * 由於沒有指定使用try...catch語句，就冒泡到最外層，成了未捕獲的錯誤。用catch捕獲不了，這個錯誤是在Promise函數體外拋出的。
 * @type {Promise}
 */
var promise = new Promise(function (resolve, reject) {
    resolve("ok");
    setTimeout(function () {
        throw new Error('test')
    }, 0)
});
promise.then(function (value) {
    console.log(value)
}).catch(function (e) {
    console.log(e);
});

/**
 * 需要注意的是，catch方法返回的還是一個Promise對象，因此后面還可以接着調用then方法。
 * @returns {Promise}
 */
var someAsyncThing = function () {
    return new Promise(function (resolve, reject) {
        // 下面一行會報錯，因為x沒有聲明
        resolve(x + 2);
    });
};

someAsyncThing()
.catch(function (error) {
        console.log('oh no', error);
})
.then(function () {
        console.log('carry on');
});

 

6.Promise.prototype.resolve和Promis.prototype.reject;

有時需要將現有對象轉為Promise對象，Promise.resolve方法就起到這個作用， Promise.resolve()有以下三種使用情節，promise.reject跟promise.resolve使用方法一樣；

/**
 *例如下面p1等價於p2
 * @type {Promise.<string>}
 */
var p1=Promise.resolve('foo');
var p2=new Promise(function(resolve,reject){
    resolve('foo');
});
p1.then(function(data){
    console.log(data); //foo
});

/**
 *沒有參數的時候，回掉函數也沒有參數
 * @type {Promise.<string>}
 */
var p3=Promise.resolve();
p3.then(function(){
    console.log('resolve無參數!');
});

/**
 *  當一個對象有then這個參數的時候；
 * @type {Promise.<string>}
 */
var enable={
    then:function(resolve,reject){
        resolve(50);
    }
};
var p4=Promise.resolve(enable);
p4.then(function(s){
    console.log(s);
});

參考網址：http://es6.ruanyifeng.com/#docs/promise

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise