fetch是浏览器原生API，轻量简洁但需手动处理cookie、错误、JSON序列化等；axios是功能完备的第三方库，内置拦截器、超时、自动JSON处理等，适合复杂需求。
JavaScript 发送 HTTP 请求主要靠 fetch（原生 API）和 axios（第三方库），两者都能发 GET/POST 等请求，但设计思路、默认行为和使用体验差别不小。
fetch 是浏览器原生支持的轻量 API
fetch 是现代浏览器内置的标准方法，无需安装，语法简洁：
返回 Promise，必须用 .then() 或 async/await 处理 默认不带 cookie，要加 credentials: 'include' 才能传凭证 400/500 状态码不会自动 reject，需手动检查 response.ok 没有内置请求/响应拦截、超时控制、取消请求（得靠 AbortController） 上传文件时需手动构造 FormData，JSON 数据要自己 JSON.stringify() 并设 Content-Type
axios 是功能更全的封装库
axios 基于 XMLHttpRequest（或 Node.js 的 http 模块），在浏览器和 Node 环境都可用：
默认携带 cookie（可配置 withCredentials） 网络错误或 4xx/5xx 状态码都会触发 catch，更符合直觉 内置请求/响应拦截器，方便统一加 token、日志、错误处理 支持超时设置（timeout: 5000）、取消请求（CancelToken 或 AbortController）、自动 JSON 序列化/反序列化 上传文件更简单：axios.post(url, formData) 直接支持
什么时候选 fetch，什么时候选 axios？
项目轻量、只跑浏览器、需求简单（比如查个公开 API），用 fetch 足够，没额外依赖；需要登录态管理、错误统一处理、文件上传、兼容老环境或团队已有 axios 生态，选 axios 更省心。Vue 3 官方推荐 fetch，React 社区两者都常见。
立即学习“Java免费学习笔记（深入）”；
一个小对比示例：发一个带 token 的 POST 请求
fetch 写法：
const res = await fetch('/api/user', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer xxx' }, body: JSON.stringify({ name: 'Alice' })});if (!res.ok) throw new Error('请求失败');const data = await res.json();
axios 写法：
const res = await axios.post('/api/user', { name: 'Alice' }, { headers: { Authorization: 'Bearer xxx' }});const data = res.data;
基本上就这些。不复杂，但容易忽略细节。
以上就是javascript如何发送HTTP请求_fetch和axios有什么区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544405.html
微信扫一扫 
支付宝扫一扫 
