fetch API 是 JavaScript 发送 HTTP 请求最常用、最现代的方式，基于 Promise、语法简洁、原生支持；GET 请求直接传 URL，POST 需设置 method、headers 和 JSON.stringify() 处理 body；需手动检查 response.ok 处理 HTTP 错误，超时需自行封装，async/await 写法更清晰。
JavaScript 发送 HTTP 请求最常用、最现代的方式就是 fetch API。它基于 Promise，语法简洁，原生支持，无需额外库（如 jQuery 的 $.ajax），是目前推荐的标准方案。
fetch 的基本语法和 GET 请求
最简单的用法是发起一个 GET 请求：
-
fetch(url)接收一个 URL 字符串，返回一个 Promise - 成功时，Promise 解析为一个
Response对象（不是响应体数据本身） - 需要用
.json()、.text()、.blob()等方法进一步读取响应体
示例：
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json(); // 解析 JSON
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
发送 POST 请求并携带 JSON 数据
POST 请求需手动设置请求头和请求体：
立即学习“Java免费学习笔记（深入）”；
-
method: 'POST'指定方法 -
headers中设'Content-Type': 'application/json' -
body要是字符串，所以用JSON.stringify()序列化对象
示例：
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: '我的新文章',
body: '这是内容',
userId: 1
})
})
.then(res => res.json())
.then(data => console.log(data));
处理错误和网络异常
注意：fetch 只在**网络错误**（如断网、DNS 失败）时 reject；HTTP 错误状态码（如 404、500）仍会 resolve，需手动检查 response.ok 或 response.status：
-
response.ok === true表示状态码在 200–299 范围内 - 建议统一在第一个
then中做状态校验并主动 throw 错误，便于后续catch - 超时需自行封装（fetch 本身不支持 timeout 选项）
使用 async/await 写法更清晰
配合 async/await 可让异步逻辑像同步一样阅读：
async function fetchPost(id) {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
return data;
} catch (err) {
console.error('加载失败:', err.message);
}
}
调用：fetchPost(1).then(post => console.log(post))
基本上就这些。fetch 简洁够用，覆盖大多数场景；复杂需求（如上传进度、自动重试、拦截器）可考虑封装或用 axios 等库补充。
