摘要:有兩個陌生的關鍵字,同時函數執行結果似乎返回了一個對象。用來表示函數是異步的,定義的函數會返回一個對象,可以使用方法添加回調函數。如果的是對象會造成異步函數停止執行并且等待的解決如果等的是正常的表達式則立即執行。
視頻講解
關于異步處理,ES5的回調使我們陷入地獄,ES6的Promise使我們脫離魔障,終于、ES7的async-await帶我們走向光明。今天就來學習一下 async-await。
async-await和Promise的關系經常會看到有了 async-await、promise 還有必要學習嗎、async await優于promise的幾個特點,接收了這些信息后,就蒙圈了。現在才知道,async-await是promise和generator的語法糖。只是為了讓我們書寫代碼時更加流暢,當然也增強了代碼的可讀性。簡單來說:async-await 是建立在 promise機制之上的,并不能取代其地位。
基本語法async function basicDemo() { let result = await Math.random(); console.log(result); } basicDemo(); // 0.6484863241051226 //Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}
上述代碼就是async-await的基本使用形式。有兩個陌生的關鍵字async、await,同時函數執行結果似乎返回了一個promise對象。
asyncasync用來表示函數是異步的,定義的函數會返回一個promise對象,可以使用then方法添加回調函數。
async function demo01() { return 123; } demo01().then(val => { console.log(val);// 123 }); 若 async 定義的函數有返回值,return 123;相當于Promise.resolve(123),沒有聲明式的 return則相當于執行了Promise.resolve();await
await 可以理解為是 async wait 的簡寫。await 必須出現在 async 函數內部,不能多帶帶使用。
function notAsyncFunc() { await Math.random(); } notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier
await 后面可以跟任何的JS 表達式。雖然說 await 可以等很多類型的東西,但是它最主要的意圖是用來等待 Promise 對象的狀態被 resolved。如果await的是 promise對象會造成異步函數停止執行并且等待 promise 的解決,如果等的是正常的表達式則立即執行。
function sleep(second) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(" enough sleep~"); }, second); }) } function normalFunc() { console.log("normalFunc"); } async function awaitDemo() { await normalFunc(); console.log("something, ~~"); let result = await sleep(2000); console.log(result);// 兩秒之后會被打印出來 } awaitDemo(); // normalFunc // VM4036:13 something, ~~ // VM4036:15 enough sleep~
希望通過上面的 demo,大家可以理解我上面的話。
實例舉例說明啊,你有三個請求需要發生,第三個請求是依賴于第二個請求的解構第二個請求依賴于第一個請求的結果。若用 ES5實現會有3層的回調,若用Promise 實現至少需要3個then。一個是代碼橫向發展,另一個是縱向發展。今天指給出 async-await 的實現哈~
//我們仍然使用 setTimeout 來模擬異步請求 function sleep(second, param) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(param); }, second); }) } async function test() { let result1 = await sleep(2000, "req01"); let result2 = await sleep(1000, "req02" + result1); let result3 = await sleep(500, "req03" + result2); console.log(` ${result3} ${result2} ${result1} `); } test(); //req03req02req01 //req02req01 //req01錯誤處理
上述的代碼好像給的都是resolve的情況,那么reject的時候我們該如何處理呢?
function sleep(second) { return new Promise((resolve, reject) => { setTimeout(() => { reject("want to sleep~"); }, second); }) } async function errorDemo() { let result = await sleep(1000); console.log(result); } errorDemo();// VM706:11 Uncaught (in promise) want to sleep~ // 為了處理Promise.reject 的情況我們應該將代碼塊用 try catch 包裹一下 async function errorDemoSuper() { try { let result = await sleep(1000); console.log(result); } catch (err) { console.log(err); } } errorDemoSuper();// want to sleep~ // 有了 try catch 之后我們就能夠拿到 Promise.reject 回來的數據了。小心你的并行處理!!!
我這里為啥加了三個感嘆號呢~,因為對于初學者來說一不小心就將 ajax 的并發請求發成了阻塞式同步的操作了,我就真真切切的在工作中寫了這樣的代碼。await 若等待的是 promise 就會停止下來。業務是這樣的,我有三個異步請求需要發送,相互沒有關聯,只是需要當請求都結束后將界面的 loading 清除掉即可。
剛學完 async await 開心啊,到處亂用~
function sleep(second) { return new Promise((resolve, reject) => { setTimeout(() => { resolve("request done! " + Math.random()); }, second); }) } async function bugDemo() { await sleep(1000); await sleep(1000); await sleep(1000); console.log("clear the loading~"); } bugDemo();
loading 確實是等待請求都結束完才清除的。但是你認真的觀察下瀏覽器的 timeline 請求是一個結束后再發另一個的(若觀察效果請發真實的 ajax 請求)
那么,正常的處理是怎樣的呢?
async function correctDemo() { let p1 = sleep(1000); let p2 = sleep(1000); let p3 = sleep(1000); await Promise.all([p1, p2, p3]); console.log("clear the loading~"); } correctDemo();// clear the loading~
恩, 完美。看吧~ async-await并不能取代promise.
await in for 循環最后一點了,await必須在async函數的上下文中的。
// 正常 for 循環 async function forDemo() { let arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i ++) { await arr[i]; } } forDemo();//正常輸出 // 因為想要炫技把 for循環寫成下面這樣 async function forBugDemo() { let arr = [1, 2, 3, 4, 5]; arr.forEach(item => { await item; }); } forBugDemo();// Uncaught SyntaxError: Unexpected identifierrefs
不知道,我的意思有沒有傳遞給大家。下面推薦幾篇優秀的文章。
async 函數的含義和用法
ES7 Async Await 聖經
Understanding JavaScript’s async await
【開發環境推薦】Cloud Studio 是基于瀏覽器的集成式開發環境,支持絕大部分編程語言,包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等,無需下載安裝程序,一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境,并且支持自定義域名指向,動態計算資源調整,可以完成各種應用的開發編譯與部署。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88998.html
摘要:的翻譯文檔由的維護很多人說,阮老師已經有一本關于的書了入門,覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中,顯得越來越重要。為了讓編程更美好,我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書(中文版) 超詳細介紹promise的gitbook,看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...
摘要:實現方案首先小程序目前還是不支持的和的,那么如何讓它支持呢點擊下載,并把下載好的文件夾放到自己小程序的目錄下,包總共才多,體積很小的。如果想使用這些新的對象和方法,必須使用,為當前環境提供一個墊片。用于實現瀏覽器并不支持的原生的代碼。 前言 在平常的項目開發中肯定會遇到同步異步執行的問題,還有的就是當執行某一個操作依賴上一個執行所返回的結果,那么這個時候你會如何解決這個問題呢; 1.是...
摘要:如果你的運行緩慢,你可以考慮是否能優化請求,減少對的操作,盡量少的操,或者犧牲其它的來換取性能。在認識描述這些核心元素的過程中,我們也會分享一些當我們構建的時候遵守的一些經驗規則,一個應用應該保持健壯和高性能來維持競爭力。 一個開源的前端錯誤收集工具 frontend-tracker,你值得收藏~ 蒲公英團隊最近開發了一款前端錯誤收集工具,名叫 frontend-tracker ,這款...
摘要:是的語法,截止我寫這篇文章為止,小程序還是不支持語法的,所以需要使用這個庫下載,并把文件夾放到目錄下在引入封裝,讓微信的支持語法所有的請求,默認攜帶可以控制是否顯示加載狀態加載中封裝好后就可以在文件中使用了,使用方法如下請 async-await是ES7的語法,截止我寫這篇文章為止,小程序還是不支持async-await語法的,所以需要使用regenerator這個庫 下載regene...
閱讀 2428·2021-11-23 09:51
閱讀 2457·2021-11-11 17:21
閱讀 3097·2021-09-04 16:45
閱讀 2380·2021-08-09 13:42
閱讀 2218·2019-08-29 18:39
閱讀 2879·2019-08-29 14:12
閱讀 1279·2019-08-29 13:49
閱讀 3362·2019-08-29 11:17