async/await 来处理异步/同步

Posted 2023-02-16

参考技术A 前面比较啰嗦，希望读者耐心看完。
async/await可以说是一个老生常谈，但是每一个前端工程师却又避不开的话题。
在JQuery一把梭的时代，如果遇到下面类似的需求，你要怎么做？
需求：拿到第一个ajax请求省，拿到省数据请求第二个ajax来获得市的数据，拿到市的数据再请求第三个ajax来获得区的数据。

最常见的写法莫过于两种：
1、回调地狱式写法：

简直令人发疯。

或者是这样？同步请求

我靠，只要一个数据请求不回来页面就完犊子了。这简直是噩梦。

别笑，我相信身为前端工程师一定这么写过。

直到有一天，你发现vue里没有Jquery，只有基于promise写的axios.

一开始在使用axios的时候，还是脱离不了必须同步请求的变成思想，于是在vue项目中引入了jquery，把项目搞成了四不像。

研究了好久，终于发现了async/await

async 词面翻译 “异步”。 async关键字一般放到function的前面，用来表示一个异步函数。如下

根据阮一峰es6教程关于async部分的介绍，能得知async会返回一个Promise对象。所以我们可以通过then来调用。

如果不太明白，那我这么写你一定会明白：

词面意思“等待”，它只会在async函数体内出现，代表执行到这里的时候，等一下。它后面可以跟任何表达式，不过一般会跟一个Promise，可以实现异步函数同步调用的效果。

delay是异步函数，在正常情况下，如果这样写：

会先输出2，然后1秒后再输出1.

但是在await的影响下，函数会先等待5秒后输出a，在等待4秒后输出b。

话题再转回到我们一开始说的ajax，使用async/await的方法来写，是不是感觉优雅多了？

在vue中，我们会使用axios来与后台做数据交互，axios没有同步请求，只有异步请求，所以我们可以使用async/await来模拟一个同步请求，实现功能。