在JavaScript中，await关键字是ES2017（也称为ES8）引入的异步函数特性的一部分，它允许我们以更直观、更同步的方式编写异步代码。在使用await时，我们必须将其置于async函数内部。本文将通过10段代码来深入理解await在JavaScript中的工作原理和用途。
代码段1：await与Promise解决
async function fetchValue() {
return new Promise(resolve => setTimeout(() => resolve(42), 1000));
}
async function demo() {
const value = await fetchValue();
console.log(value); // 输出：42
}
demo();
这段代码展示了await等待Promise解决并返回结果的基本用法。
代码段2：await在try...catch中的错误处理
async function failingOperation() {
return Promise.reject(new Error('Operation failed'));
}
async function demo() {
try {
await failingOperation();
} catch (error) {
console.error(error.message); // 输出："Operation failed"
}
}
demo();
这里演示了如何使用try...catch捕获await表达式可能抛出的错误。
代码段3：await与Promise.all的并发执行
async function demo() {
const promise1 = fetchValue(); // 假设fetchValue定义同上
const promise2 = fetchValue();
const [result1, result2] = await Promise.all([promise1, promise2]);
console.log(result1, result2); // 输出：42 42
}
demo();
这段代码展示了如何使用Promise.all来并发等待多个Promise解决。
代码段4：await在循环中的使用
async function demo() {
for (let i = 0; i < 5; i++) {
await new Promise(resolve => setTimeout(resolve, 1000));
console.log(i); // 每隔1秒输出一个数字，从0到4
}
}
demo();
这段代码演示了如何在循环中使用await来顺序执行异步操作。
代码段5：await与立即解决的Promise
async function demo() {
const value = await Promise.resolve(42);
console.log(value); // 输出：42
}
demo();
即使Promise已经解决，await仍然会等待，并返回解决的值。
代码段6：await与异步函数的返回值
async function asyncFunc() {
return 42;
}
async function demo() {
const value = await asyncFunc();
console.log(value); // 输出：42
}
demo();
异步函数返回的值会被隐式地包装成一个Promise，await会等待这个Promise解决。
代码段7：await与Promise的链式调用
async function demo() {
const value = await fetchValue().then(v => v * 2);
console.log(value); // 输出：84
}
demo();
即使使用了await，仍然可以结合Promise的链式调用来处理异步结果。
代码段8：await与异步迭代
async function* asyncGenerator() {
yield 1;
yield await fetchValue(); // 假设fetchValue定义同上，返回42
yield 3;
}
async function demo() {
for await (const value of asyncGenerator()) {
console.log(value); // 输出：1, 42, 3
}
}
demo();
这段代码展示了await与异步迭代器的结合使用。
代码段9：await在类中的使用
class MyClass {
async fetchData() {
return await fetchValue(); // 假设fetchValue定义同上，返回42
}
}
async function demo() {
const instance = new MyClass();
const data = await instance.fetchData();
console.log(data); // 输出：42
}
demo();
在类的方法中也可以使用await来处理异步操作。
代码段10：await与异步I/O操作
const fsPromises = require('fs').promises;
async function demo() {
const content = await fsPromises.readFile('./example.txt', 'utf8');
console.log(content); // 输出文件内容
}
demo();
这段代码展示了await与Node.js中的异步I/O操作结合使用的情况。通过await，我们可以以同步的方式编写异步文件读取代码，使代码更加直观易懂。
上面的代码虽然比较基础，简单。但是已经充分体现出了 await 关键字在 JavaScript 中使用的各个方面。如果你面对 await 时仍然心存胆怯，不如将这篇文章收藏起来，时时敲一遍，巩固练习。通过这样的方法，相信在短时间内就能对其有一个较为深刻的理解，从而为 JavaScript 异步编程打下一个坚实的基础。
