理解JavaScript中的异步回调与Promise-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44742816/article/details/119930386
先来三段需求感受下异步回调（看不懂请跳到第二篇再回头看）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步回调的理解</title>
</head>

<body>

</body>
<style>
    body {
        background-color: black;
        color: white;
    }
</style>
<script>
    window.onload = function () {
        console.log("欢迎来到promise训练营")
    }
    //需求1：加载一张图片（异步加载）需要5s钟，加载完成后弹出：“图片已经加载完成”
    const pictureLoaded = function () {
        alert("图片已经加载完成！")
        console.log("图片已经加载完成！")
    }
    //方法一：传统的回调
    const loadPicture1 = function (rollback) {
        setTimeout(() => { rollback() }, 6000)
    }
    //方法二：使用promise 
    const loadPicture2 = function (callback) {
        return new Promise(res => {
            setTimeout(() => { res("success") }, 6000)
        }).then(res => { callback() }).catch(e => e);
    }
    //方法三：使用变形的promise
    const loadPicture3 = async function () {
        await loadPicture2();
        return 3;
    }
    //方法调用
    //loadPicture1(pictureLoaded);
    //loadPicture2(pictureLoaded);
    // loadPicture3().then(()=>{
    //     pictureLoaded();
    // })


    //需求2：加载一张图片(5s)和一个视频（7s）,两个都加载完后弹出："图片和视频已经加载完成"
    const pictureAndVideoLoaded = function () {
        alert("图片和视频已经加载完成")
    }
    //方法一：传统的回调
    const loadPictureAndVideo1 = function (pictureAndVideoLoaded) {
        let loadedPicture = false;
        let loadedVide = false;
        setTimeout(() => {
            loadedPicture = true;
            if (loadedPicture && loadedVide) {
                pictureAndVideoLoaded();
            }
        }, 5000)
        setTimeout(() => {
            loadedVide = true
            if (loadedPicture && loadedVide) {
                pictureAndVideoLoaded();
            }
        }, 7000)
    }
    //方法二：使用promise
    const loadPictureAndVideo2 = function (pictureAndVideoLoaded) {
        var p1 = new Promise(resolve => {
            setTimeout(() => { resolve("图片加载好啦") }, 5000);
        })
        var p2 = new Promise(resolve => {
            setTimeout(() => { resolve("视频加载好啦") }, 7000);
        })
        Promise.all([p1, p2]).then((res) => {
            console.log(res);
            pictureAndVideoLoaded();
        })
    }
    //方法三：变形的promise
    const p1 = async function () {
        return new Promise((res) => {
            setTimeout(() => { res("图片加载好啦") }, 5000);
        })
    }
    const p2 = async function (callback) {
        const value = await p1();
        console.log("等着1的结果:" + value);
        setTimeout(() => callback(), 7000)

    }

    //方法调用
    //loadPictureAndVideo1(pictureAndVideoLoaded);
    //loadPictureAndVideo2(pictureAndVideoLoaded);
    //p2(pictureAndVideoLoaded)
    //console.log(loadPicture2(pictureLoaded))

    //需求3：加载A(3s),再加载B（4s）,再加载C（5s）,再加载D（6s）
    //方法一：promise实现
    const loadMost1 = function () {
        return new Promise(res => {
            setTimeout(() => { res("a加载成功") }, 3000)
        }).then(res => {
            console.log(res);
            return new Promise(res => {
                setTimeout(() => { res("b加载成功了") }, 4000)
            })
        }).then(
            res => {
                console.log(res);
                return new Promise(res => {
                    setTimeout(() => { res("c加载成功了") }, 5000)
                })
            }
        ).then(
            res => {
                console.log(res);
                return new Promise(res => {
                    setTimeout(() => { res("d加载成功了") }, 6000)
                })
            }
        ).then(
            res => {
                console.log(res);
                return 'over'
            }
        )
    }
    //方法二：原始的回调方法(回调地狱)
    const loadMost2 = function () {
        loadingA()
    }
    const loadingA = function () {
        setTimeout(() => {
            console.log("a加载好啦")
            loadingB();
        }, 3000)
    }
    const loadingB = function () {
        setTimeout(() => {
            console.log("b加载好啦")
            loadingC();
        }, 2000)
    }
    const loadingC = function () {
        setTimeout(() => {
            console.log("c加载好啦")
            loadingD();
        }, 2000)
    }
    const loadingD = function () {
        setTimeout(() => {
            console.log("d加载好啦")
        }, 1000)
    }
    //方法二(变形)：原始的回调方法(回调地狱)
   const loadingAny=function(msg,times,func){
       setTimeout(()=>{
           console.log(msg);
           func();
       },times)
   }
   const loadMost3=function(){
        loadingAny("a加载好啦",3000,()=>{
            loadingAny("b加载好啦",2000,()=>{
                loadingAny("c加载好啦",1000,()=>{
                    loadingAny("d加载好啦",1000,()=>{console.log("所有的都加载好啦")})
                })
            })
        })
   }
   loadMost3();
</script>

</html>