简介
学习promise，再次记录一下自己的一点理解及感悟。推荐博客https://www.cnblogs.com/libin-1/p/5947602.html
里面还对比讲解了jquery异步操作$.Deferred()。
一 了解promise
1.png
可以看到：
（1）Promise是一个构造函数，有all方法，race方法,rejec方法,resolve方法,prototype属性。
（2）new Promise()为一个实例化化对象，指向原型prototype。
（3）prototype原型上有then方法，catch方法，finally方法。
1.Promise.all()
（1）all函数接收一个数组作为参数，最终返回一个Promise实例化对象，待数组内的每个元素都执行完成，才进入then(),成功则进入成功的回调函数，失败则进入失败的回调函数。
（2）all函数将resolve或reject传入的值放入数组中，最后作为成功或失败的回调函数的参数。
延申：
异步操作一般会将执行完成的数据返回给回调函数作为参数，像import(),require(),Promise.race(),$.deffered().resolve()等。
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Promise 学习笔记</title>
<script type="text/javascript">
window.onload = function() {
function pms1() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('执行任务1');
resolve('执行任务1成功');
}, 2000);
});
}
function pms2() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('执行任务2');
resolve('执行任务2成功');
}, 2000);
});
}
function pms3() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('执行任务3');
resolve('执行任务3成功');
}, 2000);
});
}
Promise.all([pms1(), pms2(), pms3()]).then(function(data) {
console.log(data);
console.log({}.toString.call(data));
})
}
</script>
</head>
<body>
</body>
</html>
2.png
2.Promise.race()
race:比赛之意。用法和Promise.all()一样，只是Promise.race()只执行跑的最快的那个元素的回调函数，将跑的最快的那个的resolve数据或reject数据传入then（）的回调函数作为参数。
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Promise 学习笔记</title>
<script type="text/javascript">
window.onload = function() {
function pms1() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('执行任务1');
resolve('执行任务1成功');
}, 1000);
});
}
function pms2() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('执行任务2');
resolve('执行任务2成功');
}, 2000);
});
}
function pms3() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('执行任务3');
resolve('执行任务3成功');
}, 3000);
});
}
Promise.race([pms1(), pms2(), pms3()]).then(function(data) {
console.log(data); //注意上面的延时时间
})
}
</script>
</head>
<body>
</body>
</html>
3.png
3.resolve()
4.reject()
5.then()
6.catch()
7.finally()
3、4、5、6、7整体解析：
（1）new的时候，Promise函数接受一个函数作为参数，该函数的参数又接受resolve和reject作为参数，当函数resolve（）执行then（）里面成功的回调，失败执行失败的回调。
（2）catch()为失败回调函数的语法糖。
（3）finally()不管失败成功都会执行，类似于$.ajax()的complete/always。
基本使用
function doSth() {
return new Promise(function(resolve, reject) {
//做点什么异步的事情
//结束的时候调用 resolve，比如：
setTimeout(function(){
resolve(); //这里才是真的返回
},1000)
})
}
//写法一
doSth1().then().then().then().catch().finally();
//写法二
doSth1().then(成功回调，失败回调).then(成功回调，失败回调).then(成功回调，失败回调).finally()。
第一种写法：如果任意环节reject,将不会往下then,直接跳到catch()。
二 个人理解总结
异步执行都是先执行主干，主干执行完了才执行异步回调。
（1）必须resolve()或reject()后且主干执行完成才会去执行then()或catch()。
（2）先主干完成才去执行setTimeout()内的函数，计时从该setTimeout()所在作用域代码开始执行为准。
如在函数内，执行函数时开始计时，在script中全局，则开始执行主干代码就开始计时。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src='./jquery-3.3.1.min.js'></script>
</body>
<script>
$(function(){
var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
var tasks = function(){
console.log("jinru task");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,10000);
return dtd;
};
$.when(wait(dtd))
.done(function(){ console.log("哈哈，成功了！"); })
.fail(function(){ console.log("出错啦！"); });
dtd.resolve();
})
for(var i=0;i<100000;i++){
$('li').appendTo('body')
}
console.log("for结束");
(function(){console.log("自执行函数");})()
setTimeout(function(){console.log("setTimeout是异步执行 先执行主干");},5000)
</script>
</html>
执行顺序：
resolve()且主干执行完成执行done()，fail(),主干完成执行setTimeout()
主干执行完成后，setTimeout（）和then()谁的时间快就先调用谁。
1.png
网友评论