javascript如何发送HTTP请求_fetch和axios有什么区别-js教程-PHP中文网

javascript如何发送HTTP请求_fetch和axios有什么区别

夜晨

发布： 2025-12-20 17:23:02

原创

166人浏览过

fetch是浏览器原生API，轻量简洁但需手动处理cookie、错误、JSON序列化等；axios是功能完备的第三方库，内置拦截器、超时、自动JSON处理等，适合复杂需求。

javascript如何发送http请求_fetch和axios有什么区别

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免费学习笔记（深入）”；

AI社交封面生成器

一句话/一张图一键智能生成社交媒体图片的AI设计神器

108

查看详情

一个小对比示例：发一个带 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有什么区别的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

javascript框架是什么_为什么React、Vue如此流行？ javascript的vue是什么_如何快速上手？ javascript框架是什么_React和Vue有什么区别 javascript指令是什么_如何自定义Vue或Angular的指令？ javascript的linting是什么_如何使用eslint？