<span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
<sub id="h9j9p"><listing id="h9j9p"></listing></sub>

    <noframes id="h9j9p"><form id="h9j9p"></form>
    <form id="h9j9p"></form>
      <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

      <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></form>
        400-650-7353

        精品課程

        您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】如何利用promise解決異步

        【Web前端基礎知識】如何利用promise解決異步

        • 發布: Web前端培訓
        • 來源:優就業
        • 2021-09-28 14:16:38
        • 閱讀()
        • 分享
        • 手機端入口

        我們知道,在promise對象的then方法可以處理onfulfilled和onrejected兩個事件監聽回調,但是我們一般采用catch來處理onrejected的監聽回調,因為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來向服務器發起輪播圖數據的請求,上面代碼若是正確的執行則會進入then方法里處理,若是異常的,也就是說必然進入catch環節,這代碼看起來并沒有什么,好像也并不復雜。

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

        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, 獲取下屬的商品數據列表 
        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商城項目中的商品列表頁面,我們同時要發起四個請求來分別獲。阂患壏诸、二級分類、三級分類和商品,那么這是時候利用回調函數會出現”回調地獄”的現象,即使是使用promise來優化,也會出現大量的代碼嵌套,這樣的代碼會容易讓人疑惑,而且也不利于后續的開發維護。所以我們可以使用async...await來優化這些。

        例如上面請求輪播圖的例子,使用async和await來優化之后:

        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的成功結果,也就是說,若上面代碼出現了異常,則代碼會中斷執行。作為一個優秀的開發人員肯定不希望代碼崩掉,那么該如何解決異常呢,有兩種方案:一是采用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.         } 

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

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

        其實這個方案依然是利用promise的鏈式調用原理來解決的。那么使用,最后代碼為:

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

        利用這個方案,大家發現,代碼量不僅大大的減少,而且兼容性更加友好。

        學習疑問申請解答
        您的姓名
        您的電話
        意向課程
         

        中公優就業

        IT小助手

        掃描上方二維碼添加好友,請備注:599,享學習福利。

        >>本文地址:
        注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

        推薦閱讀

        優就業:ujiuye

        關注中公優就業官方微信

        • 關注微信回復關鍵詞“大禮包”,享學習福利
        QQ交流群
        在線疑問解答
        (加群備注“網站”)
        IT培訓交流群 加入群聊 +
        軟件測試 加入群聊 +
        全鏈路UI/UE設計 加入群聊 +
        Python+人工智能 加入群聊 +
        互聯網營銷 加入群聊 +
        Java開發 加入群聊 +
        PHP開發 加入群聊 +
        VR/AR游戲開發 加入群聊 +
        大前端 加入群聊 +
        大數據 加入群聊 +
        Linux云計算 加入群聊 +
        優就業官方微信
        掃碼回復關鍵詞“大禮包”
        享學習福利

        測一測
        你適合學哪門IT技術?

        1 您的年齡

        2 您的學歷

        3 您更想做哪個方向的工作?

        獲取測試結果
         
        課程資料、活動優惠 領取通道
         
         
        亚洲日韩中文字幕一区
        <span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
        <sub id="h9j9p"><listing id="h9j9p"></listing></sub>

          <noframes id="h9j9p"><form id="h9j9p"></form>
          <form id="h9j9p"></form>
            <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

            <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></form>