async/await 来处理异步/同步
最新回答
性感的上帝
2021-05-08 20:55:55
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来模拟一个同步请求，实现功能。
热门标签
