promise方法

promise

基础样式

var p=new Promise(function(resolve,reject){
    var img=new Image();
    img.src="./img/17.jpg";
    img.onload=function(){
        resolve(img);
    }
    img.onerror=function(){
        reject(img.src+"地址错误");
    }
})

promise对象的连缀函数then有两种写法：
1、then中有两个函数，加载成功运行第一个函数，加载失败则运行第二个函数。

p.then(function(a){
    console.log(a);//执行resolve执行这个函数
    },function(b){
    console.log(b);//执行reject执行这个函数
    }) 

2、then中只有一个加载成功的函数，同时连缀一个catch存放加载失败的函数

p.then(function(a){
    console.log(a);//执行resolve执行这个函数
    }).catch(function(b){
        console.log(b);//执行reject执行这个函数
    }) 

基础样式的案例

加载一张图片后再其后面添加一个按钮，按钮功能是换一张图片，并且调整按钮位置

var bn;
new Promise(function (resolve, reject) {
var img = new Image();
img.src = "./img/16-.jpg";
img.onload = function () {
    resolve(img);
};
})
.then(function (img) {
    return new Promise(function (resolve, reject) {
    bn = document.createElement("button");
    bn.textContent = "按钮";
    document.body.appendChild(img);
    bn.style.position = "absolute";
    bn.style.left = img.offsetWidth + 8 + "px";
    document.body.appendChild(bn);
    bn.onclick = function () {
        resolve(img);
    };
    });
})
.then(function (img) {
    img.remove();
    return new Promise(function (resolve, reject) {
    var imgs = new Image();
    imgs.src = "./img/17.jpg";
    imgs.onload = function () {
        resolve(imgs);
    };
    });
})
.then(function (imgs) {
    document.body.appendChild(imgs);
    bn.style.left = imgs.offsetWidth + 8 + "px";
});

预加载

封装一个promise加载图片的方法

function getImage(src) {
    return new Promise(function (resolve, reject) {
        var img1 = new Image();
        img1.src = src;
        img1.onload = function () {
        resolve(img1);
        };
    });
}

//调用以上方法，将图片的路径当做参数传进去完成加载，成功后会调用resolve函数，即then中的函数，参数是封装的方法中加载好的img1，也就是在then中的参数img，将该图片img放入至数组中

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")
    }).then(function(img){
    arr.push(img);
        return getImage("./img/7-.jpg")
    })

但是上面的写法比较麻烦，无法一齐加载完毕
所以，利用promise的拓展方法：

promise的方法

var arr=[];
for(var i=3;i<80;i++){
arr.push(getImage("./img/"+i+"-.jpg"));
}
将每个加载后的装有img的promise对象插入数组中。

之后利用promise.all统一处理所有Promise数组，并且返回一个列表
Promise.all(arr).then(function(list){
list.forEach(item=>{
console.log(item.src);
})
})

除了promise.all这个方法外，promise还存在其他方法。
例如：promise.race();
异步列表中谁最先完成就执行谁
Promise.race(arr).then(function(img){
console.log(img);
})
又例如：Promise.resolve(1).then(function(a){
console.log(a);
})
上面的写法等同于下面的写法

  new Promise(function(resolve,reject){
    resolve(1);
  }).then(function(a){
    console.log(a);
  }) 


  Promise.reject(1).catch(function(b){
    console.log(b);
  })
        ||
  new Promise(function(resolve,reject){
    reject(1);
  }).catch(function(b){
    console.log(b);
  })

promise的异步

在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 d e

promise中resolve和reject执行干扰问题

function getImage(src) {
    return new Promise(function (resolve, reject) {
        var img1 = new Image();
        img1.src = src;
        img1.onload = function () {
        //   只能执行一个，具有排他性
        //且是那个函数写在前面就先执行那个函数。
        resolve(img1);
        reject(img1.src+"地址错误");
        };
    });
}

存在排他性的原因：promise对象中有一个属性为PromiseStatus(promise状态)，其共有3中状态。
pending 准备状态
fullfiled 执行resolve的状态
rejected 执行reject的状态

promiseStatus的初始状态为pending。
promiseStatus只有在准备状态(pending)的时候才能执行两种情况的函数，且在执行了resolved或者rejected之后，状态就会变为对应函数的状态。而此时便不能再继续执行另一种状态的函数，所以存在了排他性。