正文

JS中两个异步代码同步执行新思路揭秘

/0 浏览量
0327

JavaScript（JS）由于其单线程的特性，长期以来，异步编程是其解决并发问题的主流方式。常见的异步编程模式包括回调函数、Promise 和 async/await。然而，在某些场景下，我们可能需要两个或多个异步操作同步执行，即它们必须全部完成后再继续执行后续代码。本文将揭秘几种实现这种同步执行的新思路。

一、使用 Promise.all()

Promise.all() 是一个比较常用的方法，它接收一个 Promise 数组作为参数，当所有 Promise 都成功解决时，Promise.all() 返回的 Promise 也会解决，其结果是一个数组，包含了每个 Promise 解决时的值。

function asyncFunc1() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Result of asyncFunc1"), 1000);
    });
}

function asyncFunc2() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Result of asyncFunc2"), 1000);
    });
}

Promise.all([asyncFunc1(), asyncFunc2()])
    .then(values => {
        console.log(values); // ["Result of asyncFunc1", "Result of asyncFunc2"]
    });

这种方法的缺点是，如果其中一个 Promise 失败，则所有 Promise 都会立即失败，可能不是我们想要的结果。

二、使用 async/await

async/await 是 ES2017 引入的新特性，它使得异步代码的书写和阅读更加接近同步代码，从而提高了代码的可读性和可维护性。

async function executeAsyncFunctions() {
    const result1 = await asyncFunc1();
    const result2 = await asyncFunc2();
    console.log(result1, result2); // 同时获取两个异步操作的结果
}

executeAsyncFunctions();

这种方法可以很好地处理同步执行的需求，但由于它是基于 Promise 的，所以依然存在 Promise.all() 的缺点。

三、使用 async 函数和 for...of

结合 async 函数和 for...of 循环，可以实现对多个异步操作同步执行，同时避免了 Promise.all() 中提到的缺点。

async function executeAsyncFunctions() {
    const promises = [asyncFunc1(), asyncFunc2()];
    for (let promise of promises) {
        const result = await promise;
        console.log(result);
    }
}

executeAsyncFunctions();

这种方法的优点是，即使在某个异步操作失败的情况下，其他异步操作仍将继续执行。

四、使用 async 函数和 Promise.race

Promise.race() 接收一个 Promise 数组作为参数，它会返回一个新的 Promise，该 Promise 会在数组中任意一个 Promise 解决或拒绝时立即解决或拒绝。

async function executeAsyncFunctions() {
    const promises = [asyncFunc1(), asyncFunc2()];
    for (let promise of promises) {
        const result = await Promise.race([promise, new Promise(resolve => setTimeout(resolve, 2000))]);
        console.log(result);
    }
}

executeAsyncFunctions();

这种方法可以确保在异步操作执行过程中，如果有操作超时，可以立即处理，防止无限等待。

总结

在 JavaScript 中，有几种方法可以实现两个异步代码的同步执行。选择合适的方法取决于具体的应用场景和需求。以上几种方法各有优缺点，可以根据实际情况灵活运用。

-- 展开阅读全文 --