Web/05-JavaScript之ES6语法/10-ES7:async函数详解.md

67 lines
1.9 KiB
JavaScript
Raw Normal View History

2020-04-09 15:24:26 +08:00
> 备注 async/await 的内容还有待完善
## async/await 异步函数概述
async/await 是在 ES7 中引入的新语法可以更加方便地进行异步操作
本质 Generator 的语法糖
- async 的返回值是 Promise 实例对象
- await 可以得到异步结果
我们在普通的函数前面加上 async 关键字就成了 async 函数
## async/await 的基本用法
async 后面可以跟一个 Promise 实例对象代码举例如下
```javascript
const request1 = function() {
const promise = new Promise(resolve => {
request('https://www.baidu.com', function(response) {
if (response.retCode == 200) {
// 这里的 response 是接口1的返回结果
resolve('request1 success'+ response);
} else {
reject('接口请求失败');
}
});
});
return promise;
};
async function queryData() {
const response = await request1();
});
return response;
}
queryData().then(data => {
console.log(data);
});
```
## 基于 async/await 处理多次 Ajax 请求重要
实际开发中现在有三个网络请求请求2必须依赖请求1的结果请求3必须依赖请求2的结果如果按照往常的写法会有三层回调会陷入回调地狱
这种场景其实就是接口的多层嵌套调用之前学过 Promise它可以把原本的**多层嵌套调用**改进为**链式调用**
而今天要学习的 async/await 可以把原本的多层嵌套调用改成类似于同步的写法非常优雅
代码举例
暂略
## 参考链接
- [js async await 终极异步解决方案](https://www.cnblogs.com/CandyManPing/p/9384104.html)
- [理解 JavaScript async/await](https://segmentfault.com/a/1190000007535316)