最推荐用 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 不复杂但容易忽略细节，配好错误处理和状态判断，日常开发足够用了。