400-650-7353
您所在的位置:首頁(yè) > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎知識】如何利用promise解決異步

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

  • 發(fā)布: Web前端培訓
  • 來(lái)源:優(yōu)就業(yè)
  • 2021-09-28 14:16:38
  • 閱讀()
  • 分享
  • 手機端入口

我們知道,在promise對象的then方法可以處理onfulfilled和onrejected兩個(gè)事件監聽(tīng)回調,但是我們一般采用catch來(lái)處理onrejected的監聽(tīng)回調,因為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.            }); 

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

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

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

例如上面請求輪播圖的例子,使用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的成功結果,也就是說(shuō),若上面代碼出現了異常,則代碼會(huì )中斷執行。作為一個(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ì )出現嵌套,特別是若發(fā)起一些負責的請求(例如上面回調地獄的情況),則代碼依然非常復雜,那么有沒(méi)有更好的解決方案呢。答案是有。在項目開(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的鏈式調用原理來(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ā)現,代碼量不僅大大的減少,而且兼容性更加友好。

文章“【W(wǎng)eb前端基礎知識】如何利用promise解決異步”已幫助

更多內容

>>本文地址:http://www.lakeplacidphc.com/zhuanye/2021/70198.html

THE END  

聲明:本站稿件版權均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個(gè)方向的工作?

獲取測試結果
  • 大前端大前端
  • 大數據大數據
  • 互聯(lián)網(wǎng)營(yíng)銷(xiāo)互聯(lián)網(wǎng)營(yíng)銷(xiāo)
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運營(yíng)全域電商運營(yíng)
  • 軟件測試軟件測試
  • 室內設計室內設計
  • 平面設計平面設計
  • 電商設計電商設計
  • 網(wǎng)頁(yè)設計網(wǎng)頁(yè)設計
  • 全鏈路UI/UE設計UI設計
  • VR/AR游戲開(kāi)發(fā)VR/AR
  • 網(wǎng)絡(luò )安全網(wǎng)絡(luò )安全
  • 新媒體與短視頻運營(yíng)新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開(kāi)發(fā)智能機器人
 

快速通道fast track

近期開(kāi)班時(shí)間TIME