举例说明async/await在处理多个异步操作时的优势。

async/await 是 JavaScript 中用于处理异步操作的强大语法糖，在处理多个异步操作时具有显著优势。下面通过具体示例详细说明这些优势。

1. 代码可读性更高

传统的 Promise 链式调用在处理多个异步操作时，会形成嵌套的结构，代码层次会变得复杂，可读性变差。而 async/await 能让异步代码看起来更像同步代码，逻辑更加清晰。

传统 Promise 链式调用示例

function fetchData1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 1');
        }, 1000);
    });
}

function fetchData2(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`${data} 拼接 数据 2`);
        }, 1000);
    });
}

function fetchData3(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`${data} 拼接 数据 3`);
        }, 1000);
    });
}

fetchData1()
   .then((result1) => {
        return fetchData2(result1);
    })
   .then((result2) => {
        return fetchData3(result2);
    })
   .then((finalResult) => {
        console.log(finalResult);
    })
   .catch((error) => {
        console.error(error);
    });

在这个示例中，随着异步操作数量的增加，.then 链式调用会变得冗长，嵌套层次也会加深，代码的逻辑变得难以理解。

使用 async/await 示例

function fetchData1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 1');
        }, 1000);
    });
}

function fetchData2(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`${data} 拼接 数据 2`);
        }, 1000);
    });
}

function fetchData3(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`${data} 拼接 数据 3`);
        }, 1000);
    });
}

async function getData() {
    try {
        const result1 = await fetchData1();
        const result2 = await fetchData2(result1);
        const finalResult = await fetchData3(result2);
        console.log(finalResult);
    } catch (error) {
        console.error(error);
    }
}

getData();

使用 async/await 后，代码结构更加线性，就像同步代码一样，每个异步操作按顺序依次执行，逻辑一目了然，易于理解和维护。

2. 错误处理更方便

在传统的 Promise 链式调用中，错误处理通常需要在每个 .then 后面添加 .catch 或者在最后统一添加 .catch，处理起来比较繁琐。而 async/await 可以使用 try...catch 语句进行统一的错误处理，更加直观和方便。

传统 Promise 错误处理示例

function fetchData1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error('获取数据 1 失败'));
        }, 1000);
    });
}

function fetchData2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 2');
        }, 1000);
    });
}

fetchData1()
   .then((result1) => {
        return fetchData2();
    })
   .then((result2) => {
        console.log(result2);
    })
   .catch((error) => {
        console.error('错误:', error.message);
    });

在这个示例中，虽然可以在最后统一捕获错误，但如果需要在每个 .then 中进行不同的错误处理，代码会变得复杂。

使用 async/await 错误处理示例

function fetchData1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error('获取数据 1 失败'));
        }, 1000);
    });
}

function fetchData2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 2');
        }, 1000);
    });
}

async function getData() {
    try {
        const result1 = await fetchData1();
        const result2 = await fetchData2();
        console.log(result2);
    } catch (error) {
        console.error('错误:', error.message);
    }
}

getData();

使用 async/await 后，可以使用 try...catch 语句捕获 await 操作中抛出的任何错误，代码更加简洁和易于维护。

3. 控制异步操作的执行顺序更灵活

async/await 可以很方便地控制多个异步操作的执行顺序，既可以按顺序依次执行，也可以并行执行部分操作。

顺序执行示例

function fetchData1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 1');
        }, 1000);
    });
}

function fetchData2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 2');
        }, 1000);
    });
}

async function sequentialExecution() {
    const result1 = await fetchData1();
    console.log(result1);
    const result2 = await fetchData2();
    console.log(result2);
}

sequentialExecution();

在这个示例中，fetchData2 会等待 fetchData1 执行完毕后才会开始执行，确保了异步操作的顺序性。

并行执行部分操作示例

function fetchData1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 1');
        }, 1000);
    });
}

function fetchData2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('数据 2');
        }, 1000);
    });
}

async function parallelExecution() {
    const [result1, result2] = await Promise.all([fetchData1(), fetchData2()]);
    console.log(result1);
    console.log(result2);
}

parallelExecution();

在这个示例中，fetchData1 和 fetchData2 会并行执行，Promise.all 会等待所有 Promise 都完成后才会继续执行后续代码，提高了执行效率。

综上所述，async/await 在处理多个异步操作时，通过提高代码可读性、简化错误处理和灵活控制执行顺序等优势，让开发者能够更轻松地编写和维护异步代码。