【JavaScript】--- ES6/ES7/ES8
一、async
async其实是ES7才有有的关键字,async的意思是异步,顾名思义是有关异步的操作
async用于声明一个函数是异步的。
通常情况下async、await都是跟随promise一起使用,因为async返回值都是一个promise对象,async适用于任何类型的函数上
二、基本使用
使用async其实很简单,只需要在函数前面加一个async即可,这个函数的返回值是一个promise
- //用来声明一个函数是异步的
- async function fn(){
- return 123;
- }
- //返回值是一个promise
- console.log(fn())
- /*
- Promise
- __proto__: Promise
- [[PromiseStatus]]: "resolved"
- [[PromiseValue]]: 123
- */
- //可以通过.then拿到返回值
- fn().then((data)=>{
- console.log(data);//
- })
三、await
await关键字不能够单独使用,必须在async中进行使用
await等待异步执行返回结果后才会执行下面的代码,其实await就是阻止主函数的运行
- function fn(){
- return new Promise((resolve)=>{
- setTimeout(()=>{
- console.log(1111);
- resolve()
- },2000)
- })
- }
- async function fn1(){
- await fn();
- setTimeout(()=>{
- console.log(2222);
- },1000)
- }
- fn1()
四、如何实现多个异步同步执行
- function fn(){
- return new Promise((resolve)=>{
- setTimeout(()=>{
- console.log(1111);
- resolve()
- },3000)
- })
- }
- function fn1(){
- return new Promise((resolve)=>{
- setTimeout(()=>{
- console.log(2222);
- resolve()
- },2000)
- })
- }
- function fn2(){
- return new Promise((resolve)=>{
- setTimeout(()=>{
- console.log(3333);
- resolve()
- },1000)
- })
- }
- async function fn3(){
- await fn();
- await fn1();
- await fn2();
- }
- fn3()
五、总结
async函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖。
因此如果需要实现多个异步同步执行必须每次await后都返回一个新的promise
【JavaScript】--- ES6/ES7/ES8的更多相关文章
- 【前端】【javascript】es6中的遍历器接口Iterator
好久没发文章啦-.-为了证明我还活着,我决定从笔记里面抓一篇还算不乱比较像文章的发出来... 这些笔记是我在学es6的时候断断续续记录的,最近会一份一份整理陆陆续续发出来,顺便也自己再看一遍.我学习e ...
- 【JavaScript】ES6 新语法
function* 声明 function* 声明(function关键字后跟一个星号)定义一个generator(生成器)函数,返回一个Generator对象. 生成器是一种可以从中退出并在之后重新 ...
- 【15】ES6 for Humans: The Latest Standard of JavaScript: ES2015 and Beyond
[15]ES6 for Humans 共148页: 目前看到:已经全部阅读. 亚马逊地址: 魔芋:总结: 我先看的是阮一峰的在线书籍.这本书的内容很多都与之重复的. 居然卖¥463.也是没谁了. ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- 【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload
有时候.在JavaScript中.即使设置了ID也有可能出现document.getElementById()获取不到的情况,然后你就開始想document是否写错之类的.事实上根本就不是你的代码的大 ...
- 【JavaScript】我的JavaScript技术总结第一篇——编程细节
遍历数组 for (var i=0, l=arr.length; i<l; i++) 这样写的一个好处就是让每次循环少一步获取数组对象长度的操作,数组长度越长,价值越明显. 判断变量的真假 if ...
- 【JavaScript】下大雪
引用[JavaScript]满天星的代码,稍作修改的结果: function drawStars() { for (i = 1; i < 100; ++i) { ctx.fillText(&qu ...
- 【JavaScript】JavaScript中的replaceAll
JavaScript中是没有replaceAll的.仅仅有replace,replace仅仅能替换字符中的第一个字符.并且这个replace里面不支持正則表達式,以达到replaceAll的目的. 只 ...
- 【JavaScript】Leetcode每日一题-在D天内送包裹的能力
[JavaScript]Leetcode每日一题-在D天内送包裹的能力 [题目描述] 传送带上的包裹必须在 D 天内从一个港口运送到另一个港口. 传送带上的第 i 个包裹的重量为 weights[i] ...
随机推荐
- packageOfficialDebug和resourceFile does not exist.
Android Studio运行时候报packageOfficialDebug错误 报错信息为 Error:A problem was found with the configuration of ...
- 018-Go将磁盘目录实现简单的静态Web服务
package main import( "net/http" ) func main(){ http.Handle("/", http.FileServer( ...
- Spark机器学习(8):LDA主题模型算法
1. LDA基础知识 LDA(Latent Dirichlet Allocation)是一种主题模型.LDA一个三层贝叶斯概率模型,包含词.主题和文档三层结构. LDA是一个生成模型,可以用来生成一篇 ...
- 为Docker容器设置http代理
以下内容复制自:传送门 ,可以直接去该地址查看. HTTP/HTTPS proxy The Docker daemon uses the HTTP_PROXY, HTTPS_PROXY, and NO ...
- Gradle 中 buildConfigField的巧妙应用
当用AndroidStudio来进行Android项目开发时,build.gradle就是这个工具的核心部分,所有的依赖,debug/release设置,混淆等都在这里进行配置. 下面就主要来记录下利 ...
- django --- DetailView源码分析
[背景] 最近在看django官方文档的class-based-views这一节的时候一直不得要领,感觉自己清楚,但是回想起来又没有脉络:于是没有办法只 能是“暗中观察”django的源码了. 刚打开 ...
- [k8s]k8s pod的4种网络模式最佳实战(externalIPs )
hostPort相当于docker run -p 8081:8080,不用创建svc,因此端口只在容器运行的vm上监听 缺点: 没法多pod负载 $ cat pod-hostport.yaml api ...
- 6-9-哈夫曼树(HuffmanTree)-树和二叉树-第6章-《数据结构》课本源码-严蔚敏吴伟民版
课本源码部分 第6章 树和二叉树 - 哈夫曼树(HuffmanTree) ——<数据结构>-严蔚敏.吴伟民版 源码使用说明 链接☛☛☛ <数据结构-C语言版> ...
- Maven使用详解,非常详细
本文转:http://blog.csdn.net/u010425776/article/details/52027706 什么是Maven? 如今我们构建一个项目需要用到很多第三方的类库,如写一个使用 ...
- [转]RabbitMQ的安装与客户端的简单实用
原文地址:http://www.cnblogs.com/yangh965/p/5862347.html 本文主要内容是RabbitMQ的安装步骤[Windows系统与linux上的安装]及客户端的简单 ...