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 等库补充。
以上就是javascript如何发送HTTP请求_fetch API的基本用法是什么？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543791.html
微信扫一扫 
支付宝扫一扫 
