Promise的使用

最新推荐文章于 2024-07-25 10:45:42 发布

努力的生存

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量58

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/liuhongsai0616/article/details/120597944

版权

promise是一个容器里面放着某个未来才会结束的事件
Promise 有三种状态: pending(进行中) fulfilled(已成功) rejected(已失败)
Promise 有一个参数是一个回调函数,这个回调函数有两个参数:这两个回调函数只要没有调用就一直是pending
resolve(成功后的回调函数) reject(失败后的回调函数)
promise 状态一旦发生改变就会凝固,会一直保持这个状态,不会再发生变化
promise状态一旦发生改变就会触发promise的then方法,then方法中有两个默认回调函数,一个是成功后的回调resolve,一个是失败后的回调reject
promise错误捕获 catch
使用promise的时候,如果代码报错,那么会自动的走then.reject回调函数,如果在then中没有写reject回调,会在catch中进行错误捕获也可以捕获then方法中的报错

Promise实例

 console.log(1);//同步1
        let p1 = new Promise((resolve, reject) => {
            resolve('1')//成功后的回调
            reject('2')//失败后的回调
            console.log(2);//同步2
        })
        console.log(p1);

        p1.then((resolve) => {//异步操作
            console.log(3);//异步4
            console.log("resolve 成功后的结果==》", resolve);
        }, (reject) => {
            console.log("reject 失败后的结果==》", reject);
        })
        console.log(4);//同步3
        // Promise只要创建成功就会立即执行 new的Promise实例里面还是同步执行Promise.then方法是异步操作
        // 所以执行  console.log顺序是1，2，4，3

Promise.all

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

        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);// 失败后的回调 p3
            })

Promise.race

race 赛跑 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的应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>PromiseAPI的应用</title>
</head>

<body>
    <div id="imgList">

        <!--    <img id="img" src="./favicon.ico" alt="">-->

    </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 imgList = document.getElementById("imgList")



        // Promise.all() 共有三张图片, 当这三张图片都加载完成 那么就会直接显示到页面中 如果其中一个没有加载完成就不展示
        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 => {
            // 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)
        })


    </script>
</body>

</html>