简述如何在 TypeScript 中使用 async/await？
参考回答
在 TypeScript 中，async/await 是用于处理异步操作的语法糖。async 用于定义返回 Promise 的函数，await 用于等待 Promise 完成并获取其结果。
使用场景：
– 在处理异步操作（如网络请求、文件操作等）时，async/await 可以使代码看起来像同步代码，更加清晰易懂。
– async/await 是基于 Promise 的，因此必须在 Promise 对象上使用。
详细讲解与拓展
async/await 是对 JavaScript 中异步操作的一种更直观的处理方式，尤其在 TypeScript 中，结合类型系统的优势，能够让代码更具可读性和可维护性。
1. 使用 async 定义异步函数
async 关键字用于定义一个异步函数，函数会自动返回一个 Promise 对象。如果函数中有返回值，返回值会被自动包装为 Promise 对象。
async function fetchData(): Promise<string> {
return "Data fetched";
}
在这个例子中，fetchData 函数被声明为 async，它返回一个 Promise 对象，包含一个字符串数据。你可以使用 await 等待这个 Promise 完成，获取实际的返回值。
2. 使用 await 等待 Promise 完成
await 关键字只能在 async 函数中使用。它用来等待一个 Promise 对象完成，并返回其结果。
async function getUserData(userId: string): Promise<string> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
return data.name;
}
在上面的例子中，getUserData 是一个异步函数，它使用 await 等待 fetch 函数返回的 Promise 对象，直到请求完成后获取响应数据，并继续处理。
3. 错误处理
虽然 async/await 让代码更具同步风格，但异步操作可能依然会抛出错误。因此，通常我们使用 try/catch 块来捕获错误。
async function getData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Error fetching data:", error);
}
}
在这个例子中，try/catch 块用于捕获 fetch 请求和 response.json() 过程中可能出现的错误。
4. 与 Promise.all 配合使用
如果需要并发处理多个异步操作，可以结合使用 async/await 和 Promise.all。Promise.all 可以等待多个 Promise 都完成后返回结果。
async function getMultipleData() {
const [userData, postsData] = await Promise.all([
fetch('https://api.example.com/user').then(res => res.json()),
fetch('https://api.example.com/posts').then(res => res.json())
]);
console.log(userData, postsData);
}
在这个例子中，Promise.all 被用来并发处理两个 API 请求，等待它们都完成后，再进行后续操作。
总结：
– async/await 是处理异步操作的语法糖，它使得异步代码更加直观，像同步代码一样易于理解。
– 使用 async 定义异步函数，函数自动返回 Promise 对象。
– 使用 await 等待 Promise 对象的结果，避免了回调地狱（callback hell）。
– 错误可以通过 try/catch 块来捕获，确保异步操作中的异常能够被妥善处理。