js 异步操作处理

在不处理异步的情况下：

        /*
        info: 不处理异步的情况
        result: 打印结果为: 1 - 3 - 2
        */
        console.log(1);
        setTimeout(() => {
            console.log(2);
        }, 2000);
        console.log(3);

1.使用回调函数处理：

        /*
        info: 回调函数处理异步
        result: 打印结果为: 1 - 2 - 3
        */
        console.log(1);
        let fn = (callback) => {
            setTimeout(() => {
                console.log(2);
                callback();
            }, 2000);
        };
        let callback = () => {
            console.log(3)
        };
        fn(callback);

2.Promise处理异步

        /*
        info: Promise处理异步
        result: 打印结果为: 1 - 2 - 3
        */
        console.log(1);
        new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(2);
                resolve();
            }, 2000);
        }).then(() => console.log(3))

3.async  await + Promise处理多异步

        /*
        info: async await + Promise 处理多异步
        result: 打印结果为: 1 - 2 - 3
        */
        let fn1 = () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log(1);
                    resolve();
                }, 3000);
            });
        };
        let fn2 = () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log(2);
                    resolve();
                }, 2000);
            });
        };
        let fn3 = () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log(3);
                    resolve();
                }, 1000);
            });
        };
        let fn = async() => {
            await fn1();
            await fn2();
            await fn3();
        };
        fn();