在异步函数中解构响应数据必须先 await 再解构，不可直接对 Promise 解构；正确做法是 await 获取响应后解析 JSON，再对结果对象解构，支持嵌套解构、默认值和 try-catch 防御。
在异步函数中用 ES6 解构赋值提取响应数据，核心是确保解构发生在数据真正可用之后——也就是 await 之后，而不是直接对 Promise 对象解构。
别对 Promise 直接解构
常见错误是这样写：
❌ 错误示例：async function getData() {
const { name, id } = fetch('/api/user'); // ❌ fetch 返回 Promise，不能直接解构
return { name, id };
}
这会报错或得到 undefined，因为 fetch() 返回的是 Promise，不是对象。
先 await 再解构
正确做法是先用 await 等待 Promise 完成，拿到实际响应对象（或 JSON 数据），再解构：
立即学习“Java免费学习笔记（深入）”；
async function getUser() {
const res = await fetch('/api/user');
const data = await res.json(); // 等待解析 JSON
const { name, id, email } = data; // ✅ 此时 data 是普通对象，可安全解构
return { name, id, email };
}
也可以链式写得更紧凑（但注意可读性）：
async function getUser() {
const { name, id, email } = await (await fetch('/api/user')).json();
return { name, id, email };
}
配合结构化响应做嵌套解构
如果 API 返回的是带包裹结构（如 { code: 0, data: { ... } }），可一层层解构：
async function getUser() {
const { code, data } = await (await fetch('/api/user')).json();
if (code !== 0) throw new Error('API error');
const { name, avatar, profile } = data;
const { bio, location } = profile || {}; // 防止 profile 为 null/undefined
return { name, avatar, bio, location };
}
小技巧：用默认值和空对象保护解构安全：
- 给解构目标加默认值：
const { items = [] } = data || {}; - 避免因字段缺失导致运行时错误
在 try-catch 中安全使用
网络请求可能失败，建议包裹在 try/catch 中，并在 catch 后不进行解构：
async function fetchUser() {
try {
const res = await fetch('/api/user');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const { name, id } = await res.json(); // ✅ 成功后才解构
return { name, id };
} catch (err) {
console.error('获取用户失败:', err);
return null;
}
}
不推荐在 catch 块里尝试解构错误响应，除非你明确知道错误格式且做了判空处理。
