解决异步的三种方法

场景 - 模块2数据的渲染需要依赖模块1的请求数据结果。

类比例子：葫芦娃救爷爷，一个一个送。

有兴趣看动画片的可复制链接：https://www.bilibili.com/video/BV1v54y1m7fz?from=search&seid=10570786521673693427

方法一：回调函数

        function dawa() {
            setTimeout(() => {
                console.log("大娃送完了");
                erwa();
            }, Math.floor(Math.random() * 5 + 1) * 1000);

        }

        function erwa() {
            setTimeout(() => {
                console.log("二娃送完了");
                sanwa();
            }, Math.floor(Math.random() * 5 + 1) * 1000);
        }

        function sanwa() {
            setTimeout(() => {
                console.log("三娃送完了");
            }, Math.floor(Math.random() * 5 + 1) * 1000);

        }

        dawa();
        // 结果：
        // 15:37:33.930       大娃送完了
        // 15:37:33.932       二娃送完了
        // 15:37:34.933       三娃送完了

方法二：promise

        function dawa() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("大娃送完了");
                    resolve();
                }, Math.floor(Math.random() * 5 + 1) * 1000);
            })
        }

        function erwa() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("二娃送完了");
                    resolve()
                }, Math.floor(Math.random() * 5 + 1) * 1000);
            })
        }

        function sanwa() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("三娃送完了");
                    resolve();
                }, Math.floor(Math.random() * 5 + 1) * 1000);
            })
        }

        // promise
        dawa().then(() => {
            erwa().then(() => {
                sanwa();
            })
        })
        // 结果：
        // 15:42:38.711      大娃送完了
        // 15:42:38.713      二娃送完了
        // 15:42:40.714      三娃送完了

方法三：async await

       function dawa() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("大娃送完了");
                    resolve(123);
                }, Math.floor(Math.random() * 5 + 1) * 1000);
            })
        }

        function erwa() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("二娃送完了");
                    resolve()
                }, Math.floor(Math.random() * 5 + 1) * 1000);
            })
        }

        function sanwa() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("三娃送完了");
                    resolve();
                }, Math.floor(Math.random() * 5 + 1) * 1000);
            })
        }

        function sinwa() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("四娃送完了");
                    resolve();
                }, Math.floor(Math.random() * 5 + 1) * 1000);
            })
        }

        function wunwa() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("五娃送完了");
                    resolve();
                }, Math.floor(Math.random() * 5 + 1) * 1000);
            })
        }

        function liunwa() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("六娃送完了");
                    resolve();
                }, Math.floor(Math.random() * 5 + 1) * 1000);
            })
        }

        // async await
        async function jiuyeye() {
            // wait后面接的一般是promise，返回值是promise的resolve的参数。
            let data = await dawa();
            console.log(data);      //123

            await erwa();
            await sanwa();

            // 四娃和五娃同时在送, Promise.all表示两个promise在同时执行，
            // 比如等到两个promise都执行完毕之后才执行后面的代码
            await Promise.all([sinwa(), wunwa()]);

            liunwa();
        }

        jiuyeye();
        // 结果：
        // 15:49:10.181       大娃送完了
        // 15:49:10.181       123
        // 15:49:14.182       二娃送完了
        // 15:49:17.183       三娃送完了
        // 15:49:21.186       五娃送完了   四娃和五娃的顺序不确定，同时执行
        // 15:49:22.184       四娃送完了
        // 15:49:24.186       六娃送完了