Promise理解

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，免费送