JavaScript基礎——深入學習async/await

張金寶發布于2019-08-16 14:03 / 433人閱讀

摘要：等待的基本語法該關鍵字的的意思就是讓編譯器等待并返回結果。這里并不會占用資源，因為引擎可以同時執行其他任務其他腳本或處理事件。接下來，我們寫一個火箭發射場景的小例子不是真的發射火箭

本文由云+社區發表

本篇文章，小編將和大家一起學習異步編程的未來——async/await，它會打破你對上篇文章Promise的認知，竟然異步代碼還能這么寫! 但是別太得意，你需要深入理解Promise后，才能更好的的駕馭async/await，因為async/await是基于Promise的。

關于async / await

用于編寫異步程序

代碼書寫方式和同步編碼十分相似，因此代碼十分簡潔易讀

基于Promise

您可以使用try-catch常規的方法捕獲異常

ES8中引入了async/await，目前幾乎所有的現代瀏覽器都已支持這個特性（除了IE和Opera不支持）

你可以輕松設置斷點，調試更容易。

從async開始學起

讓我們從async關鍵字開始吧，這個關鍵字可以放在函數之前，如下所示：

async function f() { 
 return 1; 
}

在函數之間加上async意味著：函數將返回一個Promise,雖然你的代碼里沒有顯示的聲明返回一個Promise,但是編譯器會自動將其轉換成一個Promise，不信你可以使用Promise的then方法試試：

async function f() { 
 return 1; 
} 
f().then(alert); // 1

...如果你不放心的話，你可以在代碼里明確返回一個Promise,輸出結果是相同的。

async function f() { 
 return Promise.resolve(1); 
} 
f().then(alert); // 1

很簡單吧，小編之所以說 async/await 是基于Promise是沒毛病的，async函數返回一個Promise，很簡單吧，不僅如此，還有一個關鍵字await,await只能在async中運行。

等待——await

await的基本語法：

let value=await promise;

該關鍵字的await的意思就是讓JS編譯器等待Promise并返回結果。接下來我們看一段簡單的示例：

async function f() { 
 let promise = new Promise((resolve, reject) => { 
 setTimeout(() => resolve("done!"), 1000) 
 }); 
 let result = await promise; // wait till the promise resolves (*) 
 alert(result); // "done!" 
} 
f();

函數執行將會在 let result = await promise 這一行暫停，直到Promise返回結果，因此上述代碼將會1秒后，在瀏覽器彈出“done”的提示框。

小編在此強調下：

await的字面意思就是讓JavaScript等到Promise結束，然后輸出結果。這里并不會占用CPU資源，因為引擎可以同時執行其他任務：其他腳本或處理事件。

不能多帶帶使用await，必須在async函數作用域下使用，否則將會報出異常“Error: await is only valid in async function”，示例代碼如下：

function f() { 
 let promise = Promise.resolve(1); 
 let result = await promise; // Syntax error 
}

接下來，小編將和大家一起來親自動手實踐以下內容：

async與Promise.then的結合,依次處理多個結果

使用await替代Promise.then，依次處理多個結果

同時等待多個結果

使用Promise.all收集多個結果

使用try-catch捕獲異常

如何捕獲Promise.all中的異常

使用finally確保函數執行

一起動手之前，確保你安裝了Node,NPM相關工具，谷歌瀏覽器，為了預覽代碼效果，小編使用 npm install http-server -g 命令快速部署了web服務環境，方便我們運行代碼。接下來，我們寫一個火箭發射場景的小例子（不是真的發射火箭

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/72807.html

ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
ES2017異步函數現已正式可用

摘要：標準已于年月份正式定稿了，并廣泛支持最新的特性異步函數。為了領會，我們需要回到普通回調函數中進一步學習。從此編寫回調函數不再那么痛苦。回調是一個函數，可以將結果傳遞給函數并在該函數內進行調用，以便作為事件的響應。 ES2017標準已于2017年6月份正式定稿了，并廣泛支持最新的特性：異步函數。如果你曾經被異步 JavaScript 的邏輯困擾，這么新函數正是為你設計的。異步函數或多或...

android_c 2019-08-21 12:04 評論0 收藏0
JavaScript 異步

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。寫一個符合規范并可配合使用的寫一個符合規范并可配合使用的理解的工作原理采用回調函數來處理異步編程。 JavaScript怎么使用循環代替(異步)遞歸問題描述在開發過程中，遇到一個需求：在系統初始化時通過http獲取一個第三方服務器端的列表，第三方服務器提供了一個接口，可通過...

tuniutech 2019-08-21 18:34 評論0 收藏0
【全文】狼叔：如何正確的學習Node.js

摘要：感謝大神的免費的計算機編程類中文書籍收錄并推薦地址，以后在倉庫里更新地址，聲音版全文狼叔如何正確的學習簡介現在，越來越多的科技公司和開發者開始使用開發各種應用。說明 2017-12-14 我發了一篇文章《沒用過Node.js，就別瞎逼逼》是因為有人在知乎上黑Node.js。那篇文章的反響還是相當不錯的，甚至連著名的hax賀老都很認同，下班時讀那篇文章，竟然坐車的還坐過站了。大家可以很...

Edison 2019-08-30 14:14 評論0 收藏0
【全文】狼叔：如何正確的學習Node.js

摘要：感謝大神的免費的計算機編程類中文書籍收錄并推薦地址，以后在倉庫里更新地址，聲音版全文狼叔如何正確的學習簡介現在，越來越多的科技公司和開發者開始使用開發各種應用。說明 2017-12-14 我發了一篇文章《沒用過Node.js，就別瞎逼逼》是因為有人在知乎上黑Node.js。那篇文章的反響還是相當不錯的，甚至連著名的hax賀老都很認同，下班時讀那篇文章，竟然坐車的還坐過站了。大家可以很...

fengxiuping 2019-08-22 15:39 評論0 收藏0