Promise的使用

promise实例

Promise接受一个函数作为参数，该函数的两个参数分别是resolve成功后的回调和reject失败后的回调。

resolve函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

let promise = new Promise((resolve, reject)=>{
    resolve("1")//成功后的回调
    reject("2")//失败后的回调
    console.log(2)
})

Promise实例API

     Promise是一个构造函数，对外提供统一的 API，自己身上有all (全部)、race (赛跑)、resolve(成功回调)、reject (失败回调)等方法，原型上有then、catch、finally等方法。

all

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

all方法的参数是一个一个promise对象，里面的promise实例都是并行的,需要等到所有的promise都完成之后才会有结果。

都成功 返回结果是参数的顺序

        let promise1 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("1");
            },1000)
        })
        let promise2 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                 resolve("2");
            },3000)
        })
        let promise3 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("3");
            },2000)
        })
        let pAll = Promise.all([promise1,promise2,promise3 ]);
        pAll.then((res)=>{
            console.log(res) //[1,2,3] 都成功 返回结果是参数的顺序
        }

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

        let promise1 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("1");
            },1000)
        })
        let promise2 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                 resolve("2");
            },3000)
        })
        let promise3 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                reject("err");
            },2000)
        })
        let pAll = Promise.all([promise1,promise2,promise3 ]);
        pAll.then((res)=>{
           
        },err=>{
            console.log(err) //err 
        });

race

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

        let promise1 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("1");
            },1000)
        })
        let promise2 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                 resolve("2");
            },3000)
        })
        let promise3 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("3");
                //reject("err");
            },2000)
        })
        let pRace= Promise.all([promise1,promise2,promise3]);
        pRace.then((res)=>{
            console.log(res) // 1
        },err=>{
            console.log(err) // err
        });

 then、catch、finally

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

  let promise = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("1");
            },1000)
  })
  promise.then((resolve)=>{
            console.log(resolve)
        },reject=>{
            console.log(reject) 
        });

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

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

PromiseAPI应用

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

    let url1 = 'http://d303.paixin.com/thumbs/1692343/230403026/staff_1024.jpg'
    let url2 = 'http://d303.paixin.com/thumbs/1326558/207334188/staff_1024.jpg'
    let url3 = 'http://d300.paixin.com/thumbs/1000538/6983299/staff_1024.jpg'


    let imgBox = document.getElementById('imgBox') //获取父盒子


    let loadImg = function (src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement('img') //创建img标签
            img.src = src
            img.onload = function () { //图片加载成功触发resolve()成功的回调
                resolve(img)
            }
            img.onerror = function () { //图片加载失败触发reject()失败的回调
                reject(new Error("404--图片加载失败"))
            }
        })
    }
    // 通过Promise.all获取所有Promise
    let Pall = Promise.all([loadImg(url1), loadImg(url2), loadImg(url3)])
    Pall.then(res => { //then获取所有Promise的返回值
        res.forEach(item => {
            imgBox.appendChild(item)
        })
    }).catch(err => {
        console.log(err);
    })

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

    let url1 = 'http://d303.paixin.com/thumbs/1692343/230403026/staff_1024.jpg'

    let imgBox = document.getElementById('imgBox') //获取父盒子

    let loadImg = function (src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement('img') //创建img标签
            img.src = src
            img.onload = function () { //图片加载成功触发resolve()成功的回调
                resolve(img)
            }
            img.onerror = function () { //图片加载失败触发reject()失败的回调
                reject(new Error("404--图片加载失败"))
            }
        })
    }

    // 1.自己手动写一个Promise，给一个定时器模拟超时的时间，---如果定时器时间结束触发resolve()成功的回调
    let imgout = function () {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve('请求超时')
            }, 500);
        })
    }
    //2.通过Promise.race看最后的结果是什么，如果图片没有在手动的定时器时间之前请求完成，Promise.race.then的结构就就会是定时器里resolve()的返回值。
    //否则 Promise.race.then就是图片请求最快的结果
    
    let Rach = Promise.race([imgout(), loadImg(url1)])
    Rach.then(res => {
        if (typeof res !== 'string') {
            imgBox.appendChild(res)
       } else {
            imgBox.innerText = '图片加载失败'
        }
    })