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. 总结

使用条件	说明
必须在 `async` 函数内部	否则会导致语法错误
等待的对象必须是 Promise	若不是 Promise，会将其视为已解决的 Promise 并立即返回该值

效果	说明
暂停函数执行	确保异步操作按顺序执行
异常处理	可结合 `try...catch` 语句处理 Promise 被拒绝的情况
简化链式调用	让处理多个嵌套的 Promise 链式调用的代码更简洁易读

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

.bat程序教程	python入门基础教程	Pandas教程	Pygame教程
Django3.2.9教程	Flask1.1.1教程	python3.X - 区块链教程	Java教程
Spring教程	C#教程	PHP教程	R教程
Node.js教程	mysql数据库教程	Redis数据库教程	MongoDB数据库教程
RabbitMQ教程	Lua教程	FindBI教程	HTML5教程
CSS教程	Javascript教程	jQuery教程	微信小程序教程
微信小游戏教程	Vue.js教程	服务器教程	TensorFlow教程
PyTorch教程	Unity教程	Objective-C教程	Android教程
AppleScript教程	Mac - SHELL教程	算法教程	Python教程
数据库教程	运维工具教程	Nginx教程	Docker教程

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