简单理解promise,async和await
1.promise是什么?
1、主要用于异步计算;
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果;
3、可以在对象之间传递和操作promise,帮助我们处理队列
异步操作的常见语法
DOM事件
document.getElementById('#start').addEventListener('click', start, false);
function start() {
// 响应事件,进行相应的操作
}
$('#start').on('click', start)
Ajax请求
$.ajax('http://www.wyunfei.com/', {
success (res) {
// 这里可以监听res返回的数据做回调逻辑的处理
}
})
// 或者在页面加载完毕后回调
$(function() {
// 页面结构加载完成,做回调逻辑处理
})
计时器setTimeout
,setInterval
要达到无阻塞高并发异步需求
异步回调的问题:
- 之前处理异步是通过纯粹的回调函数的形式进行处理;
- 很容易进入到回调地狱中,剥夺了函数return的能力;
- 稍有不慎就会踏入回调地狱 - 嵌套层次深,不好维护;
- 问题可以解决,但是难以读懂,维护困难
一般情况我们一次性调用API
就可以完成请求。
有些情况需要多次调用服务器API
,就会形成一个链式调用,比如为了完成一个功能,我们需要调用API1
、API2
、API3
,依次按照顺序进行调用,这个时候就会出现回调地狱的问题。
基于Promise发送Ajax请求
<script type="text/javascript">
function queryData(url) {
var p = new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
// 约定处理正常的情况
resolve(xhr.responseText);
}else{
// 约定处理异常情况
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
return p;
}
// 发送多个ajax请求并且保证顺序
queryData('http://localhost:3000/data')
.then(function(data){
console.log(data)
return queryData('http://localhost:3000/data1');
})
.then(function(data){
console.log(data);
return queryData('http://localhost:3000/data2');
})
.then(function(data){
console.log(data)
});
</script>
promise
- promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以(闭包除外);
- 并未剥夺函数return的能力,因此无需层层传递callback,进行回调获取数据;
- 代码风格,容易理解,便于维护;
- 多个异步等待合并便于解决;
2.async
和await
async
关键字声明后面是一个异步函数,函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hc8nETyE-1603895405230)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1603878480905.png)]
await
(看作是个运算符)操作符它只能在异步函数 async function
内部使用,用于等待一个 Promise 对象,。如果它等到的是非promise对象,那么他直接返回对应的值;如果等到的是promise,那么他会临时阻塞后续代码,直到promise对象resolve,取到 resolve 的值,将其作为运算结果返回。
async/await
的优势在于处理then链,单一的Promise链并不能发现async
和await
的优势,但是如果需要处理多个Promise组成的then链的时候,优势就体现出来了,Promise通过then链来解决多层回调的问题,现在又用async/await
来进一步优化它(Promsie
参数传递太麻烦)。
假设一个业务,分多个步骤完成,每个步骤都是异步的,而且依赖于上一个步骤的结果。用 setTimeout
来模拟异步操作:
/**
* 传入参数 n,表示这个函数执行的时间(毫秒)
* 执行的结果是 n + 200,这个值将用于下一步骤
*/
function takeLongTime(n) {
var p = new Promise(resolve => {
setTimeout(fn(){
resolve(n + 200);
}, n);
});
return p;
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
现在用 Promise 方式来实现这三个步骤的处理:
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${result}`);
console.timeEnd("doIt");
});
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1512.39404296875 ms
如果用 async/await
来实现会是这样
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${result}`);
console.timeEnd("doIt");
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1512.549072265625 ms
结果和之前的 Promise 实现是一样的,但是这个代码看起来是不是清晰得多,几乎跟同步代码一样。
上一篇: Web前端学习笔记(八)~水滴动画
下一篇: ES6异步方案之Promise详解
推荐阅读
-
详解koa2学习中使用 async 、await、promise解决异步的问题
-
C# async 和 await 理解
-
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
-
Swift 并行编程现状和展望 - async/await 和参与者模式
-
ajax的简单理解和使用说明
-
async/await 的基本实现和 .NET Core 2.1 中相关性能提升
-
简单聊聊ES6-Promise和Async
-
【学习笔记】深入理解async/await
-
async/await简单使用
-
JS异步编程 (2) - Promise、Generator、async/await