JavaScript基础——深入学习async/await

张金宝发布于2019-08-16 14:03 / 402人阅读

摘要：等待的基本语法该关键字的的意思就是让编译器等待并返回结果。这里并不会占用资源，因为引擎可以同时执行其他任务其他脚本或处理事件。接下来，我们写一个火箭发射场景的小例子不是真的发射火箭

本文由云+社区发表

本篇文章，小编将和大家一起学习异步编程的未来——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服务环境，方便我们运行代码。接下来，我们写一个火箭发射场景的小例子（不是真的发射火箭

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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