promise妙用（等同步函数里的异步执行完再继续执行）

最新推荐文章于 2025-02-13 16:06:48 发布

原创最新推荐文章于 2025-02-13 16:06:48 发布 · 6.9k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

javascript

本文介绍如何利用Promise实现对异步操作的精确控制，确保按照预期顺序执行多个任务。通过示例展示如何让后续步骤等待异步操作完成。

考虑这样一个场景：

function func1(){
    let temp = new Promise((res, rej) => {
        setTimeout( () => {
            console.log('第三');
        },2000)
    })
}
function func2() {
    console.log("第二")
    func1();
}
function func3(){
    console.log('第一');
    func2();
    console.log('第四');
}
func3();

我们希望按顺序打印第一第二第三第四，但是由于fun1里面有一个异步操作，所以先打印了第四，结果为：

但是要是我们第四这一步一定要等第三步运行完才能产生正常的结果，这种情况下我们应该怎么做呢。可以用promise来解决。（虽然有时候也可以用async+await来实现，但是本文讨论更通用的方法），上代码

let promiseTemp = null;
let promiseResolve = null;
function loginFinish() {
    return promiseTemp;
}

function func1(){
    let temp = new Promise((res, rej) => {
        setTimeout( () => {
            console.log('第三');
            promiseResolve('我执行完了，轮到第四了')
        },2000)
    })
}
function func2() {
    promiseTemp = new Promise(resolve => promiseResolve = resolve); 
    console.log("第二")
    func1();
}
async function func3(){
    console.log('第一');
    func2();
    let a = await loginFinish();
    console.log(a)
    console.log('第四');
}
func3();

首先我们fun3执行到fun2的时候，我们给promiseTemp赋值，并将promiseTemp的resolve赋值给等promiseResolve，这时候loginFinish可以看成如下样子：

function loginFinish() {
    return new promise(promiseResolve => promiseResolve())
}

到fun2调用func1的时候有一个异步操作，那么fun3不会等待异步操作，继续执行，执行到let a = await loginFinish();的时候，await要等里面的promise调用promiseResolve才会继续执行，那么promiseResolve什么时候会执行的，就是func1里的异步操作执行完才会执行，所以就完美的符合我们的预期了

标签

#es6 #javascript #promise