async意思是异步
await的意思是等待
这两个关键字是在ES7中新加入的语法，如果要在浏览器中使用考虑到兼容性的问题，我们还是需要使用babel进行转换。其目的是为了解决js中的异步问题。
现在异步解决方案有三种：
回调函数
promise
async（Generator）
因为js的异步机制，我们所有的异步操作都会被放到一个队列中，等到所有的同步的操作执行完毕了，才会去执行异步队列中的程序，回调函数是最基础的处理方案，也就是在某个异步操作操作完成以后对返回的结果进行操作。但是使用回调函数也会有一个问题，就是会产生回调地狱，而且，我们的函数会不好看。有的时候我们就是需要等到异步操作执行完成才能进行后面的操作，这样代码写起了就很难看。
而使用promise虽然能解决回调地狱的问题，但是他看起来还是不像是同步的代码，需要大量的 .then 操作，其实写多了也很烦的。而async就是号称是最终解决方案了。
如果我们需要获取到一个异步请求的数据，我们使用这三种方法应该怎么做呢？
回调函数
getDate(res=>{clg res})
promise
getDate.then(res=>{ clg res},res=>{ clg res})
async
let res=await getDate()
可以看到上面两种都需要函数，虽然promise可以解决回调地狱的问题，但是写起了还是很麻烦的，需要写很多的.then
而async则是一种同步的写法了。
那么怎么写async的回调呢？
首先确定一点，async是基于promise来实现的，
getDate返回的是一个promise对象
例如
request ({ method = 'post', url, data }) {
let loadingInstance = Loading.service({
text: '加载中'
})
return axios({
url: url,
method: method,
data: data,
// baseURL: 'http://localhost:8080/api' // test
baseURL: 'http://localhost:2333/api' // prod
})
.then((result) => {
return result.data
}).catch((err) => {
return err
}).finally(() => {
loadingInstance.close()
})
},
这个是请求数据的函数，可以看到是一个promise的函数，不管怎么样，他最后的时候总会返回一个数据，而async是一个前缀，可以这样说，我们给一个函数前面带上了async，那么这个函数就是异步的，可以使用await了，而await后面可以是一promise对象，而async函数返回一个promise对象，所以async函数可以用在另外一个async函数中，也可以当成是一个promise来使用，这里推荐第一种
async getCommonSymptom () {
let reslut = await util.request(
{
url: 'knowledge/getCommonSymptom'
}
)
return reslut
},
async mounted () {
this.commonSymptomList = (await knowledgeService.getCommonSymptom()).data.symptoms
}
可以看到这样我们的代码看起来就很同步了
为什么要使用async在我看来还有一个作用，我们使用promise总是要去考虑resolve跟reject，这里需要两个函数，但是在现在的接口都是restful风格的情况下，很多时候resolve的结果也不见得就是自己需要的，反正最后都会返回数据进行判断，那我们为什么不直接使用if而非要使用多个函数呢？
总结一下
1、await必须在async里面
2、async作用于函数
3、async返回一个promise对象
4、await后最好跟一个promise函数，当然也可以是同步的，但是这个就没有意义了
————————————————
版权声明：本文为CSDN博主「AboyL」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/AboyL/article/details/80561665
网友评论