在接口中使用 async 与 await 的核心做法是：将处理请求的函数声明为 async，并在其中使用 await 等待异步操作（如网络请求）完成。这样做可以让代码以同步的方式编写，同时保持非阻塞的特性，从而简化错误处理和逻辑流程。
如何定义一个支持异步操作的接口函数
定义接口函数时，只需在函数签名前添加 async 关键字。该函数内部可以使用 await 来暂停执行，直到 Promise 解决。例如，调用 fetch API 获取数据时，可以直接 await 响应对象，然后解析 JSON。这样避免了嵌套的 .then() 链，使代码更清晰。
async function getUserData(userId) {
try {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
return data;
} catch (error) {
console.error('Fetch error:', error);
throw error;
}
}
上述代码展示了如何定义一个异步函数 getUserData。它接收用户 ID，发起 GET 请求，并返回解析后的 JSON 数据。如果请求失败，它会抛出错误，由调用者通过 try...catch 捕获。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
如何在组件中调用异步接口并处理结果
在 React 或 Vue 等前端框架中，通常在生命周期钩子（如 useEffect）或事件处理函数中调用异步接口。由于这些钩子本身不能直接标记为 async，需要定义一个内部的 async 函数并立即调用它。这样可以确保状态更新在数据加载完成后进行。
function UserComponent({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
let isMounted = true;
async function loadUser() {
setLoading(true);
try {
const userData = await getUserData(userId);
if (isMounted) {
setUser(userData);
}
} catch (error) {
if (isMounted) {
console.error('Failed to load user:', error);
}
} finally {
if (isMounted) {
setLoading(false);
}
}
}
loadUser();
return () => {
isMounted = false;
};
}, [userId]);
if (loading) return <div>Loading...</div>;
return <div>{user?.name}</div>;
}
这段代码演示了在 React 组件中如何使用 useEffect 和内部 async 函数来加载用户数据。它处理了加载状态、错误情况和组件卸载时的清理工作，确保不会在组件卸载后尝试更新状态。
当接口返回空值或错误时如何处理
当接口返回空值或错误时，应在 try...catch 块中捕获异常，并根据业务逻辑决定是显示默认值、重试还是向用户展示错误信息。对于空值，可以检查响应状态码或数据字段是否为 null/undefined，并提供相应的 fallback 逻辑。
