async/await 写 fetch 更清晰易错，需手动检查 response.ok；可封装 request 函数统一处理错误；POST 需设置 headers 和 JSON body；并发请求用 Promise.all + await。
直接用 async/await 写 fetch，比写 .then() 链更清晰、更接近同步代码的阅读感，也更容易捕获错误。
基本写法：用 await 等待 fetch 响应
fetch() 本身返回一个 Promise，所以可以直接 await 它。但注意：fetch 成功只表示请求发出并收到响应（哪怕状态码是 404 或 500），不表示业务成功。需要手动检查 response.ok 或 response.status：
- 先
await fetch(url)得到 Response 对象 - 再
await response.json()（或.text()、.blob()）解析响应体 - 别忘了判断
response.ok === true，否则 4xx/5xx 不会自动抛错
示例：
async function getUser() {
try {
const response = await fetch('/api/user');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (err) {
console.error('获取用户失败:', err);
throw err;
}
}
封装通用请求函数，避免重复判断
每次写 if (!response.ok) 很啰嗦，可以封装一个支持 JSON 的基础请求函数：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 统一处理非 2xx 响应，自动抛出带状态信息的错误
- 默认调用
.json()，也可传参支持其他解析方式（如text、blob） - 保留自定义
options（如 headers、method）
简单封装示例：
async function request(url, options = {}) {
const response = await fetch(url, options);
if (!response.ok) {
const error = new Error(`请求失败: ${response.status} ${response.statusText}`);
error.status = response.status;
error.response = response;
throw error;
}
return response.json(); // 默认解析为 JSON
}
// 使用
async function loadPost(id) {
try {
const post = await request(`/api/posts/${id}`);
console.log(post);
} catch (err) {
console.error('加载文章出错:', err.message);
}
}
发送 POST 请求并提交 JSON 数据
POST 时需设置 headers 和 body，await 让结构一目了然：
method: 'POST'headers: { 'Content-Type': 'application/json' }body: JSON.stringify(data)
示例：
async function createTodo(title) {
const response = await fetch('/api/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title })
});
if (!response.ok) throw new Error('创建失败');
return await response.json();
}
并发多个请求：用 Promise.all + async/await
想同时拉取多个资源（比如用户信息 + 用户订单），用 Promise.all() 配合 await 最简洁：
- 所有请求并行发起，等待全部完成
- 任一失败则整个
Promise.all()被拒绝，可统一 catch - 结果按传入顺序返回数组，解构即可
示例：
async function loadUserProfile(userId) {
try {
const [user, posts] = await Promise.all([
fetch(`/api/users/${userId}`).then(r => r.json()),
fetch(`/api/users/${userId}/posts`).then(r => r.json())
]);
return { user, posts };
} catch (err) {
console.error('加载资料失败:', err);
}
}
