Promise的使用

Promise的实例
使用 new 来创建一个promise对象

let promise = new Promise((resolve, reject) => {
    if (success) {
        resolve(value); // fulfilled
    } else {
        reject(error); // rejected
    }
});

Promise 有三种状态[PromiseState]: pending(进行中) fulfilled(已成功) rejected(已失败)
Promise实例API
一般我们常用有四个：all race resolve reject

all方法

//promise.all
    //需求 有三张图片, 如果这三张图片都加载完成 那么才会显示到页面中 否则就不显示

    let imgList = document.getElementById("imgList");
    console.log(imgList);
    // imgList.appendChild()

    let loadImg = function (src){
        return new Promise((resolve, reject)=>{
            //创建一个img标签
            let img = document.createElement("img");
            img.src = src;//img标签,当获得真正的src属性的时候,图片才开始加载
            img.onload = ()=>{//图片加载成功之后的回调函数
                resolve(img)
            };
            img.onerror = ()=>{//图片加载失败之后的回调函数
                reject(new Error("图片加载失败"))
            }
        })
    }
    let p1 = loadImg("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg");
    let p2 = loadImg("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474266791,210202337&fm=26&gp=0.jpg");
    let p3 = loadImg("https://img2.baidu.com/it/u=142535408,4047253383&fm=26&fmt=auto&gp=0.jpg");
    let pAll = Promise.all([p1,p2,p3])
    pAll.then((res)=>{
         res.forEach(item=>{
             imgList.appendChild(item)
         })
     }).catch((err)=>{
         console.error(err)
    });

race方法

//promise.race
    //需求 有一张图片,当加载时间超过1s的时候 就不再去加载了,在页面中显示加载超时,如果1s内加载完成,则显示图片
    let imgList = document.getElementById("imgList");
    function timeOut(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve("超时")
            },1)
        })
    }
    let p4 = loadImg("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg");
    let pRace = Promise.race([timeOut(),p4])
    pRace.then((res)=>{
        console.log(res);
        if(typeof res === "string"){
            imgList.innerText = "图片请求超市"
        }else {
            imgList.appendChild(res)
        }
    },err=>{

    })

面试Promise的回答
Promise 是处理异步回调的解决方案

Promise 对象是一个容器,里面包裹了一个(些)异步操作,它表示一个预计会在未来完成的异步操作

Promise 有三种状态[PromiseState]: pending(进行中) fulfilled(已成功) rejected(已失败)

Promise 有一个参数是一个回调函数,这个回调函数有两个参数:这两个回调函数只要没有调用就一直是pending

 resolve(成功后的回调函数) reject(失败后的回调函数)

Promise 状态只有两种可能: pending=>fulfilled pending=>rejected;

promise 状态一旦发生改变就会凝固,会一直保持这个状态,不会再发生变化

promise状态一旦发生改变就会触发promise的then方法,then方法中有两个默认回调函数,一个是成功后的回调resolve,一个是失败后的回调reject

promise错误捕获 catch

在创建/使用promise的时候,如果代码报错,那么会自动的走then.reject回调函数,如果在then中没有写reject回调,会在catch中进行错误捕获,catch也可以捕获then方法中的报错

promise finally=>无论promise执行成功或者失败,也无所谓catch方法是否执行,finally方法都会执行

上述内容仅供参考，若有需要还需自己总结