最推荐用 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 不复杂但容易忽略细节，配好错误处理和状态判断，日常开发足够用了。
以上就是如何用javascript发起HTTP请求_fetch API怎么用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542428.html
微信扫一扫 
支付宝扫一扫 
