一道筆試題引起的Promise筆記

前言

近來參加校招筆試，發現有好幾道關於Promise的題目。然而我都沒有了解過。因此，這篇文章以網易筆試的一道題開始，記錄關於Promise的那些事。
文章地址：http://lsxj615.com/2016/08/04...

筆試題

console.log(1);
new Promise(function (resolve, reject){
    reject(true);
    window.setTimeout(function (){
        resolve(false);
    }, 0);
}).then(function(){
    console.log(2);
}, function(){
    console.log(3);
});
console.log(4);

請問輸出結果是什麼？在揭曉答案以前，咱們仍是先來了解一下Promise吧。

Promise是什麼

Promise 對象用於異步(asynchronous)計算.。一個Promise對象表明着一個還未完成，但預期未來會完成的操做。
Promise 對象是一個返回值的代理，這個返回值在promise對象建立時未必已知。它容許你爲異步操做的成功或失敗指定處理方法。 這使得異步方法能夠像同步方法那樣返回值：異步方法會返回一個包含了原返回值的 promise 對象來替代原返回值。

Promise的API

Constructor

使用new來調用Promise的構造器進行實例化

var promise = new Promise(function(resolve, reject){
    //異步處理
    //處理結束後，調用resolve或reject
});

Instance Method

對經過new生成的promise對象爲了設置其在resolve(成功)/reject(失敗)時調用的回調函數可使用promise.then()實例方法

promise.then(onFulfilled, onRejected);
//以防誤解，上述的即爲如下這種形式
promise.then(function(){...}, function(){...});

當resolve(成功)時，會調用onFulfilled函數；
reject(失敗)時，會調用onRejected函數。
這也對應了前面筆試題中,onFulfilled其實就是console.log(2)，也就是說成功時會調用console.log(2)，而失敗時，onRejected就是調用console.log(3)。

若只想處理異常狀況的函數，可promise.then(undefined, onRejected)，固然更好的選擇是用promise.catch()來處理。兩者效果相同。

promise.then(function (value) {
    console.log(value); 
}).catch(function (error) {
    console.log(error);
});

//等同於如下形式
promise.then(function (value) {
    console.log(value);
}, function (error) {
    console.log(error);
});

其餘方法

• Promise.all()

• Promise.race()

• Promise.resolve()

• Promise.reject()

Promise的狀態

Promise對象有三種狀態

• pending 初始狀態，既不是fulfilled也不是rejected

• fulfilled 成功。此時調用onFulfilled

• rejected 失敗。此時調用onRejected

Fulfilled和Rejected均可以表示爲Settled。
由下圖能夠了解，最初Promise爲pending狀態，在執行後轉爲settled狀態，而settled狀態分爲兩種：在成功後轉爲fulfilled，執行.then(onFulfilled)方法；在失敗後轉爲reject，執行.then(onRejecttion)或.catch(onRejecttion)，進行異步操做，再返回Promise對象，轉爲pending狀態。

Promise.resolve & Promise.reject

• Promise.resolve

  Promise.resolve(value)可認爲是new Promise()方法的快捷方式

Promise.value(value);

//等同於如下代碼

new Promise(function(resolve){
    resolve(value);
});

此時這個promise對象會進入fulfilled狀態。而resolve(value)中的value會傳遞給後面then中指定的onFulfilled函數。

Promise.resolve(value)返回值也是一個promise對象，因此能夠進行鏈式調用.

• Promise.reject

  Promise.reject(error)與上述靜態方法相似，也是new Promise()方法的快捷方式

Promise.reject(new Error("出錯了"));
//等同於如下代碼
new Promise(function(resolve, reject){
    reject(new Error("出錯了"));
});

這段代碼則是調用該promise對象經過then指定的onRejected函數，並將錯誤對象(Error)傳遞給onRejected函數。

筆試題解答

話很少說，貼圖就是。

能夠知道，當promise調用了reject(true)方法，則傳遞true這個參數給'then'指定的onRejected函數，即題目中的function(){console.log(3);}。但因爲.then中指定的方法調用是異步執行的，因此會先執行console.log(4);

本篇文章僅是簡單介紹promise。欲瞭解更多內容，可查看如下資料。謝謝~

資料來源：

• Promise- Javascipt | MDN

• JavaScript Promise迷你書（中文版)