一、async
  async其实是ES7才有有的关键字,async的意思是异步,顾名思义是有关异步的操作

  async用于声明一个函数是异步的。

  通常情况下async、await都是跟随promise一起使用,因为async返回值都是一个promise对象,async适用于任何类型的函数上

二、基本使用
  使用async其实很简单,只需要在函数前面加一个async即可,这个函数的返回值是一个promise

  

  1. //用来声明一个函数是异步的
  2. async function fn(){
  3. return 123;
  4. }
  5.  
  6. //返回值是一个promise
  7. console.log(fn())
  8. /*
  9. Promise
  10. __proto__: Promise
  11. [[PromiseStatus]]: "resolved"
  12. [[PromiseValue]]: 123
  13.  
  14. */
  15.  
  16. //可以通过.then拿到返回值
  17. fn().then((data)=>{
  18. console.log(data);//
  19. })

三、await
  await关键字不能够单独使用,必须在async中进行使用
  await等待异步执行返回结果后才会执行下面的代码,其实await就是阻止主函数的运行

  1. function fn(){
  2. return new Promise((resolve)=>{
  3. setTimeout(()=>{
  4. console.log(1111);
  5. resolve()
  6. },2000)
  7. })
  8.  
  9. }
  10.  
  11. async function fn1(){
  12. await fn();
  13. setTimeout(()=>{
  14. console.log(2222);
  15. },1000)
  16. }
  17.  
  18. fn1()

四、如何实现多个异步同步执行

  

  1. function fn(){
  2. return new Promise((resolve)=>{
  3. setTimeout(()=>{
  4. console.log(1111);
  5. resolve()
  6. },3000)
  7. })
  8.  
  9. }
  10.  
  11. function fn1(){
  12. return new Promise((resolve)=>{
  13. setTimeout(()=>{
  14. console.log(2222);
  15. resolve()
  16. },2000)
  17. })
  18. }
  19.  
  20. function fn2(){
  21. return new Promise((resolve)=>{
  22. setTimeout(()=>{
  23. console.log(3333);
  24. resolve()
  25. },1000)
  26. })
  27. }
  28.  
  29. async function fn3(){
  30. await fn();
  31. await fn1();
  32. await fn2();
  33. }
  34.  
  35. 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. packageOfficialDebug和resourceFile does not exist.

    Android Studio运行时候报packageOfficialDebug错误 报错信息为 Error:A problem was found with the configuration of ...

  2. 018-Go将磁盘目录实现简单的静态Web服务

    package main import( "net/http" ) func main(){ http.Handle("/", http.FileServer( ...

  3. Spark机器学习(8):LDA主题模型算法

    1. LDA基础知识 LDA(Latent Dirichlet Allocation)是一种主题模型.LDA一个三层贝叶斯概率模型,包含词.主题和文档三层结构. LDA是一个生成模型,可以用来生成一篇 ...

  4. 为Docker容器设置http代理

    以下内容复制自:传送门 ,可以直接去该地址查看. HTTP/HTTPS proxy The Docker daemon uses the HTTP_PROXY, HTTPS_PROXY, and NO ...

  5. Gradle 中 buildConfigField的巧妙应用

    当用AndroidStudio来进行Android项目开发时,build.gradle就是这个工具的核心部分,所有的依赖,debug/release设置,混淆等都在这里进行配置. 下面就主要来记录下利 ...

  6. django --- DetailView源码分析

    [背景] 最近在看django官方文档的class-based-views这一节的时候一直不得要领,感觉自己清楚,但是回想起来又没有脉络:于是没有办法只 能是“暗中观察”django的源码了. 刚打开 ...

  7. [k8s]k8s pod的4种网络模式最佳实战(externalIPs )

    hostPort相当于docker run -p 8081:8080,不用创建svc,因此端口只在容器运行的vm上监听 缺点: 没法多pod负载 $ cat pod-hostport.yaml api ...

  8. 6-9-哈夫曼树(HuffmanTree)-树和二叉树-第6章-《数据结构》课本源码-严蔚敏吴伟民版

    课本源码部分 第6章  树和二叉树 - 哈夫曼树(HuffmanTree) ——<数据结构>-严蔚敏.吴伟民版        源码使用说明  链接☛☛☛ <数据结构-C语言版> ...

  9. Maven使用详解,非常详细

    本文转:http://blog.csdn.net/u010425776/article/details/52027706 什么是Maven? 如今我们构建一个项目需要用到很多第三方的类库,如写一个使用 ...

  10. [转]RabbitMQ的安装与客户端的简单实用

    原文地址:http://www.cnblogs.com/yangh965/p/5862347.html 本文主要内容是RabbitMQ的安装步骤[Windows系统与linux上的安装]及客户端的简单 ...