Promise的使用

Promise

先简单说一下Promise

Promise是一个处理异步回调的解决方案  他的对象是一个容器，里面包裹一些异步操作 他表示一个预计会在未来完成的异步操作 

Promise 他有三种状态 pending(进行中) fufilled(已成功) rejected(已失败) 

他的状态只有两种可能 进行中——>已成功  进行中——>已失败 Promise状态是不可逆的 而且一但执行改变状态 他就会凝固 会一直保持这个状态，不会在发生变化

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

promise 错误捕获 catch

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

Promise实例

//一但Promise创建成功 就会立即执行
console.log(111)
let a1 = new Promise((resolve, reject)=>{
    resolve("1")
    reject("2")
    console.log(222)
})
console.log(a1)

a1.then((resolve){ //异步操作
    // resolve  成功后的结果
    console.log(3)
    console.log("resolve  成功后的结果",resolve)
},(reject){
   //reject  失败后的结果
    console.log("reject 失败后的结果",reject)
})

console.log(4)

Promise实例API

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

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

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

all ：全部 Promise.all() 如果都成功就正常返回,如果有一个失败,那么都会认为是失败的 （里面的promise实例都是并行的,需要等到所有的promise都完成之后才会有结果）

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

PromiseAPI和应用

上一个小案例

<div id="image"></div>

    <script>
        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 image = document.getElementById("image")


        function loadImg(src){
            return new Promise((resolve,reject) => {
                let img = document.createElement("img");
                img.setAttribute("src",src);
                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 => {
            console.log(resolve);
            resolve.forEach(i=>{
                image.appendChild(i)
            })

        }).catch(err => {
            console.log("加载超时或失败");
        })

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

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


    </script>