面向面試題和實際使用談promise
“金三銀四，金九銀十”，都是要收穫的季節。面對各種面試題，各種概念、原理都要去記，挺枯燥的。本文是面向面試題和實際使用談一下Promise。
Promise是什麼？
Promise是JS非同步程式設計中的重要概念，非同步抽象處理物件，是目前比較流行Javascript非同步程式設計解決方案之一。這句話說的很明白了，Promise是一種用於解決非同步問題的思路、方案或者物件方式。在js中，經常使用非同步的地方是Ajax互動。比如在es5時代，jQuery的ajax的使用success來完成非同步的：
$.ajax({ url:'/xxx', success:()=>{},error: ()=>{} })
這種方法可以清楚的讓讀程式碼的人明白那一部分是Ajax請求成功的回撥函式和失敗的回撥函式。但是問題來了，當一次請求需要連續請求多個介面時，這段程式碼彷彿進入了一團亂麻中：
// 第一次 $.ajax({ url:'/xxx', success:()=>{ // 第二次 $.ajax({ url:'/xxx', success:()=>{ // 第三次 $.ajax({ url:'/xxx',success:()=>{ // 可能還會有 }, error: ()=>{} }) }, error: ()=>{} }) }, error: ()=>{} })
也許因為success和error這兩個函式的存在，理解這段程式碼會很簡單，但是當我們更改需求的時候，這將成為一個棘手的問題。這就是回撥地獄。
當然，這是es5時代。當js這門語言發展到es6時代時，Promise的出現給非同步帶來了變革。Promise提供一個then，來為非同步提供回撥函式：
$.ajax({ url:'/xxx', }).then( ()=>{ // 成功的回撥 }, ()=>{ // 失敗的回撥 })
而其先進之處則是，可以在then方法中繼續寫Promise物件並返回，然後繼續呼叫then來進行回撥操作。
Promise的用法
說完了Promise是什麼，下面讓我們研究一下Promise怎麼使用。首先，Promise是一個物件，因此，我們使用new的方式新建一個。然後給它傳一個函式作為引數，這個函式呢也有兩個引數，一個叫resolve(決定)，一個叫reject(拒絕)，這兩個引數也是函式。緊接著，我們使用then來呼叫這個Promise：
const fn = new Promise(function (resolve, reject) { setTimeout(()=>{ let num = Math.ceil(Math.random() * 10) // 假設num為7 if (num > 5) { resolve(num) //返回7 } else { reject(num) } },2000) }) fn.then((res)=>{ console.log(res) // 7 },(err)=>{ console.log(err) })
這就是最簡單的Promise的使用。假設2秒鐘之後生成隨機數為7，因此resolve回撥函式執行，then走第一個函式，console.log(7)。假設2秒鐘之後生成隨機數為3，因此reject回撥函式執行，then走第二個函式，console.log(3)。
那你可能說了，Promise要是就這點能耐也沒什麼大不了的啊？我們上面說了Promise的先進之處在於可以在then方法中繼續寫Promise物件並返回，然後繼續呼叫then來進行回撥操作：
fn = new Promise(function (resolve, reject) { let num = Math.ceil(Math.random() * 10) if (num > 5) { resolve(num) } else { reject(num) } }) // 第一次回撥 fn.then((res)=>{ console.log(`res==>${res}`) return new Promise((resolve,reject)=>{ if(2*res>15){ resolve(2*res) }else{ reject(2*res) } }) }，(err)=>{ console.log(`err==>${err}`) }).then((res)=>{ // 第二次回撥 console.log(res) }，(err)=>{ console.log(`err==>${err}`) })
這就可以代替了上面類似es5時代的jQurey的success的巢狀式的回撥地獄的產生，讓程式碼清爽了許多。這裡的resolve就相當於以前的success。
Promise的原理
在Promise的內部，有一個狀態管理器的存在，有三種狀態：pending、fulfilled、rejected。
(1) promise 物件初始化狀態為 pending。
(2) 當呼叫resolve(成功)，會由pending => fulfilled。
(3) 當呼叫reject(失敗)，會由pending => rejected。
因此，看上面的的程式碼中的resolve(num)其實是將promise的狀態由pending改為fulfilled，然後向then的成功回掉函式傳值，reject反之。但是需要記住的是注意promsie狀態 只能由 pending => fulfilled/rejected, 一旦修改就不能再變（記住，一定要記住，下面會考到）。
當狀態為fulfilled（rejected反之）時，then的成功回撥函式會被呼叫，並接受上面傳來的num，進而進行操作。promise.then方法每次呼叫，都返回一個新的promise物件 所以可以鏈式寫法（無論resolve還是reject都是這樣）。
Promise的幾種方法
then
then方法用於註冊當狀態變為fulfilled或者reject時的回撥函式：
// onFulfilled 是用來接收promise成功的值 // onRejected 是用來接收promise失敗的原因 promise.then(onFulfilled, onRejected);
需要注意的地方是then方法是非同步執行的。
// resolve(成功) onFulfilled會被呼叫 const promise = new Promise((resolve, reject) => { resolve('fulfilled'); // 狀態由 pending => fulfilled }); promise.then(result => { // onFulfilled console.log(result); // 'fulfilled' }, reason => { // onRejected 不會被呼叫 }) // reject(失敗) onRejected會被呼叫 const promise = new Promise((resolve, reject) => { reject('rejected'); // 狀態由 pending => rejected }); promise.then(result => { // onFulfilled 不會被呼叫 }, reason => { // onRejected console.log(rejected); // 'rejected' })
catch
catch在鏈式寫法中可以捕獲前面then中傳送的異常。
fn = new Promise(function (resolve, reject) { let num = Math.ceil(Math.random() * 10) if (num > 5) { resolve(num) } else { reject(num) } }) fn..then((res)=>{ console.log(res) }).catch((err)=>{ console.log(`err==>${err}`) })
其實，catch相當於then(null,onRejected),前者只是後者的語法糖而已。
resolve、reject
Promise.resolve 返回一個fulfilled狀態的promise物件，Promise.reject 返回一個rejected狀態的promise物件。
Promise.resolve('hello').then(function(value){
console.log(value);
});
Promise.resolve('hello');
// 相當於
const promise = new Promise(resolve => {
resolve('hello');
});
// reject反之
all
但從字面意思上理解，可能為一個狀態全部怎麼樣的意思，讓我看一下其用法，就可以看明白這個靜態方法：
var p1 = Promise.resolve(1), p2 = Promise.reject(2), p3 = Promise.resolve(3); Promise.all([p1, p2, p3]).then((res)=>{ //then方法不會被執行 console.log(results); }).catch((err)=>{ //catch方法將會被執行，輸出結果為：2 console.log(err); });
大概就是作為引數的幾個promise物件一旦有一個的狀態為rejected，則all的返回值就是rejected。
當這幾個作為引數的函式的返回狀態為fulfilled時，至於輸出的時間就要看誰跑的慢了：
let p1 = new Promise((resolve)=>{ setTimeout(()=>{ console.log('1s') //1s後輸出 resolve(1) },1000) }) let p10 = new Promise((resolve)=>{ setTimeout(()=>{ console.log('10s') //10s後輸出 resolve(10) },10000) }) let p5 = new Promise((resolve)=>{ setTimeout(()=>{ console.log('5s') //5s後輸出 resolve(5) },5000) }) Promise.all([p1, p10, p5]).then((res)=>{ console.log(res); // 最後輸出 })
這段程式碼執行時，根據看誰跑的慢的原則，則會在10s之後輸出[1,10,5]。over，all收工。
race
promise.race()方法也可以處理一個promise例項陣列但它和promise.all()不同，從字面意思上理解就是競速，那麼理解起來上就簡單多了，也就是說在陣列中的元素例項那個率先改變狀態，就向下傳遞誰的狀態和非同步結果。但是，其餘的還是會繼續進行的。
let p1 = new Promise((resolve)=>{ setTimeout(()=>{ console.log('1s') //1s後輸出 resolve(1) },1000) }) let p10 = new Promise((resolve)=>{ setTimeout(()=>{ console.log('10s') //10s後輸出 resolve(10) //不傳遞 },10000) }) let p5 = new Promise((resolve)=>{ setTimeout(()=>{ console.log('5s') //5s後輸出 resolve(5) //不傳遞 },5000) }) Promise.race([p1, p10, p5]).then((res)=>{ console.log(res); // 最後輸出 })
因此，在這段程式碼的結尾我們的結果為
1s 1 5s 10s
我們可以根據race這個屬性做超時的操作：
//請求某個圖片資源 let requestImg = new Promise(function(resolve, reject){ var img = new Image(); img.onload = function(){ resolve(img); } }); //延時函式，用於給請求計時 let timeOut = new Promise(function(resolve, reject){ setTimeout(function(){ reject('圖片請求超時'); }, 5000); }); Promise.race([requestImg, timeout]).then((res)=>{ console.log(res); }).catch((err)=>{ console.log(err); });
Promise相關的面試題
1.
const promise = new Promise((resolve, reject) => { console.log(1); resolve(); console.log(2); }); promise.then(() => { console.log(3); }); console.log(4);
輸出結果為：1，2，4，3。
解題思路：then方法是非同步執行的。
2.
const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('success') reject('error') }, 1000) }) promise.then((res)=>{ console.log(res) },(err)=>{ console.log(err) })
輸出結果：success
解題思路：Promise狀態一旦改變，無法在發生變更。
3.
Promise.resolve(1) .then(2) .then(Promise.resolve(3)) .then(console.log)
輸出結果：1
解題思路：Promise的then方法的引數期望是函式，傳入非函式則會發生值穿透。
4.
setTimeout(()=>{ console.log('setTimeout') }) let p1 = new Promise((resolve)=>{ console.log('Promise1') resolve('Promise2') }) p1.then((res)=>{ console.log(res) }) console.log(1)
輸出結果：
Promise1
1
Promise2
setTimeout
解題思路：這個牽扯到js的執行佇列問題，整個script程式碼，放在了macrotask queue中，執行到setTimeout時會新建一個macrotask queue。但是，promise.then放到了另一個任務佇列microtask queue中。script的執行引擎會取1個macrotask queue中的task，執行之。然後把所有microtask queue順序執行完，再取setTimeout所在的macrotask queue按順序開始執行。（具體參考https://www.zhihu.com/question/36972010）
5.Promise.resolve(1) .then((res) => { console.log(res); return 2; }) .catch((err) => { return 3; }) .then((res) => { console.log(res); });
輸出結果：1 2
解題思路：Promise首先resolve(1)，接著就會執行then函式，因此會輸出1，然後在函式中返回2。因為是resolve函式，因此後面的catch函式不會執行，而是直接執行第二個then函式，因此會輸出2。
6.
const promise = new Promise((resolve, reject) => { setTimeout(() => { console.log('開始'); resolve('success'); }, 5000); }); const start = Date.now(); promise.then((res) => { console.log(res, Date.now() - start); }); promise.then((res) => { console.log(res, Date.now() - start); });
輸出結果：
開始
success 5002
success 5002
解題思路：promise 的.then或者.catch可以被呼叫多次，但這裡 Promise 建構函式只執行一次。或者說 promise 內部狀態一經改變，並且有了一個值，那麼後續每次呼叫.then 或者.catch都會直接拿到該值。
7.
let p1 = new Promise((resolve,reject)=>{ let num = 6 if(num<5){ console.log('resolve1') resolve(num) }else{ console.log('reject1') reject(num) } }) p1.then((res)=>{ console.log('resolve2') console.log(res) },(rej)=>{ console.log('reject2') let p2 = new Promise((resolve,reject)=>{ if(rej*2>10){ console.log('resolve3') resolve(rej*2) }else{ console.log('reject3') reject(rej*2) } })
return p2 }).then((res)=>{ console.log('resolve4') console.log(res) },(rej)=>{ console.log('reject4') console.log(rej) })
輸出結果：
reject1
reject2
resolve3
resolve4
12
解題思路：我們上面說了Promise的先進之處在於可以在then方法中繼續寫Promise物件並返回。
8.重頭戲！！！！實現一個簡單的Promisefunction Promise(fn){ var status = 'pending' function successNotify(){ status = 'fulfilled'//狀態變為fulfilled toDoThen.apply(undefined, arguments)//執行回撥 } function failNotify(){ status = 'rejected'//狀態變為rejected toDoThen.apply(undefined, arguments)//執行回撥 } function toDoThen(){ setTimeout(()=>{ // 保證回撥是非同步執行的 if(status === 'fulfilled'){ for(let i =0; i< successArray.length;i ++) { successArray[i].apply(undefined, arguments)//執行then裡面的回掉函式 } }else if(status === 'rejected'){ for(let i =0; i< failArray.length;i ++) { failArray[i].apply(undefined, arguments)//執行then裡面的回掉函式 } } }) } var successArray = [] var failArray = [] fn.call(undefined, successNotify, failNotify) return { then: function(successFn, failFn){ successArray.push(successFn) failArray.push(failFn) return undefined // 此處應該返回一個Promise } } }
解題思路：Promise中的resolve和reject用於改變Promise的狀態和傳參，then中的引數必須是作為回撥執行的函式。因此，當Promise改變狀態之後會呼叫回撥函式，根據狀態的不同選擇需要執行的回撥函式。
總結
首先，Promise是一個物件，如同其字面意思一樣，代表了未來某時間才會知道結果的時間，不受外界因素的印象。Promise一旦觸發，其狀態只能變為fulfilled或者rejected，並且已經改變不可逆轉。Promise的建構函式接受一個函式作為引數，該引數函式的兩個引數分別為resolve和reject，其作用分別是將Promise的狀態由pending轉化為fulfilled或者rejected，並且將成功或者失敗的返回值傳遞出去。then有兩個函式作為Promise狀態改變時的回撥函式，當Promise狀態改變時接受傳遞來的引數並呼叫相應的函式。then中的回撥的過程為非同步操作。catch方法是對.then(null,rejectFn)的封裝（語法糖），用於指定發生錯誤時的回掉函式。一般來說，建議不要再then中定義rejected狀態的回撥函式，應該使用catch方法代替。all和race都是競速函式，all結束的時間取決於最慢的那個，其作為引數的Promise函式一旦有一個狀態為rejected，則總的Promise的狀態就為rejected；而race結束的時間取決於最快的那個，一旦最快的那個Promise狀態發生改變，那個其總的Promise的狀態就變成相應的狀態，其餘的引數Promise還是會繼續進行的。
當然在es7時代，也出現了await/async的非同步方案，這會是我們以後談論的。
