@

• 1. 為什么需要 Promise
• 2. Promise
• 3. then3.1 正常 return3.2 拋出異常3.3 返回 Promise
• 4. catch
• 5. finally
• 6. 其他方法6.1 Promise.all()6.2 Promise.race()6.3 Promise.reject()6.4 Promise.resolve()

小伙伴們知道，松哥最近在錄 TienChin 項目，用的 RuoYi-Vue 腳手架，前端關(guān)于網(wǎng)絡(luò)請求的地方，很多都涉及到了 Promise，為了讓小伙伴們能更好的理解前端代碼，咱們抽空整一篇文章和大家聊聊整個 Promise。

1. 為什么需要 Promise

假設(shè)我現(xiàn)在有這樣一個需求，用戶先去登錄，登錄成功之后，再去服務(wù)端獲取用戶信息，獲取到用戶信息之后再去服務(wù)端獲取前端的動態(tài)菜單。一般我們的 Ajax 請求都是異步形式，為了確保上一步操作成功再執(zhí)行下一個請求，所以最終發(fā)出的請求偽代碼類似下面這樣：

$.ajax({ url:’/login’, data:loginForm, success: function (data) { //登錄成功 $.ajax({ url:’/getInfo’, success: function (userInfo) { //獲取用戶信息成功 $.ajax({ url: ‘/getMenus’, success: function (menus) { //獲取菜單成功 } }) } }) }})

為了確保一個異步任務(wù)執(zhí)行完成后，再執(zhí)行下一個異步任務(wù)，我們不得不在回調(diào)函數(shù)中不停的寫下去，上面我舉的例子是三個請求嵌套，實際上可能會更多。。。這就是前端所謂的回調(diào)地獄。而 Promise 就是來解決回調(diào)地獄的。

2. Promise

Promise 從字面上理解，就是承諾，承諾將來在某一個時間會做某一件事。通過 Promise 我們可以將異步任務(wù)執(zhí)行的代碼和處理的代碼完全分離開。

還是第一小節(jié)這個例子，如果我們用 Promise 寫，那么方式如下：

function login(resolve, reject) { setTimeout(() => { let number = Math.random(); if (number > 0.5) { resolve(“login success”) } else { reject(“login failed”) } }, 2000);}function getInfo(resolve, reject) { setTimeout(() => { let number = Math.random(); if (number > 0.5) { resolve(“getInfo success”) } else { reject(“getInfo failed”) } }, 2000);}function getMenus(resolve, reject) { setTimeout(() => { let number = Math.random(); if (number > 0.5) { resolve(“getMenus success”) } else { reject(“getMenus failed”) } }, 2000);}new Promise(login).then(data => { console.log(“login:”, data); return new Promise(getInfo);}).then(data => { console.log(“getInfo:”, data); return new Promise(getMenus);}).then(data => { console.log(“getMenus”, data);}).catch(err => { console.log(“err:”, err);})

我們在 Promise 中寫異步任務(wù)執(zhí)行的代碼，在上面的案例中，松哥通過 setTImeout 方法模擬了一個耗時操作，異步任務(wù)執(zhí)行完畢后，我們調(diào)用 resolve 方法返回調(diào)用的結(jié)果（會進(jìn)入到下一步的 then 中），也可以調(diào)用 reject 方法表示調(diào)用失敗（會進(jìn)入到 catch 中）。

3. then

then 中的返回值可以分為三種情況。

3.1 正常 return

then 中方法的參數(shù)，是上一個 Promise 對象 resolve 的值，一個 Promise 對象可以有多個 then，例如上面案例的登錄功能，我們可以一直 then 下去：

function login(resolve, reject) { setTimeout(() => { let number = Math.random(); if (number > 0.5) { resolve(“login success”) } else { reject(“login failed”) } }, 2000);}new Promise(login).then(data => { console.log(“then1:”, data); return data;}).then(data => { console.log(“then2:”, data); return data;}).then(data => { console.log(“then3:”, data);}).catch(err => { console.log(“err:”, err);})

這樣可以一直返回，這有點像我們 Java 中的流式編程。

3.2 拋出異常

在 then 中，我們可以對返回結(jié)果進(jìn)行判斷，不滿足條件也可以直接拋出異常，這樣就會進(jìn)入到最近的 catch 代碼塊中。如下案例：

function login(resolve, reject) { setTimeout(() => { let number = Math.random(); if (number > 0.5) { resolve(“login success”) } else { reject(“login failed”) } }, 2000);}new Promise(login).then(data => { console.log(“then1:”, data); throw new Error(“出錯啦”);}).then(data => { console.log(“then2:”, data); return data;}).then(data => { console.log(“then3:”, data);}).catch(err => { console.log(“err:”, err);})

像上面這段代碼，如果進(jìn)入到第一個 then 中，第一個 then 直接拋出異常，這樣直接就進(jìn)入到 catch 中了，后面的 then 就都不會執(zhí)行了。

3.3 返回 Promise

第三種情況就是 then 中也可以返回一個 Promise 對象，這個就如同我們第二小節(jié)的案例，我這里就不再贅述了。

就說一句，如果 then 中返回的是一個 Promise 對象，那么接下來的 then 其實是這個 Promise 對象的 then，而不是一開始的 Promise 的 then 了。例如如下偽代碼：

A.then((data)=>{return B}).then(xxx)

假設(shè) A 和 B 都是 Promise 對象，那么第二個 then 方法是 B 的 then。

好啦，這就是 then 中的三種返回值情況。

4. catch

catch 主要是用來處理異常的情況，兩種情況下會進(jìn)入到 catch 中：

• Promise 執(zhí)行的時候通過 reject 返回數(shù)據(jù)。
• then 中拋出 Error

出了問題，就由最近的 catch 來處理。

5. finally

最后還有一個 finally 用來兜底，這一套下來感覺有點像我們 Java 中的 try-catch-finally，也就是前面無論如何，最終 finally 中的代碼都會執(zhí)行。不過不同于 Java 中的 finally，Promise 中的 finally 在最終執(zhí)行完畢后，還可以繼續(xù) then。。。前端的蜜汁操作。

6. 其他方法

最后，我們再來看看 Promise 中的其他靜態(tài)方法。

6.1 Promise.all()

Promise.all() 方法可以接收多個 Promise 對象，并且只返回一個 Promise 實例，這個方法會等所有輸入的 Promise 對象的 resolve 方法都返回的時候，或者所有輸入的 Promise 對象中有一個 reject 的時候，這個 all 就會執(zhí)行結(jié)束，來看如下一個案例：

const promise1 = Promise.resolve(3);const promise2 = 42;const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 3000, ‘foo’);});Promise.all([promise1, promise2, promise3]).then((values) => { console.log(values);}).catch(err=>{ console.log(“err”, err);})

當(dāng) promise1、promise2 以及 promise3 都執(zhí)行了 resolve 的時候，就會進(jìn)入到 then 中，這三個中有任意一個執(zhí)行了 reject 就會進(jìn)入到 catch 中。

6.2 Promise.race()

Promise.race() 方法可以接收多個 Promise 對象，一旦迭代器中的某個 Promise resolve 或 reject，返回的 Promise 就會 resolve 或 reject。

和 all 方法的區(qū)別在于，race 方法是誰執(zhí)行的快，就用誰的結(jié)果。我們來看如下一段代碼：

const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, ‘one’);});const promise2 = new Promise((resolve, reject) => { setTimeout(reject, 600, ‘two’);});Promise.race([promise1, promise2]).then((value) => { console.log(value);});

promise1 執(zhí)行時間短，promise2 執(zhí)行時間長，所以最終結(jié)果就是 promise1 的結(jié)果。

6.3 Promise.reject()

Promise.reject() 方法返回一個帶有 reject 原因的 Promise 對象。來看如下一段代碼：

function resolved(result) { console.log(‘Resolved’);}function rejected(result) { console.error(result);}Promise.reject(“error”).then(resolved).catch(rejected);

這個執(zhí)行的時候就會進(jìn)入到 catch 中。

6.4 Promise.resolve()

Promise.resolve(value) 方法返回一個以給定值解析后的 Promise 對象。

const promise1 = Promise.resolve(3);promise1.then(data=>{ console.log(“data”, data);},err=>{ console.log(“err”, err);})

這個用法比較簡單，沒啥好說的。

還有一些其他方法我就不一一列舉了，感興趣的小伙伴們可以看看 MDN 上的相關(guān)講解：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise。

好啦，這個東西搞懂了，我們再去看 TienChin 項目的前端，就會非常容易了！