很多時候我們需要自訂JavaScript 方法，並且期望能夠支援非同步(async)，以前各家瀏覽器支援度
不齊的情形下，可以借用 jQuery 來達到目的，現在已經不需要這麼麻煩了，直接使用原生的
複習一下，以前透過 jQuery 方式，會借用 $.Deferred() 物件並且回傳 promise 讓呼叫端使用
呼叫端可以如下使用，也可以使用 then()
而今日可透過原生JS 的 Promise 來達成，以下是示意，實際不可能同時發生 resolve,reject，
注意 setTimeout 來簡易模擬非同步任務，先觀察 promise 操作
觀察以上， resolve() 觸發 then()，reject() 觸發 catch()，最後會有 finally() 代表最後執行，也可以在 catch()
後方自行加個 then() 代表 finally()，而在串接邏輯上，建議順序就是 then()、catch()、finally()
若 reject() 使用 new Error()，其catch() 就需要對應使用 message 屬性來取得字串，將較於自訂回傳結構，
Error 僅能回傳單一字串訊息()
若任務中有使用 JavaScript Fetch ，亦可如下作法
若程式邏輯須等待 getDataAsync() 完成後才能往下，若再次呼叫的方法又是非同步，
這樣就會進入 callback hell，如下圖
而ES7 加入了 async、await 可以拿來避免 callback hell ，但須注意 async、await 僅能使用
在funciton 以及 top level bodie，不然會出錯，如下圖
await is only valid in async functions and the top level bodies of modules（參考：1,2）
故若要在非 function 內呼叫，可使用立即函式，如下圖所示
其中，call back 處皆需要加入 async 、await 關鍵字
期待結果「complate async」 字串應該要最後輸出
簡潔一點的寫法
若是在網頁元素的事件callback 方法中呼叫非同方法
【參考】
沒有留言:
張貼留言