实战IT培训机构_黄色激情网站_IT培训班选大学生IT技术培训中心_黄色激情视频网站_中公优就业

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

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

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

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

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

  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ā)維護(hù)。所以我們可以使用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的成功結(jié)果,也就是說,若上面代碼出現(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ā)起一些負(fù)責(zé)的請求(例如上面回調(diào)地獄的情況),則代碼依然非常復(fù)雜,那么有沒有更好的解決方案呢。答案是有。在項目開發(fā)過程中,我們經(jīng)常使用await-to-js的技術(shù)來解決這個問題:

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

其實這個方案依然是利用promise的鏈?zhǔn)秸{(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),代碼量不僅大大的減少,而且兼容性更加友好。

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

更多內(nèi)容

>>本文地址:http://www.jecan.cn/zhuanye/2021/70198.html

THE END  

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

1 您的年齡

2 您的學(xué)歷

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

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

快速通道fast track

近期開班時間TIME

主站蜘蛛池模板: 丹佛斯压力传感器,WISE温度传感器,WISE压力开关,丹佛斯温度开关-上海力笙工业设备有限公司 | 蜂蜜瓶-玻璃瓶-玻璃瓶厂-玻璃瓶生产厂家-徐州贵邦玻璃制品有限公司 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | 轻型地埋电缆故障测试仪,频响法绕组变形测试仪,静荷式卧式拉力试验机-扬州苏电 | 智慧消防-消防物联网系统云平台| 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 扒渣机厂家_扒渣机价格_矿用扒渣机_铣挖机_撬毛台车_襄阳永力通扒渣机公司 | 雨水收集系统厂家-雨水收集利用-模块雨水收集池-徐州博智环保科技有限公司 | 阳光模拟试验箱_高低温试验箱_高低温冲击试验箱_快速温变试验箱|东莞市赛思检测设备有限公司 | 成都租车_成都租车公司_成都租车网_众行宝 | 石英砂矿石色选机_履带辣椒色选机_X光异物检测机-合肥幼狮光电科技 | 振动台-振动试验台-振动冲击台-广东剑乔试验设备有限公司 | 膜结构车棚|上海膜结构车棚|上海车棚厂家|上海膜结构公司 | 游泳池设计|设备|配件|药品|吸污机-东莞市太平洋康体设施有限公司 | 电主轴-高速精密电主轴-高速电机厂家-瑞德沃斯品牌有限公司 | 挤出机_橡胶挤出机_塑料挤出机_胶片冷却机-河北伟源橡塑设备有限公司 | 环球周刊网| 佛山市钱丰金属不锈钢蜂窝板定制厂家|不锈钢装饰线条|不锈钢屏风| 电梯装饰板|不锈钢蜂窝板不锈钢工艺板材厂家佛山市钱丰金属制品有限公司 | 起好名字_取个好名字_好名网免费取好名在线打分 | 交变/复合盐雾试验箱-高低温冲击试验箱_安奈设备产品供应杭州/江苏南京/安徽马鞍山合肥等全国各地 | 海尔生物医疗四川代理商,海尔低温冰箱四川销售-成都壹科医疗器械有限公司 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 吉祥新世纪铝塑板_生产铝塑板厂家_铝塑板生产厂家_临沂市兴达铝塑装饰材料有限公司 | 涡轮流量计_LWGY智能气体液体电池供电计量表-金湖凯铭仪表有限公司 | 焊接减速机箱体,减速机箱体加工-淄博博山泽坤机械厂 | 广州云仓代发-昊哥云仓专业电商仓储托管外包代发货服务 | 玻纤土工格栅_钢塑格栅_PP焊接_单双向塑料土工格栅_复合防裂布厂家_山东大庚工程材料科技有限公司 | 旋振筛_不锈钢旋振筛_气旋筛_旋振筛厂家—新乡市大汉振动机械有限公司 | 车间除尘设备,VOCs废气处理,工业涂装流水线,伸缩式喷漆房,自动喷砂房,沸石转轮浓缩吸附,机器人喷粉线-山东创杰智慧 | 膏剂灌装旋盖机-眼药水灌装生产线-西林瓶粉剂分装机-南通博琅机械科技 | 蒜肠网-动漫,二次元,COSPLAY,漫展以及收藏型模型,手办,玩具的新媒体.(原变形金刚变迷TF圈) | 大巴租车平台承接包车,通勤班车,巴士租赁业务 - 鸿鸣巴士 | 行星搅拌机,双行星搅拌机,动力混合机,无锡米克斯行星搅拌机生产厂家 | 根系分析仪,大米外观品质检测仪,考种仪,藻类鉴定计数仪,叶面积仪,菌落计数仪,抑菌圈测量仪,抗生素效价测定仪,植物表型仪,冠层分析仪-杭州万深检测仪器网 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 超声波焊接机_超音波熔接机_超声波塑焊机十大品牌_塑料超声波焊接设备厂家 | Maneurop/美优乐压缩机,活塞压缩机,型号规格,技术参数,尺寸图片,价格经销商 | 5nd音乐网|最新流行歌曲|MP3歌曲免费下载|好听的歌|音乐下载 免费听mp3音乐 | 讲师宝经纪-专业培训机构师资供应商_培训机构找讲师、培训师、讲师经纪就上讲师宝经纪 | 鲁尔圆锥接头多功能测试仪-留置针测试仪-上海威夏环保科技有限公司 | 空气弹簧|橡胶气囊|橡胶空气弹簧-上海松夏减震器有限公司 |