Promise处理前端异步事件
生活随笔
收集整理的這篇文章主要介紹了
Promise处理前端异步事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一:理解兩種類型的回調函數
1,同步回調函數:立即執行,完全執行完才結束,不會放入回調隊列中。例如:數組遍歷相關的回調函數/Promise的excutor函數2,異步回調函數:不會立即執行,會放入回調隊列中將來在執行。例如:定時器回調/Ajax回調/Promise成功或者失敗的回調。(異步回調在實際中使用的比較多)二:錯誤的幾種類型
1,Error:所有錯誤類型的父類2,ReferenceError:引用的變量不存在3,TypeError:數據類型不正確的錯誤4,RangeError:數據值不在其允許的范圍內5,SystaxError:語法錯誤三:處理錯誤的幾種方法
錯誤是一種對象,有兩個屬性,message:錯誤信息;stack:函數調用棧記錄的信息1,捕獲錯誤:try catch2,拋出錯誤:throw error四:理解Promise
Promise是js異步處理的一種新的解決方案(之前是通過異步回調函數,處理異步事件)Promise是什么:從語法角度:Promise是一個構造函數從功能角度:promise對象用來封裝一個異步操作并可以獲取其中的結果promise對象的狀態:pending(初始狀態),resolved/fulfilled(回調成功),rejected(回調失敗)promise對象狀態值改變的幾種可能pending——》resolvedpending——》rejected注意:promise對象的狀態只能改變一次,無論狀態變為成功還是失敗,都會有數據結果,成功的結果一般稱為value,失敗稱為reason五:Promise工作流程圖:
一個簡單的Promise實例:
/*通過Promise構造函數,來創建一個Promise對象, Promise函數接收一個函數作為參數(這是一個同步的函數參數) 函數參數又接收兩個參數函數,resolve函數用來改變promise對象的狀態為成功 reject函數用來改變promise對象的狀態為失敗 */ const p=new Promise((resolve,reject)=>{setTimeout(()=>{const time=Date.now();if(time%2==0){//將狀態設置為成功resolve('成功的數據'+time)}else{//將狀態設置為失敗reject('失敗的數據'+time)}},1000) }) /* Promise處理異步事件,就是將異步事件和異步處理結果分開 異步事件被封裝在promise對象中,異步事件處理結果,無非就三種狀態,一種沒處理對應 promise中的pending,事件處理結果成功對應promise中的resolved,事件處理結果失敗對應promise中的rejected 隨后處理結果,就是通過promise的then方法,更具promise對象的狀態調用不同的異步回調函數 而且then方法執行完異步回調函數后會返回一個新的promise對象,這樣promise鏈就形成了*/ p.then(value=>{console.log('回調成功'+value) },reason=>{console.log('失敗回調'+reason) })六:使用Promise處理異步事件的好處
普通的通過回調函數處理異步事件:回調函數必須在異步任務定義是就指定其回調函數promise處理異步:啟動異步任務》返回一個promise對象》通過then方法給其綁定異步的回調函數(一個promise對象可以通過調用多個then方法來調用多個回調函數)回調地獄問題:回調函數嵌套調用,外部函數異步執行結果是嵌套的回調執行的條件(就是一個異步回調函數處理結束了,但是又嵌套了一個異步回調),回調地獄問題不利于閱讀,不便于處理異常通過promise鏈式調用處理地獄問題優化的解決方案 通過async await處理七:Promise函數對象的API
總結
以上是生活随笔為你收集整理的Promise处理前端异步事件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 工信部:2023 上半年我国软件业务收入
- 下一篇: excel怎么把图片变成黑白? exce