javascript中Promise使用詳解

2022-04-13 04:00:07

做過前端開發的都知道，JavaScript是單執行緒語言，瀏覽器只分配給JS一個主執行緒，用來執行任務，但是每次一次只能執行一個任務，這些任務形成一個任務佇列排隊等候執行；但是某些任務是比較耗時的，如網路請求，事件的監聽，以及定時器，如果讓這些非常耗時的任務一一排隊等候執行，那麼程式執行效率會非常的低，甚至會導致頁面假死。因此，瀏覽器為這些耗時的任務開闢了新的執行緒，主要包括http請求執行緒、瀏覽器事件觸發執行緒、瀏覽器定時觸發器，但是這些任務都是非同步的，這就涉及到了前端開發的非同步回撥操作處理，前端處理非同步回撥操作用到的就是Async/Await和Promise。

而且在前端相關的面試的時候，面試官一般都會問到關於Promise相關的使用問題，甚至在筆試中也會出一些關於Promise和setTimeout的執行結果，這說明Promise的使用對於前端開發來說是非常重要的一個知識點。那麼本篇博文就來分享一下關於Promise的使用相關的知識點。

一、首先，要知道為什麼要用Promise語法？

在介紹Promise之前，首先來了解一下JavaScript的特性。搞前端開發的都知道JS是一個傳統的單執行緒程式設計，它裡面的程式執行都是同步的，只有一個主執行緒，但是隨著技術的發展，為了解決前期的缺陷，引入了非同步思想，也就是一個非同步過程的執行將不再與原有的序列有順序關係，這就解決了同步執行引起的執行效率不高的缺陷。用一句話解釋：非同步就是從主執行緒發射一個子執行緒來完成任務。

再來了解一下Promise，Promise是ES6新增加的，它是一個由ES6提供的類，其主要目的就是很好的處理複雜的非同步任務，但是它不是任何瀏覽器都能支援，比如一些舊版本的瀏覽器就不支援，只有蘋果的Safari10和Windows的Edge14版本以上瀏覽器才開始支援ES6特性的。

Promise作為替代回撥函數執行，作為非同步操作的處理方法；是JS非同步執行時候，回撥函數巢狀回撥函數的這一問題的解決方法，Promise更簡潔地控制函數執行流程。Promise物件其實表示是一個非同步操作的最終成敗，以及結果值，也就是一個代理值，是ES6中的一種非同步回撥解決方案。

Promise物件代理的值其實是未知的，狀態是動態可變的，因此Promise物件的狀態有三種：進行中、結束、失敗，它執行的時候，只能從進行中到失敗，或者是從進行中到成功。使用Promise物件只要是通過同步的表達形式來執行非同步程式碼。

①pending：初始狀態，既不成功，也不失敗；
②fulfilled：操作成功結束；
③rejected：操作失敗。

怎麼構造Promise？這裡簡單舉一個構造Promise的範例：

new Promise(function (resolve, reject) {

   // 要做的事情...

});

通過上面新構造一個Promise 物件好像並沒有看出它是怎樣很好的處理複雜的非同步任務的，那麼接下來就是Promise的核心操作。

二、接著，來了解一下回撥地獄(Callback Hell)

回撥地獄也叫回撥巢狀或者函數混亂的呼叫，通俗點講就是：需要傳送三個網路請求，第三個請求依賴第二個請求的結果，第二個請求依賴第一個請求的結果。不斷增加的巢狀使用。

回撥函數的弊病：

開發者閱讀起來很費神、吃力，不利於排查錯誤，更不能直接return，等等。如：

setTimeout(() => {
console.log(1)
setTimeout(() => {
console.log(2)
setTimeout(() => {
console.log(3)
},3000)
},2000)
},1000)

三、最後，也是本章的重頭戲，Promise的基本使用

Promise 建構函式只有一個引數，是一個函數，這個函數在構造之後會直接被非同步執行，所以我們稱之為起始函數。起始函數，也就是Promise的建構函式裡面有兩個引數：resolve和reject，該兩個參數列示的是非同步操作的結果，也就是Promise成功或失敗的狀態。

當 Promise 被構造時，起始函數會被非同步執行；resolve 和 reject 都是函數，其中呼叫 resolve 代表一切正常，reject 是出現異常時所呼叫的。

①非同步操作成功，呼叫resolve函數，將Promise物件的狀態改為fulfilled。
②非同步操作失敗，呼叫rejected函數，將Promise物件的狀態改為rejected。

舉一個使用例子，比較規範的寫法是把Promise封裝到一個函數裡然後同時返回一個Promise，如下所示：

const delay = (millisecond) => {
return new Promise((resolve, reject)=>{
if (typeof millisecond != 'number') reject(new Error(‘必須是number型別'));
setTimeout(()=> {
resolve(`延遲${millisecond}毫秒後輸出`)
}, millisecond)
})
}

上述例子可以看到Promise有兩個引數：resolve和reject。resolve：將非同步的執行從pending(請求)變成了resolve(成功返回)，是個函數執行返回；reject：見名知意為“拒絕”，從請求變成了"失敗"，是函數可以執行返回的一個失敗結果，推薦返回一個錯誤new Error()，這樣做更加清晰明瞭，更加規範。

（一） resolve函數

若傳入的是非Promise，基本資料型別的資料，則返回成功的Promise；若傳入的是Promise，則該物件的結果就決定了resolve的返回結果值。

let obj =new Promise((resolve,reject)=>{
resolve(‘yes');
});

//1.若傳入的是非Promise，基本資料型別的資料，則返回成功的Promise。

let p1= Promise.resolve('123')

//2.若傳入的是Promise，則該物件的結果就決定了resolve的返回結果值。

let p2 = Promise.resolve(obj);

//3.巢狀使用

let p3 = Promise.resolve(Promise.resolve(Promise.resolve('abc')));
console.log(p3);

（二） rejected函數

Promise.prototype.reject，始終返回的是失敗的Promise。

let p = Promise.reject(123123);
let p2 = Promise.reject('abc');
let p3 = Promise.reject(Promise.resolve('ok'));
console.log(p3);

（三）Promise的API

Promise的API裡面常用的幾個方法有：then、catch、finally、all、race等，具體的使用方法下面一一道來。

1. then

then指定成功或失敗的回撥到當前的Promise。then裡面拿到的Promise resolve裡面的資料，並返回一個Promise繼續提供使用；then方法返回的結果由then指定回撥函數決定。

範例如下所示：

let p=new Promise((resolve,reject)=>{
resolve(‘yes')
})

p.then(value=>{
console.log(value) //這裡的value就是上面的yes
},reason=>{
console.error(reason)
})

2. catch

catch指定失敗的回撥，返回的是失敗的結果。

範例如下所示：

let p =new Promise((resolve,reject)=>{
reject('失敗！')；
})

p.then(value=>{},reason=>{
console.error(reason);
})

p.catch(reason=>{
console.error(reason)
})

3. finally

finally用來進行收尾工作，無論Promise的狀態成功和失敗與否，當執行完回撥函數之後，都會去finally尋找最後的回撥函數來執行。

範例如下所示：

request.finally(function(){
// 最後，而且一定會執行的程式碼
})

4. Promise.all

在多個Promise任務一起執行的時候，若全部成功，則返回一個新的Promise，若其中有一個失敗，則返回失敗的Promise物件。

範例如下所示:

let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘yes');
}, 1000);
});

let p2 = Promise.resolve('ok');
let p3 = Promise.reject('Oh no');

//所有的
let result = Promise.all([p1, p2, p3]);
console.log(result);

5. Promise.race

在多個Promise任務同步執行的時候，返回最先結束的Promise任務結果，無論最後是成功還是失敗，通俗點將：先到先得。

範例如下所示：

let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘yes');
}, 1000);
});

let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
}, 500);
});

let result = Promise.race([p1, p2]);
console.log(result); //p2 ok