Promise的理解及其方法的使用
Promise本身是异步的，通过其方法的使用达到同步的效果。
Promise是内置函数,有then、all、race等方法
1.Promise的基础理解
PromiseStatus 分为3个
pending 准备状态
resolved 执行resolve的状态
rejected 执行reject的状态
var p=new Promise(function(resolve,reject){ //Promise有一个函数参数，这个函数又有两个回调函数resolve,reject作为参数
var img=new Image();
img.src="./img/17.jpg";
img.onload=function(){
resolve(img); //执行成功
}
img.onerror=function(){
reject(img.src+"地址错误"); //执行失败
}
})
p.then(function(a){ //这个是和上面两个回调函数的参数意义对应的 ,then也是个函数
console.log(a);//执行resolve执行这个函数
},function(b){
console.log(b);//执行reject执行这个函数
})
//和上面的一样 catch()相当于是reject()的执行函数
p.then(function(a){
console.log(a);//执行resolve执行这个函数
}).catch(function(b){
console.log(b);//执行reject执行这个函数
})
2.Promise中then的连缀写法(通过return来实现)
//这个就是连缀的形式
var obj={
a:function(){
console.log("a");
return this;
},
b:function(){
console.log("b");
return this;
}
}
obj.a().b();
obj.b().a();
//Promise中的then连缀
function getImage(src) {
return new Promise(function (resolve, reject) {
var img1 = new Image();
img1.src = src;
img1.onload = function () {
resolve(img1);
};
});
}
getImage("./img/3-.jpg").then(function(img){
arr.push(img);
return getImage("./img/4-.jpg")
}).then(function(img){
arr.push(img);
return getImage("./img/5-.jpg")
}).then(function(img){
arr.push(img);
return getImage("./img/6-.jpg")
})
3.Promise中all,race的使用
function getImage(src) {
return new Promise(function (resolve, reject) {//返回Promise
var img1 = new Image();
img1.src = src;
img1.onload = function () {
resolve(img1);
};
});
}
var arr=[];
for(var i=3;i<80;i++){
arr.push(getImage("./img/"+i+"-.jpg")); //arr数组存储的是Promise
}
Promise.all(arr).then(function(list){ //统一处理所有Promise数组，并且返回一个列表
list.forEach(item=>{
console.log(item.src);
})
})
Promise.race(arr).then(function(img){ //异步列表中谁最先完成就执行谁 只有一个
console.log(img);
})
4.简写
// resolve的简写
Promise.resolve(1).then(function(a){
console.log(a);
})
new Promise(function(resolve,reject){
resolve(1);
}).then(function(a){
console.log(a);
})
//reject的简写
Promise.reject(1).catch(function(b){
console.log(b);
})
new Promise(function(resolve,reject){
reject(1);
}).catch(function(b){
console.log(b);
})
5.连续then的情况
new Promise(function(resolve,reject){
resolve(1);
}).then(function(a){ //执行的都是resolve方法
console.log(a);
}).then(function(a){ //上面的then没有return，后面的then打印的是undefined
console.log(a)
})
//上面的和下面的相同
var p=new Promise(function(resolve,reject){
resolve(1);
});
p.then(function(a){
console.log(a);
// 如果在这里没有return Promise对象就会继续执行下一个then中的内容
// 下一个then中对应的执行对象仍然是当前promise对象
});
p.then(function(b){
console.log(b)
})
6.代码执行的顺序
//promise对象方法中then和catch方法本身就是异步
//在Promise对象的then和catch中都是异步的，除此之外都是同步
console.log("a");
new Promise(function(resolve,reject){
console.log("b");
resolve(1);
console.log("c");
}).then(function(a){
console.log("d");
}).then(function(){
console.log("e");
})
console.log("f"); // a b c f都是同步的
//a b c f d e
7.干扰问题
//干扰问题是基于三个状态的，只要状态不是pendding,就不会改变,也可以说是排他性
function getImage(src) {
return new Promise(function (resolve, reject) {
var img1 = new Image();
img1.src = src;
img1.onload = function () {
// 只能执行一个，具有排他性
resolve(img1);
reject(img1.src+"地址错误");
};
});
}
如果想要更多的学习资料，加好友10398975，免费送
