目錄

1. Promise 立即執行
2. Promise 三種狀態
3. Promise 不可逆性
4. 鏈式呼叫
5. Promise.then()回撥非同步性
6. Promise中的異常
7. Promise.resolve()
8. resolve vs reject

一、Promise立即執行

程式碼：

var p = new Promise(function(resolve, reject){
    console.log('create a promise');
    resolve('success');
});

console.log('after new Promise');

p.then(
    function
 
(val){
        console.log(val);
    },
    function(err){
        console.log(err);
    }
)

執行結果：

*   create a promise
*   after new Promise
*   success

解析：

Promise物件表示未來要發生的事情，但是在建立 new Promise(function(){}) 時，其中的匿名函式是會被立即執行的，只是其中的程式碼可以是非同步執行的｛ example: 體現在 p.then()會被非同步執行，但是一定要 這樣呼叫一次resolve(‘success’)，才會執行p.then()

二、Promise三種狀態

程式碼：

var p1 = new Promise(function(resolve, reject){
    resolve(1);
});

var p2 = new Promise(function(resolve, reject){
    setTimeout(function(){
        resolve(2);
    }, 500);    
});

var p3 = new Promise(function(){
    setTimeout(function(){
        resolve(3);
    }, 500
 
);
});

console.log(p1);
console.log(p2);
console.log(p3);

setTimeout(function(){
    console.log(p2);
}, 1000);
setTimeout(function(){
    console.log(p3);
}, 1000);

p1.then(function(val){
    console.log(val);
});
p2.then(function(val){
    console.log(val);
});
//此處的catch方法，等價於then(fn1, fn2)方法中的fn2。 當resolve()時，執行fn1；當reject時，執行fn2。
p3.catch(function(err){
    console.log(err);
});

執行結果：

Promise { 1 }
Promise { <pending> undefined }
Promise { <pending> undefined }
1
2
3
Promise { <resolved> 2 }
Promise { <rejected> 3 }

解析：

Promise的內部實現是一個狀態機，Promise有3鍾狀態：pending、resolved、rejected。
*當Promise剛剛建立完成時，處於pengding。
*當Promise中的函式執行resolve方法後，由之前的pending –> resolved
*當Promise中的函式不執行resolve，而是執行了reject方法，那會由之前的pending –> rejected

三、Promise 狀態的不可逆性

程式碼：

var p1 = new Promise(function(resolve, reject){
    resolve('success1');
    resolve('success2');
});

var p2 = new Promise(function(resolve, reject){
    resolve('success3');
    reject('reject');   
});

p1.then(function(val){
    console.log(val);
});
p2.then(function(val){
    console.log(val);
});

執行結果：

success1
success

解析：

Promise的狀態一定確定下來時，Promise的狀態和值就固定下來了，不論如何呼叫 resolve() 和 reject() ，都不能改變它的值和狀態。

四、鏈式呼叫

程式碼：

var p = new Promise(function(resolve, reject){
    resolve(1);
});

p.then(     //第1個then
    function(val){
        console.log(val);
        return val*2;
    }
).then(     //第2個then
    function(val){
        console.log(val);
    }
).then(     //第3個then
    function(val){
        console.log(val);
        return Promise.resolve('resolve');
    }
).then(     //第4個then
    function(val){
        cosnole.log(val);
        return Promise.reject('reject');
    }
).then(     //第5個then
    function(val){
        console.log('resolve=' + val);
    }, function(err){
        console.log('reject=' + err);
    }
);

執行結果：

1
2
undefined
resolve
reject=reject

解析：

Promise物件的then方法返回一個新的Promise物件，因此可以通過鏈式呼叫then方法。then方法接收2個引數，第一個引數是Promise執行成功時的回撥；第二個是Promise執行失敗的回撥。2個函式只有一個被呼叫，函式的返回值將被用作建立then返回的Promise物件，這2個引數的返回值可以是一下3種情況中的一種：
* return 一個同步值 或者 undefined (當沒有一個有效的返回值時，預設返回undefined，then方法將返回一個resolved狀態的Promise物件，Promise物件的值就是這個返回值。)
* return 另一個Promise， then方法將根據這個Promise的狀態和值建立一個新的Promise物件返回。
* throw 一個同步異常，then方法將返回一個rejected狀態的Promise和該異常值。

所以 第一個then返回值是：2；第二個then沒有返回值，預設返回undefined；第三個then會返回一個狀態是resolved值是resolve的新Promise物件；第四個then會返回一個狀態為rejected值為reject的新Promise物件；第五個then因為執行失敗，會走第二個函式。

五、Promise.then()回撥非同步性

程式碼：

var p1 = new Promise(function(resolve, reject){
    resolve('success');
});

p1.then(function(val){
    console.log(val);
});

console.log("which one is called first ?");

執行結果：

which one is called first ?
success

解析：

Promise接收的函式是同步執行的，但是then中的回撥函式的執行則是非同步的。

因此‘sucees’會在後面輸出。

為什麼then會優先於定時器先執行？
*是因為等待佇列（或者說是任務佇列）其實是分為兩個： macrotask 和 microtask；promise是存放在microtasks中，而定時器是存放在macrotasks中，但是在每次”事件迴圈”後會先執行microtask中的內容，並且當這些 microtask 執行結束後還能繼續新增 microtask 一直到真個 microtask 佇列執行結束（這也就是所說的”拆箱”），直到當前microtask執行結束之後，才會執行macrotask中的任務，並且往下進行”事件迴圈”所以才會出現如上程式碼輸出的結果。

六、Promise中的異常

程式碼：

var p1 = new Promise(function(resolve, reject){
    foo.bar();//異常執行
    resolve(1);
});

p1.then(
    function(val){
        console.log('p1 then val：' + val);
    }, function(err){
        console.log('p1 then err：' + val);
    }
).then(
    function(val){
        console.log('p1 then val：' + val);
    }, function(err){
        console.log('p1 then err：' + val);
    }
);

var p2 = new Promise(function(resolve, reject){
    resolve(2);
});

p2.then(
    function(val){
        console.log('p2 then val：' + val);
        foo.bar();//異常執行
    }, function(err){
        console.log('p2 then err：' + val);
    }
).then(
    function(val){
        console.log('p2 then val：' + val);
    }, function(err){
        console.log('p2 then err：' + val);
        return 1;
    }
).then(
    function(val){
        console.log('p2 then val：' + val);
    }, function(err){
        console.log('p2 then err：' + val);
    }
);

執行結果：

p1 then err: ReferenceError: foo is not defined
p2 then value: 2
p1 then value: undefined
p2 then err: ReferenceError: foo is not defined
p2 then value: 1

解析：

Promise中的異常有then引數中的第二個回撥函式 (Promise執行失敗的回撥) 處理，異常資訊作為Promise的值。異常一旦得到處理， then後返回的後續Promise物件恢復正常，並會被Promise執行成功的回撥函式處理。 另外需要注意：p1、p2多級then的回撥函式是交替執行的，這正是由於Promise then回撥的非同步性決定的。

七、Promise中的異常

程式碼：

var p1 = Promise.resolve(1);
var p2 = Promise.resolve(p1);
var p3 = new Promise(function(resolve, reject){
    resolve(1);
});
var p4 = new Promise(function(resolve, reject){
    resolve(p1);
});

console.log( p1 === p2 );
console.log( p1 === p3 );
console.log( p1 === p4 );
console.log( p3 === p4 );

p4.then(function(val){
    console.log('p4=' + val);
});

p2.then(function(val){
    console.log('p2=' + val);
});

p1.then(function(val){
    console.log('p1=' + val);
});

執行結果：

true
false
false
false
p2=1
p1=1
p4=1

解析：
Promise.resolve(…)可以接收一個值或者是一個Promise物件作為引數。
* 當引數為普通值時，他返回一個resolved狀態的Promise物件，物件的值就是這個引數。
* 當引數為一個Promise物件時，會直接返回這個Promise物件。
* 使用new建立的Promise物件是一個全新的物件。
所以p1===p2,所以p1不等於p3,p4。
p4之所以是最先呼叫最後輸出是因為：
p4接收的是一個promise物件p1，resolve會對p1進行’拆箱’，獲取p1的值。

八.resolve vs reject

程式碼：

var p1 = new Promise(function(resolve, reject){
    resolve(Promise.resolve('resolve'));
});

var p2 = new Promise(function(resolve, reject){
    resolve(Promise.reject('reject'));
});

var p3 = new Promise(function(resolve, reject){
    reject(Promise.resolve('resolve'));
});


p1.then(
        function(val){
            console.log('p3[val]=' + val );
        },
        function(err){
            console.log('p3[err]=' + err ); 
        }
    )

p2.then(
        function(val){
            console.log('p3[val]=' + val );
        },
        function(err){
            console.log('p3[err]=' + err ); 
        }
    )

p3.then(
        function(val){
            console.log('p3[val]=' + val );
        },
        function(err){
            console.log('p3[err]=' + err ); 
        }
    )

執行結果：

*   p3[err]=[object Promise]
*   p3[val]=resolve
*   p3[err]=reject

解析：
* resolve 可以’拆箱’Promise物件； reject不能’拆箱’Promise物件。