带大家基本了解了Promise内部的实现原理,而提到Promise,就不得不提一个东西,那就是async/awaitasync/await是一个很重要的语法糖,他的作用是用同步方式,执行异步操作。那么今天我就带大家一起实现一下async/await吧!!!

什么是语法糖?

前面说了,async/await是一种语法糖诶!好多同学就会问,啥是语法糖呢?我个人理解就是

语法糖就是一个东西,这个东西你就算不用他,你用其他手段也能达到这个东西同样的效果,但是可能就没有这个东西这么方便了。

  • 举个生活中的例子吧:你走路也能走到北京,但是你坐飞机会更快到北京。
  • 举个代码中的例子吧:ES6的class也是语法糖,因为其实用普通function也能实现同样效果

回归正题,async/await是一种语法糖,那就说明用其他方式其实也可以实现他的效果,用到的是ES6里的迭代函数——generator函数

generator函数

基本用法

generator函数跟普通函数在写法上的区别就是,多了一个星号*,并且只有在generator函数中才能使用yield,什么是yield呢,他相当于generator函数执行的中途暂停点,比如下方有3个暂停点。而怎么才能暂停后继续走呢?那就得使用到next方法next方法执行后会返回一个对象,对象中有value 和 done两个属性

  • value:暂停点后面接的值,也就是yield后面接的值
  • done:是否generator函数已走完,没走完为false,走完为true

async/await用法

其实你要实现一个东西之前,最好是先搞清楚这两样东西

  • 这个东西有什么用?
  • 这个东西是怎么用的?

有什么用?

async/await的用处就是:用同步方式,执行异步操作,怎么说呢?举个例子

比如我现在有一个需求:先请求完接口1,再去请求接口2,我们通常会这么做

function request(num) { // 模拟接口请求return new Promise(resolve => {setTimeout(() => {resolve(num * 2)}, 1000)})
}request(1).then(res1 => {console.log(res1) // 1秒后 输出 2request(2).then(res2 => {console.log(res2) // 2秒后 输出 4})
})

或者我现在又有一个需求:先请求完接口1,再拿接口1返回的数据,去当做接口2的请求参数,那我们也可以这么做

request(5).then(res1 => {console.log(res1) // 1秒后 输出 10request(res1).then(res2 => {console.log(res2) // 2秒后 输出 20})
})

其实这么做是没问题的,但是如果嵌套的多了,不免有点不雅观,这个时候就可以用async/await来解决了

async function fn () {const res1 = await request(5)const res2 = await request(res1)console.log(res2) // 2秒后输出 20
}
fn()

async await和promise的区别

async/await是建立在 Promises上的,不能被使用在普通回调以及节点回调,写法更加优雅,promise是成熟的方案,async/await是es7的最终解决异步方案 将异步操作转为同步化操作

其实把,了解完了之后也没啥大区别,async await就是generator语法糖,可以用generator来模拟async await。

二、async/await概念

async 和 await 是一种用同步方式,执行异步操作,两个内容还是必须同时去写才会生效不然的话也是不会好使

1.asayc的用法,它作为一个关键字放到函数前面,这样普通函数就变为了异步函数,它返回一个promise对象,async函数配合await关键字使用(阻塞代码往下执行)是异步方法

await是等待的意思,等待async结果返回在执行

优点:

1.方便级联调用,不会发生回调地狱场景;

2.同步代码编写方式:更符合代码编写习惯;

3.多个参数传递: Promise的then函数只能传递一个参数,虽然可以通过包装成对象来传递多个参数,但是会导致传递冗余信息,频繁的解析又重新组合参数,是比较麻烦的;async/await没有这个限制,可以当做普通的局部变量来处理,

使用场景:async主要来处理异步的操作,
需求:执行第一步,将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据,然后使用第一步返回的数据执行第二步操作的接口调用,达到异步操作。

async/await原来这就是语法糖相关推荐

  1. 解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!

    解决异步问题--promise.async/await 一.单线程和异步 1.单线程是什么 2.为什么需要异步 3.使用异步的场景 二.promise 1.promise的三种状态 2.三种状态的表现 ...

  2. js异步解决方案 --- 回调函数 vs promise vs generater/yield vs async/await

    javascript -- 深度解析异步解决方案 高级语言层出不穷, 然而唯 js 鹤立鸡群, 这要说道js的设计理念, js天生为异步而生, 正如布道者朴灵在 node深入浅出--(有兴趣的可以读一 ...

  3. 精读《async/await 是把双刃剑》 存在的问题和解决方法

    原文链接: 精读<async/await 是把双刃剑> 存在的问题和解决方法 上一篇: es6 async/await 定时函数 下一篇: 精读<async/await 是把双刃剑& ...

  4. 55. 精读《async await 是把双刃剑》

    本周精读内容是 <async/await 是把双刃剑>. 1 引言 终于,async/await 也被吐槽了.Aditya Agarwal 认为 async/await 语法让我们陷入了新 ...

  5. 精读《async/await 是把双刃剑》

    (点击上方公众号,可快速关注) 作者:黄子毅 segmentfault.com/a/1190000014753495 1 引言 终于,async/await 也被吐槽了.Aditya Agarwal ...

  6. JS 异步发展流程(回调函数=Async/await)

    异步编程的语法目标,就是怎样让它更像同步编程 什么是异步? 异步任务指的是,不进入主线程.而进入"任务队列"(task queue)的任务,只有"任务队列"通知 ...

  7. 为什么async/await方法不能有lock或Monitor

    相信有不少朋友知道async/await有lock语法的情况一般都会编译错误,这个时候可以通过Monitor来解决编译错误的问题:虽然这样解决的编译错误但本质问题还是没有解决. 其实并不是async/ ...

  8. 玩转异步 JS :async/await 简明教程(附视频下载)

    课程介绍 在软件开发领域,简洁的代码 => 容易阅读的代码 => 容易维护的代码,而 ES2017 中的 async/await 特性能让我们编写出相比回调地狱和 Promise 链式调用 ...

  9. 【面试题】前端人70%以上 不了解的promise/async await

    前言   今天给大家分享promise,笔者将从早期的异步代码的困境.promise出现解决了什么问题.异步回调地狱的终极方案并且实现async await的核心语法,其实async/await只是g ...

最新文章

  1. python sendkeys用法_使用python中的sendkeys上载文件将打开一个文件选择器弹出窗口...
  2. 阿里数据中台系列之Apsara Stack控制台报警管理(三)
  3. 只要200页!火爆全网的Python学习知识手册!拿走不谢!
  4. mariadb mysql 配置文件_MariaDB/MySQL配置文件my.cnf解读
  5. [转]HttpWatch工具简介及使用技巧
  6. Kylin兼容性问题解决
  7. Spark算子--Scala版本 educoder
  8. 数学建模论文分析--2015A高教社杯--太阳影子定位的多目标优化模型
  9. VLAN 划分——基于交换机端口划分VLAN
  10. Linux——shell编程基础笔记
  11. UiAutomator2—By、BySelector
  12. 树莓派结合英特尔神经计算棒二代(NCS2)的openvino包部署人工智能应用
  13. python做t检验_Python实现--假设检验:T检验
  14. 写不出好的策划方案?大神手把手教你写策划
  15. matplotlib subplot函数介绍
  16. 北航计算机考研机考,11北航计算机复试上机
  17. 银行利息计算(java)
  18. 为Eclipse安装lombok插件
  19. LintCode(158)
  20. 基于阿里云容器镜像服务加速K8S镜像下载

热门文章

  1. PHP+mysql民用无人机实名登记系统-计算机毕业设计源码24602
  2. SLAM小车系统配置与软件安装过程
  3. oracle 统计一年中每个月数据总和_Oracle 统计某一年中的1-12个月的数据总和
  4. Sun Java系列认证介绍
  5. 阅读代码的一些心得体会
  6. 2.5 自定义srv C++
  7. 2020宝塔面板和旗鱼云梯linux面板对比
  8. 数据库被注入daxia123或cn.jxmmtv.com原因及解决办法
  9. el-popover 主动关闭
  10. npm5 packag-lock.json