javascript异步操作常用场景代码

本文只对常用场景需要的异步操作方法做解释，需要查看promise详细知识的请自行跳转至阮一峰ES6相关

有两个函数 f1、f2

预期 先执行f1 执行完f1后执行f2 即一共需要8s执行完毕。

当我们需要一个接口返回的数据作为下一个执行函数的参数时，这种场景尤其适用

错误写法1

  function f1() {
        setTimeout(function () {
            console.log('3s后执行此行！');
        }, 3000)
    }

    function f2() {
        setTimeout(function () {
            console.log('5s后执行此行！');
        }, 5000)
    }
    
    f1();
    f2();
    // 运行程序3s后 3s后执行此行！
    // 运行程序5s后  5s后执行此行！
    // 不符合预期  这是我们常规的操作
    

错误写法2

 new Promise((resolve, reject) => {
        f1();
        resolve(1);
    }).then(res => {
        console.log(res);
        f2();
    })
    // 运行后立即执行  1
    // 运行3s后  3s后执行此行！
    // 运行5s后  5s后执行此行！
    // 不符合预期效果 此方式与上述错误写法1效果相同

使用promise

正确写法1

new Promise((resolve, reject) => {
        setTimeout(function () {
            console.log('3s后执行此行！');
            resolve(1); //注意这里
        }, 3000)
    }).then(res => {
        console.log(res);
        f2();
    })
    // 运行程序3s后 3s后执行此行！
    // 运行程序3s后 1
    // 运行程序8s后 5s后执行此行！
    // 符合预期效果

注意
使用promise执行异步操作时，resolve的位置很重要 需要写在确保函数执行完毕的地方 比如setTimeout里面，axios操作里面。

正确写法2

 function f1() {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                console.log('3s后打印此行！')
                resolve('f1结果')
            }, 3000)
        })
    }

    function f2() {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                console.log('5s后打印此行！')
                resolve('f2结果')
            }, 5000)
        })
    }
    const fn = async () => {
        const res1 = await f1();
        const res2 = await f2();
        console.log(res1)
        console.log(res2)
    }
    fn();
    // 程序运行3s后  3s后打印此行！
    // 程序运行8s后  5s后打印此行！
    // f1结果
    // f2结果
    //完全符合预期效果

待补充。。。

以上！