在现代 JavaScript 中，async/await 是处理异步操作的一种简洁方式。它建立在 Promise 的基础上，使得异步代码的写法更加接近同步代码，从而提高代码的可读性和维护性。
基础概念
async 函数
使用 async 关键字定义的函数称为 async 函数。async 函数总是返回一个 Promise 对象。如果函数内部返回一个值，则返回的 Promise 会自动解析为该值；如果返回的是一个错误，则返回的 Promise 会被拒绝。
示例：
1
2
3
4
5
6
7
| async function example() {
return "Hello, World!";
}
example().then(result => {
console.log(result);
});
|
在上述代码中，example 函数返回一个 Promise，我们可以使用 .then() 方法来处理结果。
await 操作符
await 关键字只能在 async 函数内部使用。它用于等待一个 Promise 的解决，并返回解决后的值。如果 Promise 被拒绝，await 将抛出错误。
示例：
1
2
3
4
5
6
7
8
9
10
11
| async function fetchData() {
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
let data = await response.json();
return data;
}
fetchData().then(data => {
console.log(data);
}).catch(error => {
console.error('Error:', error);
});
|
在这个例子中，fetchData 函数首先使用 await 等待 fetch 请求的结果，然后再调用 response.json()。这使得代码更加易读，特别是处理多个异步操作时。
错误处理
在使用 async/await 时，可以使用 try/catch 语句来处理错误。这使得错误处理更加清晰。
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| async function fetchPosts() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok) {
throw new Error('Network response was not ok');
}
let posts = await response.json();
console.log(posts);
} catch (error) {
console.error('Fetch error:', error);
}
}
fetchPosts();
|
在这个例子中，使用 try/catch 来捕获在网络请求或数据解析过程中可能发生的错误。
多个异步操作
如果你需要并行处理多个异步操作，可以结合 Promise.all() 和 await 使用。Promise.all() 方法接受一个数组的 Promise 对象，并返回一个新的 Promise，只有当所有 Promise 都解决的时，才解决。
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| async function fetchMultiplePosts() {
try {
const urls = [
'https://jsonplaceholder.typicode.com/posts/1',
'https://jsonplaceholder.typicode.com/posts/2',
'https://jsonplaceholder.typicode.com/posts/3'
];
const promises = urls.map(url => fetch(url));
const responses = await Promise.all(promises);
const data = await Promise.all(responses.map(response => response.json()));
console.log(data);
} catch (error) {
console.error('Error fetching multiple posts:', error);
}
}
fetchMultiplePosts();
|
在这个例子中，我们并行请求多个 URL，并在所有请求完成后解析其结果。这种方式比逐个请求要高效得多。
总结
async/await 提供了一种优雅的方式来处理异步操作。通过使用 async 关键字定义函数，结合 await 关键字等待 Promise，我们可以编写出更具可读性的代码。异常处理也变得更加清晰，使用 try/catch 语法可以有效捕获和处理错误。在处理多个异步操作时，结合 Promise.all() 可以大大提高性能。
