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

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

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.            }); 

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

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

1. $.ajax({ 
2.            url: "http://www.ujiuye.tech/:3000/api/firstCategory", // 所有一級分類 
3.            dataType: "json", 
4.            success(res) { 
5.                $.ajax({ 
6.                    url: `http://www.ujiuye.tech/:3000/api/secondCategory`, // 傳遞一級ID換取下屬的二級分類列表 
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`, // 傳遞二級分類ID, 獲取下屬的三級分類列表 
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`,// 傳遞三級分類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商城項目中的商品列表頁面，我們同時要發(fā)起四個請求來分別獲�。阂患壏诸�、二級分類、三級分類和商品，那么這是時候利用回調(diào)函數(shù)會出現(xiàn)”回調(diào)地獄”的現(xiàn)象，即使是使用promise來優(yōu)化，也會出現(xiàn)大量的代碼嵌套，這樣的代碼會容易讓人疑惑，而且也不利于后續(xù)的開發(fā)維護。所以我們可以使用async...await來優(yōu)化這些。

例如上面請求輪播圖的例子，使用async和await來優(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.         } 

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

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

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

其實這個方案依然是利用promise的鏈式調(diào)用原理來解決的。那么使用，最后代碼為：

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.        } 

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