一、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的更多相关文章

  1. 【前端】【javascript】es6中的遍历器接口Iterator

    好久没发文章啦-.-为了证明我还活着,我决定从笔记里面抓一篇还算不乱比较像文章的发出来... 这些笔记是我在学es6的时候断断续续记录的,最近会一份一份整理陆陆续续发出来,顺便也自己再看一遍.我学习e ...

  2. 【JavaScript】ES6 新语法

    function* 声明 function* 声明(function关键字后跟一个星号)定义一个generator(生成器)函数,返回一个Generator对象. 生成器是一种可以从中退出并在之后重新 ...

  3. 【15】ES6 for Humans: The Latest Standard of JavaScript: ES2015 and Beyond

    [15]ES6 for Humans 共148页: 目前看到:已经全部阅读.   亚马逊地址: 魔芋:总结: 我先看的是阮一峰的在线书籍.这本书的内容很多都与之重复的. 居然卖¥463.也是没谁了. ...

  4. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  5. 【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload

    有时候.在JavaScript中.即使设置了ID也有可能出现document.getElementById()获取不到的情况,然后你就開始想document是否写错之类的.事实上根本就不是你的代码的大 ...

  6. 【JavaScript】我的JavaScript技术总结第一篇——编程细节

    遍历数组 for (var i=0, l=arr.length; i<l; i++) 这样写的一个好处就是让每次循环少一步获取数组对象长度的操作,数组长度越长,价值越明显. 判断变量的真假 if ...

  7. 【JavaScript】下大雪

    引用[JavaScript]满天星的代码,稍作修改的结果: function drawStars() { for (i = 1; i < 100; ++i) { ctx.fillText(&qu ...

  8. 【JavaScript】JavaScript中的replaceAll

    JavaScript中是没有replaceAll的.仅仅有replace,replace仅仅能替换字符中的第一个字符.并且这个replace里面不支持正則表達式,以达到replaceAll的目的. 只 ...

  9. 【JavaScript】Leetcode每日一题-在D天内送包裹的能力

    [JavaScript]Leetcode每日一题-在D天内送包裹的能力 [题目描述] 传送带上的包裹必须在 D 天内从一个港口运送到另一个港口. 传送带上的第 i 个包裹的重量为 weights[i] ...

随机推荐

  1. eclipse spring 配置文件xml校验时,xsd报错

      1.情景展示 eclipse中,spring配置文件报错信息如下: 配置文件头部引用信息为: <?xml version="1.0" encoding="UTF ...

  2. 【翻译自mos文章】在10g中,当发生ORA-00020时,sqlplus登陆会报“connected to an idle instance”

    在10g中.当发生ORA-00020时,sqlplus登陆会报"connected to an idle instance" 来源于: Sqlplus Logon Reports ...

  3. excel随机函数

    =D7+RAND()*(8000-4250) 含义: 1.在D7数值的基础上,随机加一个数值,该数值的随机范围为4250——8000. 2.注意8000和4250要反着写

  4. 安装 scws出现 autoconf 需要先安装

    安装在终端操作, curl -OL http://ftpmirror.gnu.org/autoconf/autoconf-latest.tar.gz tar xzf autoconf-latest.t ...

  5. linux使用pam_tally2.so模块限制登录3次失败后禁止5分钟

    在线上的服务器有时需要限制用户登录次数.这个功能可以通过pam的pam_tally2.so模块来实现 PAM模块是用sun提出的一种认证机制 pam_tally2.so模块 一.格式 pam_tall ...

  6. 基于SIFT特征的全景图像拼接

    基于SIFT特征的全景图像拼接 分类: image Machine learning2013-07-05 13:33 2554人阅读 评论(3) 收藏 举报 基于SIFT特征的全景图像拼接 分类: 计 ...

  7. Djnogo Web开发学习笔记(2)

    安   装 截止目前,https://www.djangoproject.com/download/提供的最新的Django的下载版本为1.6.4. Install Django You’ve got ...

  8. Adobe Photoshop for Mac(图像处理软件)破解版安装

    1.软件简介    Adobe Photoshop(简称 "PS")是 macOS 系统上一款由 Adobe Systems 开发和发行的图像处理软件.Photoshop 主要处理 ...

  9. Benchmark Web App 性能瓶颈分析与性能测试工具的使用方法总结

    主要分为以下几个要素的指标: Disk IO . CPU . mem . Net . MySQL Web性能测试工具: 客户端 服务器端: 服务器性能测试工具: 服务器性能瓶颈分析工具: ab, si ...

  10. Hyper-V 怎样拷贝文件至虚拟硬盘并附加到虚拟机上

    对于大文件来说,通过远程桌面拷贝是件麻烦的事情,虽然简单,但速度受限太多,不推荐使用. 我工作中对于大文件的拷贝,通过创建一个新的虚拟硬盘(VHD),再把大文件拷贝至虚拟硬盘中,最后附加到虚拟机上. ...