最推荐用 fetch API 发起 HTTP 请求，它原生支持、基于 Promise、语法简洁；需手动检查 response.ok 处理 404/500 等状态码，POST 要设 headers 和 JSON.stringify body，超时需 AbortController 实现。
用 JavaScript 发起 HTTP 请求，现在最推荐的方式就是 fetch API。它原生支持、语法简洁、基于 Promise，比老式的 XMLHttpRequest 更直观，也更容易配合 async/await 使用。
fetch 基本用法：GET 请求
最简单的场景是发一个 GET 请求获取数据：
- 调用
fetch(url)返回一个 Promise，成功时解析出 Response 对象 - Response 对象需要再调用
.json()、.text()或.blob()等方法读取响应体 - 注意：fetch 不会因 HTTP 状态码（如 404、500）自动 reject，需手动检查
response.ok或response.status
示例：
async function getData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (err) {
console.error('请求失败:', err);
}
}
发送 POST 请求并传 JSON 数据
提交表单或调用接口常需 POST。关键点是设置 headers 和 body：
立即学习“Java免费学习笔记（深入）”；
-
Content-Type: application/json告诉后端你发的是 JSON - 用
JSON.stringify()把对象转成字符串再传入body - method 字段必须显式写为
'POST'
示例：
async function createPost() {
const postData = { title: '我的标题', body: '这是内容', userId: 1 };
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(postData)
});
return response.json();
}
处理请求头、凭证和超时
实际项目中常需额外配置：
- credentials: 'include' —— 携带 Cookie（跨域时后端也要允许）
- headers 可加 Authorization、X-Requested-With 等自定义字段
- fetch 本身不支持 timeout，但可用
AbortController实现中断
带超时的示例：
async function fetchWithTimeout(url, timeout = 5000) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
try {
const response = await fetch(url, { signal: controller.signal });
clearTimeout(id);
return response;
} catch (err) {
clearTimeout(id);
if (err.name === 'AbortError') {
throw new Error('请求超时');
}
throw err;
}
}
常见坑和注意事项
刚上手 fetch 容易忽略这些细节：
- fetch 返回的 Promise 只在网络错误（如断网、DNS 失败）时 reject；4xx/5xx 状态码仍算 resolve
- 没写
await response.json()就直接打印 response，看到的是 Response 对象，不是数据 - POST 时漏了
headers或没 stringify body，后端可能收不到数据或报错 - 跨域请求默认不带 Cookie，要加
credentials: 'include'并确保后端响应头有Access-Control-Allow-Credentials: true
基本上就这些。fetch 不复杂但容易忽略细节，配好错误处理和状态判断，日常开发足够用了。
