async/await原来这就是语法糖

2023-03-09 20:46| 来源: 网络整理| 查看: 265

带大家基本了解了**Promise内部的实现原理，而提到Promise，就不得不提一个东西，那就是async/await，** async/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秒后输出 2 request(2).then(res2 => { console.log(res2) // 2秒后输出 4 }) }) 复制代码

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

request(5).then(res1 => { console.log(res1) // 1秒后输出 10 request(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中先拿到一个接口的返回数据，然后使用第一步返回的数据执行第二步操作的接口调用，达到异步操作。

【本文地址】

公司简介

联系我们