在前端开发中，Promise 是一个非常常见的异步编程模型。在 ES6 中，Promise 被正式引入 JavaScript，使得异步编程变得更加简单和可读。而在 ES8 中，async/await 语法进一步简化了 Promise 的使用。
在本文中，我们将介绍 ES9 中 async/await 的使用方法，并提供一些实用的示例代码和指导意义，帮助你更好地理解和运用 async/await。
什么是 async/await
async/await 是 ES8 中引入的一组新的异步编程语法。它们是 Promise 的语法糖，使得异步编程更加直观和易于理解。
async/await 的基本用法如下：
async function foo() {
const result = await someAsyncFunction();
console.log(result);
}async 关键字用于声明一个异步函数，函数体内部可以使用 await 关键字来等待 Promise 对象的返回结果。在等待期间，代码会被阻塞，直到 Promise 对象返回结果或者抛出异常。
如何使用 async/await 处理 Promise
在使用 async/await 处理 Promise 时，需要注意以下几点：
1. async 函数返回的是一个 Promise 对象
在使用 async/await 时，async 函数的返回值是一个 Promise 对象。如果函数内部没有显式地返回 Promise 对象，那么 async 函数返回的 Promise 对象就会自动 resolve 并返回 undefined。
async function foo() {
return 'Hello World';
}
foo().then(result => {
console.log(result); // Hello World
});2. await 只能在 async 函数内部使用
await 关键字只能在 async 函数内部使用。否则会抛出 SyntaxError 异常。
// 错误的写法 const result = await someAsyncFunction();
3. await 只能等待 Promise 对象
await 关键字只能等待 Promise 对象的返回结果。如果等待的对象不是 Promise 对象，那么会直接返回该对象。
async function foo() {
const result = await 'Hello World';
console.log(result); // Hello World
}4. 可以使用 try/catch 处理异步异常
使用 async/await 处理异步异常时，可以使用 try/catch 语句来捕获异常。
async function foo() {
try {
const result = await someAsyncFunction();
console.log(result);
} catch (error) {
console.error(error);
}
}示例代码
下面是一些使用 async/await 处理 Promise 的示例代码：
1. 等待多个 Promise 对象返回结果
async function foo() {
const result1 = await someAsyncFunction1();
const result2 = await someAsyncFunction2();
const result3 = await someAsyncFunction3();
console.log(result1, result2, result3);
}在这个例子中，等待每个 Promise 对象返回结果时，代码会被阻塞，直到该 Promise 对象返回结果或者抛出异常。因此，这种写法可能会造成一定的性能问题。
如果希望同时等待多个 Promise 对象返回结果，可以使用 Promise.all 方法：
async function foo() {
const [result1, result2, result3] = await Promise.all([
someAsyncFunction1(),
someAsyncFunction2(),
someAsyncFunction3()
]);
console.log(result1, result2, result3);
}在这个例子中，Promise.all 方法会同时等待所有 Promise 对象返回结果，并将结果包装成一个数组返回。
2. 并行执行多个异步任务
async function foo() {
const [result1, result2, result3] = await Promise.all([
someAsyncFunction1(),
someAsyncFunction2(),
someAsyncFunction3()
]);
console.log(result1, result2, result3);
}在这个例子中，Promise.all 方法会同时执行所有异步任务，并等待所有任务返回结果。由于异步任务是并行执行的，因此这种写法可以提高代码的性能。
3. 处理异步异常
async function foo() {
try {
const result = await someAsyncFunction();
console.log(result);
} catch (error) {
console.error(error);
}
}在这个例子中，我们使用 try/catch 语句来处理异步异常。如果异步任务抛出异常，代码会跳转到 catch 语句块，打印异常信息。
总结
本文介绍了 ES9 中 async/await 的使用方法，并提供了一些实用的示例代码和指导意义。通过学习本文，你可以更好地理解和运用 async/await，使得异步编程变得更加简单和可读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6553d58cd2f5e1655dd87333