寫(xiě)給 Java 程序員的前端 Promise 教程
1. 為什么需要 Promise
假設(shè)我現(xiàn)在有這樣一個(gè)需求，用戶先去登錄，登錄成功之后，再去服務(wù)端獲取用戶信息，獲取到用戶信息之后再去服務(wù)端獲取前端的動(dòng)態(tài)菜單。一般我們的 Ajax 請(qǐng)求都是異步形式，為了確保上一步操作成功再執(zhí)行下一個(gè)請(qǐng)求，所以最終發(fā)出的請(qǐng)求偽代碼類似下面這樣：
$.ajax({ url:'/login', data:loginForm, success: function (data) { //登錄成功 $.ajax({ url:'/getInfo', success: function (userInfo) { //獲取用戶信息成功 $.ajax({ url: '/getMenus', success: function (menus) { //獲取菜單成功 } }) } }) }})為了確保一個(gè)異步任務(wù)執(zhí)行完成后，再執(zhí)行下一個(gè)異步任務(wù)，我們不得不在回調(diào)函數(shù)中不停的寫(xiě)下去，上面我舉的例子是三個(gè)請(qǐng)求嵌套，實(shí)際上可能會(huì)更多。。。這就是前端所謂的回調(diào)地獄。而 Promise 就是來(lái)解決回調(diào)地獄的。
2. Promise
Promise 從字面上理解，就是承諾，承諾將來(lái)在某一個(gè)時(shí)間會(huì)做某一件事。通過(guò) Promise 我們可以將異步任務(wù)執(zhí)行的代碼和處理的代碼完全分離開(kāi)。
還是第一小節(jié)這個(gè)例子，如果我們用 Promise 寫(xiě)，那么方式如下：
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);})我們?cè)?Promise 中寫(xiě)異步任務(wù)執(zhí)行的代碼，在上面的案例中，松哥通過(guò) setTImeout 方法模擬了一個(gè)耗時(shí)操作，異步任務(wù)執(zhí)行完畢后，我們調(diào)用 resolve 方法返回調(diào)用的結(jié)果（會(huì)進(jìn)入到下一步的 then 中），也可以調(diào)用 reject 方法表示調(diào)用失?。〞?huì)進(jìn)入到 catch 中）。
3. then
then 中的返回值可以分為三種情況。
3.1 正常 return
then 中方法的參數(shù)，是上一個(gè) Promise 對(duì)象 resolve 的值，一個(gè) Promise 對(duì)象可以有多個(gè) 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);})這樣可以一直返回，這有點(diǎn)像我們 Java 中的流式編程。
3.2 拋出異常
在 then 中，我們可以對(duì)返回結(jié)果進(jìn)行判斷，不滿足條件也可以直接拋出異常，這樣就會(huì)進(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("出錯(cuò)啦");}).then(data => { console.log("then2:", data); return data;}).then(data => { console.log("then3:", data);}).catch(err => { console.log("err:", err);})像上面這段代碼，如果進(jìn)入到第一個(gè) then 中，第一個(gè) then 直接拋出異常，這樣直接就進(jìn)入到 catch 中了，后面的 then 就都不會(huì)執(zhí)行了。
3.3 返回 Promise
第三種情況就是 then 中也可以返回一個(gè) Promise 對(duì)象，這個(gè)就如同我們第二小節(jié)的案例，我這里就不再贅述了。
就說(shuō)一句，如果 then 中返回的是一個(gè) Promise 對(duì)象，那么接下來(lái)的 then 其實(shí)是這個(gè) Promise 對(duì)象的 then，而不是一開(kāi)始的 Promise 的 then 了。例如如下偽代碼：
A.then((data)=>{return B}).then(xxx)假設(shè) A 和 B 都是 Promise 對(duì)象，那么第二個(gè) then 方法是 B 的 then。
好啦，這就是 then 中的三種返回值情況。
4. catch
catch 主要是用來(lái)處理異常的情況，兩種情況下會(huì)進(jìn)入到 catch 中：
- Promise 執(zhí)行的時(shí)候通過(guò) reject 返回?cái)?shù)據(jù)。
- then 中拋出 Error
出了問(wèn)題，就由最近的 catch 來(lái)處理。
5. finally
最后還有一個(gè) finally 用來(lái)兜底，這一套下來(lái)感覺(jué)有點(diǎn)像我們 Java 中的 try-catch-finally，也就是前面無(wú)論如何，最終 finally 中的代碼都會(huì)執(zhí)行。不過(guò)不同于 Java 中的 finally，Promise 中的 finally 在最終執(zhí)行完畢后，還可以繼續(xù) then。。。前端的蜜汁操作。
6. 其他方法
最后，我們?cè)賮?lái)看看 Promise 中的其他靜態(tài)方法。
6.1 Promise.all()
Promise.all() 方法可以接收多個(gè) Promise 對(duì)象，并且只返回一個(gè) Promise 實(shí)例，這個(gè)方法會(huì)等所有輸入的 Promise 對(duì)象的 resolve 方法都返回的時(shí)候，或者所有輸入的 Promise 對(duì)象中有一個(gè) reject 的時(shí)候，這個(gè) all 就會(huì)執(zhí)行結(jié)束，來(lái)看如下一個(gè)案例：
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 的時(shí)候，就會(huì)進(jìn)入到 then 中，這三個(gè)中有任意一個(gè)執(zhí)行了 reject 就會(huì)進(jìn)入到 catch 中。
6.2 Promise.race()
Promise.race() 方法可以接收多個(gè) Promise 對(duì)象，一旦迭代器中的某個(gè) Promise resolve 或 reject，返回的 Promise 就會(huì) resolve 或 reject。
和 all 方法的區(qū)別在于，race 方法是誰(shuí)執(zhí)行的快，就用誰(shuí)的結(jié)果。我們來(lái)看如下一段代碼：
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í)行時(shí)間短，promise2 執(zhí)行時(shí)間長(zhǎng)，所以最終結(jié)果就是 promise1 的結(jié)果。
6.3 Promise.reject()
Promise.reject() 方法返回一個(gè)帶有 reject 原因的 Promise 對(duì)象。來(lái)看如下一段代碼：
function resolved(result) { console.log('Resolved');}function rejected(result) { console.error(result);}Promise.reject("error").then(resolved).catch(rejected);這個(gè)執(zhí)行的時(shí)候就會(huì)進(jìn)入到 catch 中。
6.4 Promise.resolve()
Promise.resolve(value) 方法返回一個(gè)以給定值解析后的 Promise 對(duì)象。
const promise1 = Promise.resolve(3);promise1.then(data=>{ console.log("data", data);},err=>{ console.log("err", err);})這個(gè)用法比較簡(jiǎn)單，沒(méi)啥好說(shuō)的。?
