在 JavaScript 中,异步编程一直是开发中的一个重要部分。从早期的回调函数到 Promise 的出现,异步编程的方式不断演变。ES7 引入了 async 和 await 关键字,进一步简化了异步代码的编写,使其更加接近同步代码的风格。
1. async
async 关键字用于修饰函数,表示该函数是一个异步函数。异步函数总是返回一个 Promise 对象。如果函数返回的是一个非 Promise 值,它会被自动包装成一个状态为 fulfilled 的 Promise 对象。
async function method1() {
return 1; // 返回值被包装成 Promise
}
method1().then((value) => {
console.log(value); // 1
});
如果函数返回的是一个 Promise 对象,那么异步函数返回的 Promise 对象的状态和值会与返回的 Promise 一致。
async function method2() {
return Promise.resolve(1); // 返回的是 Promise 对象
}
method2().then((value) => {
console.log(value); // 1
});
如果函数执行过程中抛出异常,异步函数返回的 Promise 对象会变为 rejected 状态。
async function method3() {
throw new Error('出错了'); // 抛出异常
}
method3().catch((error) => {
console.log(error.message); // "出错了"
});
2. await
await 关键字用于等待一个 Promise 对象完成。它必须用在 async 函数中。await 会暂停当前函数的执行,直到等待的 Promise 对象完成。
async function method() {
const n = await Promise.resolve(1); // 等待 Promise 完成
console.log(n); // 1
}
method();
如果等待的 Promise 对象成功完成,await 会返回 Promise 的值;如果 Promise 失败,await 会抛出异常。
async function method() {
try {
const n = await Promise.reject(123); // 等待失败的 Promise
console.log('成功', n);
} catch (err) {
console.log('失败', err); // "失败 123"
}
}
method();
await 也可以等待非 Promise 值,这些值会被自动包装成一个状态为 fulfilled 的 Promise 对象。
async function method() {
const n = await 1; // 等同于 await Promise.resolve(1)
console.log(n); // 1
}
method();
总结
async 和 await 是 ES7 引入的两个关键字,用于简化异步编程。async 用于修饰函数,表示该函数返回一个 Promise 对象;await 用于等待一个 Promise 对象完成,暂停当前函数的执行。通过 async 和 await,我们可以写出更加简洁、易读的异步代码,让异步编程变得更加简单和直观。