如何让一个单独的同步函数等待另一个异步函数？

在JavaScript中，要让一个同步函数等待一个异步函数完成，通常会使用async/await语法。async关键字用于声明一个函数是异步的，而await关键字则用于等待一个Promise对象的解决（resolve）。

基础概念

• 异步函数：使用async关键字声明的函数，它返回一个Promise对象。
• await关键字：只能在async函数内部使用，用于等待一个Promise对象的解决。

示例代码

假设我们有一个异步函数fetchData，它会返回一个Promise，我们希望在同步函数processData中使用它的结果。

// 异步函数
async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('数据已获取');
        }, 1000);
    });
}

// 同步函数，使用async声明使其能够等待异步操作
async function processData() {
    console.log('开始处理数据...');
    // 使用await等待异步函数的结果
    const data = await fetchData();
    console.log(data);
    console.log('数据处理完成');
}

// 调用同步函数
processData();

解释

1. fetchData函数模拟了一个异步操作，比如从服务器获取数据。
2. processData函数被声明为async，这意味着它可以在内部使用await关键字。
3. 在processData函数内部，await fetchData()会暂停函数的执行，直到fetchData返回的Promise被解决。
4. 一旦Promise解决，await后面的代码将继续执行，并且data变量将被赋值为Promise解决的值。

应用场景

这种模式常用于需要等待异步操作完成后再继续执行的场景，例如：

• 网络请求后的数据处理。
• 文件读写操作后的内容处理。
• 数据库查询后的结果处理。

注意事项

• await只能在async函数内部使用。
• 使用await时要注意错误处理，可以使用try...catch语句来捕获异步操作可能抛出的异常。

通过这种方式，你可以优雅地处理异步操作，并保持代码的可读性和同步执行的逻辑结构。