Promise练习

需求

一次加载一张图片添加到 body 中，前面图片加载失败后面图片不加载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise练习</title>
</head>
<body>
<script>
    const arr = [
        "https://a.msstatic.com/huya/main3/assets/img/index/recomBg_2dc2e.jpg",
        "https://a.msstatic.com/huya/main3/assets/img/index/recomBg_2dc2e.jpg",
        "https://a.msstatic.com/huya/main3/assets/img/index/recomBg_2dc2e.jpg",
    ];

    const loadImage = (url) => {
        return new Promise((resolve, reject) => {
            let oImg = new Image();
            oImg.src = url;
            oImg.onload = function () {
                resolve(oImg);
            }
            oImg.onerror = function () {
                reject("图片加载失败");
            }
        });
    }

    /*
    简化之前的代码
    let p2 = loadImage(arr[0]).then(function (oImg) {
        // console.log(oImg);
        console.log("1");
        document.body.appendChild(oImg);
        return loadImage(arr[1]);
    }, function (msg) {
        console.log(msg);
    });
    let p3 = p2.then(function (oImg) {
        console.log("2");
        // console.log(oImg);
        document.body.appendChild(oImg);
        return loadImage(arr[2]);
    }, function (msg) {
        console.log(msg);
    });
    p3.then(function (oImg) {
        console.log("3");
        // console.log(oImg);
        document.body.appendChild(oImg);
    }, function (msg) {
        console.log(msg);
    });
    */

    // 简化之后的代码
    loadImage(arr[0]).then(function (oImg) {
        // console.log(oImg);
        console.log("1");
        document.body.appendChild(oImg);
        return loadImage(arr[1]);
    }).then(function (oImg) {
        console.log("2");
        // console.log(oImg);
        document.body.appendChild(oImg);
        return loadImage(arr[2]);
    }).then(function (oImg) {
        console.log("3");
        // console.log(oImg);
        document.body.appendChild(oImg);
    }).catch(function (msg) {
        console.log(msg);
    });
</script>
</body>
</html>
posted @ 2022-02-27 23:04  BNTang  阅读(32)  评论(0)    收藏  举报