Promise的使用

一、Promise实例

Promise(承诺) 表示未来的某个时间一定会返回一个结果

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

    PromiseState(promise状态) pending(进行中) fulfilled(已成功) rejected(已失败)

    Promise状态变化pending =>fulfilled 或者 pending=>rejected 不可逆的,而且一旦执行成功状态就会凝固 不会在发生其他变化了

    Promise实例上 有三个api

    then(resolve=>{},reject=>{}) 方法中有两个回调函数 分别表示成功后的回调 和失败后的回调

    catch(err=>{}) 在创建或者使用promise的时候,如果代码报错那么会自动的走then.reject 如果在then中没有reject回调,会在catch中进行错误捕获, catch方法也会捕获在then方法中发生任何错误finally(()=>{})  无论promise执行成功或者失败,也无论catch方法是否执行, 最终finally都会执行

一旦promise创建成功就会立即执行(new Promise(同步的)

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

在创建或者使用promise的时候,如果代码报错那么会自动的走then.reject 如果在then中没有reject回调,会在catch中进行错误捕获, catch方法也会捕获在then方法中发生任何错误

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

二、Promise实例API

Promise的API 应用程序接口

    Promise.resolve

    Promise.reject

    Promise.all 全部 Promise.all方法 参数是多个promise对象组成的数组, 返回值是一个新的promise对象

     如果参数中的promise对象都成功就正常返回,并且promiseAll方法中的每一个promise都是并行状态,当全部完成之后就会自动的调用promise.all().then()方法.

      如果参数中的promise对象有任意一个没有正常返回,那么整个pAll都会认为是失败的,并且把失败的这个promise对象的返回值直接输出 其他的就不会在继续执行了

{
        let p1 = new Promise((resolve, reject) => {
            resolve(1)
        });
        p1.then((res) => {
            console.log(res);
        })
        let p2 = Promise.resolve(1)
        p2.then((res) => {
            console.log(res);
        })
    }
    {
        let p1 = new Promise((resolve, reject) => {
            reject(1)
        });
        p1.then((res) => {
            console.log(res);
        }).catch(err => {
            console.log("p1 catch", err);
        })
        let p2 = Promise.reject(1)
        p2.then((res) => {
            console.log(res);
        }).catch(err => {
            console.log("p2 catch", err);
        })
    }

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

Promise.all里面的promise实例 都是并行的, 需要等到所有的promise实例都执行完后才会有结果promise实例都执行完之后 pAll状态变为已成功, 返回结果是参数的顺序

当有任意一个失败 pAll会直接返回rejected, pAll的状态都是失败的

{
            let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {//模拟异步
                resolve("p1")
            }, 1000)
        });
        let p2 = new Promise((resolve, reject) => {
            setTimeout(() => {//模拟异步
                resolve("p2")
            }, 5000)
        });
        let p3 = new Promise((resolve, reject) => {
            setTimeout(() => {//模拟异步
                reject("p3")
            }, 2000)
        });
        let pAll = Promise.all([p1, p2, p3]);
        pAll.then(
            resolve => {
                console.log("成功后的回调",resolve);//"成功后的回调",["p1", "p2", "p3"]
            },
            reject => {
                console.log("失败后的回调",reject);
            })

    }

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

{
        let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {//模拟异步
                reject("p1")
            }, 1000)
        });
        let p2 = new Promise((resolve, reject) => {
            setTimeout(() => {//模拟异步
                resolve("p2")
            }, 5000)
        });
        let p3 = new Promise((resolve, reject) => {
            setTimeout(() => {//模拟异步
                resolve("p3")
            }, 2000)
        });
        let pRace = Promise.race([p1, p2, p3]);
        pRace.then(
            resolve => {
                console.log("成功后的回调",resolve);//成功后的回调 p1
            },
            reject => {
                console.log("失败后的回调",reject);//失败后的回调 p1
            })

    }

三、PromiseAPI和应用

let src1 = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg"
    let src2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474266791,210202337&fm=26&gp=0.jpg"
    let src3 = "https://img2.baidu.com/it/u=142535408,4047253383&fm=26&fmt=auto&gp=0.jpg"

    let imgList = document.getElementById("imgList")


   /* let img = document.getElementById("img");
    img.onload = function (){//当图片标签获得scr属性的时候,图片就开始被加载,等到图片加载成功之后就会触发这个回调函数
        console.log("img.onload")
    }
    img.setAttribute("src",src1)

    console.dir(img);*/

    //promiseAll
    //需求 有三张图片 ,如果这三张图片都加载完成 那么就直接显示到页面中 否则就不展示

    function loadImg(src){
        return new Promise((resolve, reject)=>{
            // ...加载图片
            let img = document.createElement("img");
            img.setAttribute("src",src);//当图片标签获得scr属性的时候,图片就开始被加载
            img.onload = function (){//等到图片加载成功之后就会触发这个回调函数
                console.log("img.onload")
                resolve(img)
            }
            img.onerror = function (){//当图片加载失败之后会触发这个回调函数
                reject("加载超时或失败")
            }
        })
    }

    let pAll = Promise.all([loadImg(src1),loadImg(src2),loadImg(src3)]);
    pAll.then(resolve=>{
        // resolve==> [图片1,图片2,图片3]
        console.log(resolve);
        resolve.forEach(i=>{
            imgList.appendChild(i)
        })
    }).catch(err=>{
        console.log("加载超时或失败")
    })

    //promiseRace
    //需求 有一张图片 ,当这张图片的加载时间超过1s的时候,就不去加载了,并且在页面中显示加载超时,如果1s内完成了加载,那么就在页面中进行展示

    function timeOut(){
        return new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("超过1s")
            },1000)
        })
    }

    let pRace = Promise.race([loadImg(src1),timeOut()]);
    pRace.then(resolve=>{
        if(typeof resolve === "string"){
            // imgList.addendChild("加载超时或失败",resolve)
        }else {
            // imgList.addendChild("图片")
        }
    }).catch(err=>{
        // imgList.addendChild("加载超时或失败",err)
    })