JavaScript基础——深入学习async/await
本文由云+社区发表
本篇文章,小编将和大家一起学习异步编程的未来——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服务环境,方便我们运行代码。接下来,我们写一个火箭发射场景的小例子(不是真的发射火箭
JavaScript基础——深入学习async/await的更多相关文章
- JavaScript ES7 中使用 async/await 解决回调函数嵌套问题
原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/ JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题.以往在浏览器中, ...
- 七 vue学习 async/await
1: javaScript async/await: 调用async函数的时候,是异步的,函数后面的代码继续执行.! async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解 ...
- 初步学习async/await,Task.GetAwaiter,Task.Result
网上关于async/await的知识有很多,看了很多但不如自己实践一遍来得快,所以这里记录下我的理解和大家学习下. 首先以最简单的同步方法来开始如下 private static void Test( ...
- javascript基础教程学习总结(1)
摘自javascript基础教程 开始: 1.将脚本放在哪里: 1.1 放在html和<html>之间 范例: <!DOCTYPE html PUBLIC "-//W3C/ ...
- JavaScript 循环:如何处理 async/await
如何串行或者并行运行异步循环? 在使用循环处理异步的魔法之前,我们先来看下我们是怎么处理同步循环的. 同步循环 很久以前我写的循环是这样的: for (var i = 0; i < array. ...
- javascript基础知识学习
javascript中几种基础函数的介绍 1.typeof 注意: ① typeof 是操作符,不是函数: ② typeof 操作符 接收一个参数,用来判断参数数据类型,存在六种返回值类型,非别是:u ...
- javascript 基础知识学习1
JavaScript 是脚本语言.浏览器会在读取代码时,逐行地执行脚本代码.而对于传统编程来说,会在执行前对所有代码进行编译.基础知识:1).JavaScript 对大小写敏感.JavaScript ...
- JavaScript基础 :学习javascript的原因
JavaScript是世界上最流行的脚本语言,因为你在电脑.手机.平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱动的. 简单地说,JavaScript ...
- javascript基础笔记学习
/** * Created by Administrator on 2016/12/26. */ /* var box; alert( typeof box); box是Undefined类型,值是u ...
随机推荐
- window下github的学习心得
准备工作: 安装git: 1.下载地址:http://msysgit.github.io/ 2.安装:本人是一路next的,现在没发现有什么问题.详细的安装过程参考:https://jingyan.b ...
- C#实现简单的RPC
demo地址:https://pan.baidu.com/s/1PeTdV2V9DF87jZTHdz4CyA 提取码:n2qm 参考地址:https://github.com/neuecc/Magic ...
- Git使用(二、分支的创建和上传)
介绍使用TortoiseGit创建分支并push到gitlab项目库,转载请注明出处. 一.创建一个新的文件夹,把要待编辑的工程从gitlab上pull到该文件夹. 其中URL从gitlab的对应项目 ...
- mount的几个选项
一.mount -o noatime表示在读文件时不去更改文件的access time属性了,所以该选项会提升mount操作的执行效率. 二.mount --bind:等同于 -o bind可用于挂载 ...
- org.apache.maven.archiver.mavenarchiver.getmanifest怎么解决
原因就是你的maven的配置文件不是最新的 1.help ->Install New Software -> add ->https://otto.takari.io/content ...
- python列表和字符串的三种逆序遍历方式
python列表和字符串的三种逆序遍历方式 列表的逆序遍历 a = [1,3,6,8,9] print("通过下标逆序遍历1:") for i in a[::-1]: print( ...
- 《java多线程编程核心技术》(一)使用多线程
了解多线程 进程和多线程的概念和线程的优点: 提及多线程技术,不得不提及"进程"这个概念.百度百科对"进程"的解释如下: 进程(Process)是计算机中的程序 ...
- 注册MongoDB为系统服务(二)
注册MongoDB为系统服务(二)http://blog.csdn.net/qq_35685189/article/details/52304245
- @Slf4j注解实现日志输出
自己写日志的时候,肯定需要: private final Logger logger = LoggerFactory.getLogger(LoggerTest.class); 每次写新的类,就需要重新 ...
- win10 win7 环境下 oracle 11g和Plsql的安装、卸载遇到的问题。
* win7一体机在安装好oracle和PlSQL后,无法连接到orcl数据库,同时也忘记了sys设置的密码.(在这里应注意在安装过程中,应选择统一口令,这里我均设置成了orcl,同时也应该注意在最后 ...