【W(wǎng)eb前端基礎(chǔ)知識(shí)】如何利用promise解決異步

我們知道，在promise對(duì)象的then方法可以處理onfulfilled和onrejected兩個(gè)事件監(jiān)聽(tīng)回調(diào)，但是我們一般采用catch來(lái)處理onrejected的監(jiān)聽(tīng)回調(diào)，因?yàn)閏atch可以捕獲部分程序異常;有利于程序的健壯性。例如：

1. function getBanner() { 
2.            let p = new Promise((resolve, reject) => { 
3.                $.ajax({ 
4.                    type: "GET", 
5.                    url: "http://localhost:3000/api/index/banner", 
6.                    success: function (response) { 
7.                        resolve(response); 
8.                    }, 
9.                    error: function (err) { 
10.                        reject(err); 
11.                    } 
12.                }); 
13.            }); 
14.            return p; 
15.        } 
16.  
17.        let p = getBanner() 
18.            .then(rst => { 
19.                return rst; 
20.            }) 
21.            .catch(err => { 
22.                console.log(err); 
23.            }); 

我們通過(guò)jQuery的ajax來(lái)向服務(wù)器發(fā)起輪播圖數(shù)據(jù)的請(qǐng)求，上面代碼若是正確的執(zhí)行則會(huì)進(jìn)入then方法里處理，若是異常的，也就是說(shuō)必然進(jìn)入catch環(huán)節(jié),這代碼看起來(lái)并沒(méi)有什么，好像也并不復(fù)雜。

但是，如果在異步請(qǐng)求過(guò)程中出現(xiàn)了幾個(gè)請(qǐng)求直接有依賴關(guān)系，則使用這種解決方案就復(fù)雜得多了。例如：

1. $.ajax({ 
2.            url: "http://www.ujiuye.tech/:3000/api/firstCategory", // 所有一級(jí)分類 
3.            dataType: "json", 
4.            success(res) { 
5.                $.ajax({ 
6.                    url: `http://www.ujiuye.tech/:3000/api/secondCategory`, // 傳遞一級(jí)ID換取下屬的二級(jí)分類列表 
7.                    data: { 
8.                        firstId: res['list'][0][0]['firstId'] 
9.                    }, 
10.                    dataType: "json", 
11.                    success(res2) { 
12.                        $.ajax({ 
13.                            url: `http://www.ujiuye.tech/:3000/api/thiredCategory`, // 傳遞二級(jí)分類ID, 獲取下屬的三級(jí)分類列表 
14.                            data: { 
15.                                secondId: res2['list'][0]['secondId'] 
16.                            }, 
17.                            dataType: "json", 
18.                            success(res3) { 
19.                                $.ajax({ 
20.                                    url: `http://www.ujiuye.tech/:3000/api/categoryList`,// 傳遞三級(jí)分類ID, 獲取下屬的商品數(shù)據(jù)列表 
21.                                    data: { 
22.                                        thiredId: res3['list'][0]['thiredId'] 
23.                                    }, 
24.                                    dataType: "json", 
25.                                    success(result) { 
26.                                        console.log(result); 
27.                                    } 
28.                                }) 
29.                            } 
30.                        }) 
31.                    } 
32.                }) 
33.            } 
34.        }) 

在小U商城項(xiàng)目中的商品列表頁(yè)面，我們同時(shí)要發(fā)起四個(gè)請(qǐng)求來(lái)分別獲�。阂患�(jí)分類、二級(jí)分類、三級(jí)分類和商品，那么這是時(shí)候利用回調(diào)函數(shù)會(huì)出現(xiàn)”回調(diào)地獄”的現(xiàn)象，即使是使用promise來(lái)優(yōu)化，也會(huì)出現(xiàn)大量的代碼嵌套，這樣的代碼會(huì)容易讓人疑惑，而且也不利于后續(xù)的開(kāi)發(fā)維護(hù)。所以我們可以使用async...await來(lái)優(yōu)化這些。

例如上面請(qǐng)求輪播圖的例子，使用async和await來(lái)優(yōu)化之后：

1. function getBanner() { 
2.             let p = new Promise((resolve, reject) => { 
3.                 $.ajax({ 
4.                     type: "GET", 
5.                     url: "http://localhost:3000/api/index/banner", 
6.                     success: function (response) { 
7.                         resolve(response); 
8.                     }, 
9.                     error: function (err) { 
10.                         reject(err); 
11.                     } 
12.                 }); 
13.             }); 
14.             return p; 
15.         } 
16.  
17.         async function getData(){ 
18.             let data=await getBanner(); 
19.             console.log(data); 
20.         } 

這樣的代碼相比于上面的代碼要簡(jiǎn)化很多，但是也有弊端，由于await只能接收promise的成功結(jié)果，也就是說(shuō)，若上面代碼出現(xiàn)了異常，則代碼會(huì)中斷執(zhí)行。作為一個(gè)優(yōu)秀的開(kāi)發(fā)人員肯定不希望代碼崩掉，那么該如何解決異常呢，有兩種方案：一是采用try..catch來(lái)捕獲異常，另外是使用catch

1. async function getData() { 
2.             try { 
3.                 let data = await getBanner(); 
4.                 console.log(data); 
5.             } catch (e) { 
6.                 console.log(e); 
7.             } 
8.         } 
9.  
10.         //或者 
11.         async function getData() { 
12.             let data = await getBanner().catch(e => { 
13.                 console.log(e); 
14.             }) 
15.             console.log(data); 
16.         } 

但這兩種方案都又會(huì)出現(xiàn)嵌套，特別是若發(fā)起一些負(fù)責(zé)的請(qǐng)求(例如上面回調(diào)地獄的情況)，則代碼依然非常復(fù)雜，那么有沒(méi)有更好的解決方案呢。答案是有。在項(xiàng)目開(kāi)發(fā)過(guò)程中，我們經(jīng)常使用await-to-js的技術(shù)來(lái)解決這個(gè)問(wèn)題：

1. function to(p) { 
2.            return p 
3.                .then(data => [null, data]) 
4.                .catch(err => [err, null]); 
5.        } 

其實(shí)這個(gè)方案依然是利用promise的鏈?zhǔn)秸{(diào)用原理來(lái)解決的。那么使用，最后代碼為：

1. function to(p) { 
2.            return p 
3.                .then(data => [null, data]) 
4.                .catch(err => [err, null]); 
5.        } 
6.  
7.        async function getData() { 
8.            let [err, data] = await to(getBanner()) 
9.        } 

利用這個(gè)方案，大家發(fā)現(xiàn)，代碼量不僅大大的減少，而且兼容性更加友好。