148 - async/await - await 关键字 - await 的使用条件与效果

async/await - await 关键字 - await 的使用条件与效果

在 JavaScript 异步编程的世界里，async/await 是一对强大的组合，它们为开发者提供了一种更加直观、简洁的方式来处理异步操作。其中，await 关键字扮演着至关重要的角色，本文将深入探讨 await 的使用条件与效果。

1. await 的基本概念

await 关键字只能在 async 函数内部使用。它的主要作用是暂停 async 函数的执行，直到所等待的 Promise 被解决（resolved）或被拒绝（rejected），然后返回 Promise 的解决值。这使得异步代码看起来就像同步代码一样，极大地提高了代码的可读性和可维护性。

2. await 的使用条件

2.1 必须在 async 函数内部

这是使用 await 最基本的条件。如果在非 async 函数中使用 await，会导致语法错误。以下是一个简单的示例：

// 错误示例：在非 async 函数中使用 await
// 以下代码会报错
// function normalFunction() {
//     const promise = new Promise((resolve) => {
//         setTimeout(() => {
//             resolve('Promise resolved');
//         }, 1000);
//     });
//     const result = await promise;
//     console.log(result);
// }
// 正确示例：在 async 函数中使用 await
async function asyncFunction() {
    const promise = new Promise((resolve) => {
        setTimeout(() => {
            resolve('Promise resolved');
        }, 1000);
    });
    const result = await promise;
    console.log(result);
}
asyncFunction();

2.2 等待的对象必须是 Promise

await 后面通常跟着一个 Promise 对象。如果不是 Promise 对象，await 会将其视为已经解决的 Promise，并立即返回该值。示例如下：

async function testAwait() {
    // 等待一个普通值
    const value = await 10;
    console.log(value); // 输出: 10
    // 等待一个 Promise
    const promise = new Promise((resolve) => {
        setTimeout(() => {
            resolve('Promise resolved');
        }, 1000);
    });
    const result = await promise;
    console.log(result); // 输出: Promise resolved
}
testAwait();

3. await 的效果

3.1 暂停函数执行

当 await 遇到一个 Promise 时，它会暂停 async 函数的执行，直到该 Promise 被解决或被拒绝。这使得代码可以按顺序执行异步操作，而不需要使用复杂的回调函数或链式调用。

async function sequentialTasks() {
    console.log('Task 1 started');
    const promise1 = new Promise((resolve) => {
        setTimeout(() => {
            resolve('Task 1 completed');
        }, 1000);
    });
    const result1 = await promise1;
    console.log(result1);
    console.log('Task 2 started');
    const promise2 = new Promise((resolve) => {
        setTimeout(() => {
            resolve('Task 2 completed');
        }, 1000);
    });
    const result2 = await promise2;
    console.log(result2);
}
sequentialTasks();

在上述代码中，await 确保了 Task 2 会在 Task 1 完成后才开始执行。

3.2 异常处理

await 可以与 try...catch 语句结合使用，方便地处理 Promise 被拒绝的情况。

async function handleErrors() {
    try {
        const promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject(new Error('Promise rejected'));
            }, 1000);
        });
        const result = await promise;
        console.log(result);
    } catch (error) {
        console.error('Error:', error.message);
    }
}
handleErrors();

3.3 简化链式调用

在处理多个嵌套的 Promise 链式调用时，await 可以让代码更加简洁易读。

// 传统的 Promise 链式调用
function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data from API');
        }, 1000);
    });
}
function processData(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(data.toUpperCase());
        }, 1000);
    });
}
// 传统方式
// getData()
//   .then(processData)
//   .then((result) => {
//        console.log(result);
//    })
//   .catch((error) => {
//        console.error(error);
//    });
// 使用 async/await
async function main() {
    try {
        const data = await getData();
        const processedData = await processData(data);
        console.log(processedData);
    } catch (error) {
        console.error(error);
    }
}
main();

4. 总结

通过掌握 await 的使用条件与效果，开发者可以更加高效地编写异步代码，提升代码的质量和可维护性。