Promise的使用

Promise实例`

      let p1 = new Promise((resolve, reject) => {
            resolve();//成功后的回调函数
            // reject();//失败后的回调函数
            console.log(1)
        })
        p1.then(//异步
            resolve => {
                console.log(2)
                console.log("成功后的回调")
            },
            reject => {
                console.log("失败后的回调")
            }
        )
        console.log(3)
        console.log(p1)

Promise实例API

Promise.all() 如果都成功就正常返回,如果有一个失败,那么都会认为是失败的

let p1 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("p1");
            },1000)
        })
        let p2 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("p2");
            },3000)
        })
        let p3 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                // resolve("p3");
                reject("p3");
            },1000)
        })
        let pAll = Promise.all([p1,p2,p3]);
        pAll.then((res)=>{
            console.log(res)
        },err=>{
            console.log("err==>",err)
        });
        console.log(pAll);

Promise.race() 返回的也是一个promise对象, race方法谁先有结果,就返回谁,无论成功还是失败(成功就走resolve,失败的会在reject中返回

  let p1 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                // resolve("p1");
                reject("p1");
            },1000)
        })
        let p2 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("p2");
            },3000)
        })
        let p3 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("p3");
                // reject("p3");
            },2000)
        })
        let pRace = Promise.race([p1,p2,p3]);
        pRace.then((res)=>{
            console.log(res)
        },err=>{
            console.log("err==>",err)
        });
        console.log(pRace)

PromiseAPI和应用

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");

promise.race

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=>{

    })