fetch是浏览器原生API，axios是第三方库；fetch需手动处理错误、JSON解析、cookie、文件上传等，axios则自动处理并提供拦截器、进度监听等功能。
fetch 是浏览器原生 API，axios 是第三方库
fetch 是现代浏览器内置的网络请求接口，不需要额外安装；axios 必须通过 npm install axios 引入，或用 <script> 标签加载。两者都能发 GET/POST 请求，但默认行为、错误处理、配置方式差异明显。
- fetch 不会自动拒绝 HTTP 错误状态（如 404、500），
response.ok需手动判断 - axios 默认将非 2xx 状态码视为错误，直接进
.catch() - fetch 的请求体（
body）需手动序列化为 JSON 并设置Content-Type；axios 自动处理data序列化和 header 设置 - fetch 不支持请求/响应拦截器；axios 提供
axios.interceptors.request.use()等机制
处理 JSON 响应时 fetch 要多写两步
fetch 返回的是 Response 对象，不是直接的 JSON 数据，必须显式调用 .json() 方法并等待 Promise。这个步骤容易遗漏或误写成同步操作。
fetch('/api/user')
.then(response => {
if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
return response.json(); // 必须这一步
})
.then(data => console.log(data))
.catch(err => console.error(err));
- 忘记
.json()会导致后续拿到的是Response实例，不是解析后的对象 -
.json()本身可能 reject（比如返回空响应体或非法 JSON），需额外 try/catch 或链式捕获 - axios 直接返回解析后的 data：
axios.get('/api/user').then(res => res.data)
发送带凭证（cookie）的请求时默认行为不同
fetch 默认不携带 cookie，必须显式传 { credentials: 'include' }；axios 默认也不带，但可通过全局配置或单次请求设置 withCredentials: true，语义更清晰。
- fetch 写法：
fetch('/api/profile', { credentials: 'include' }) - axios 写法：
axios.get('/api/profile', { withCredentials: true })或设axios.defaults.withCredentials = true - 若后端要求 CORS 允许凭证，服务端还必须设置
Access-Control-Allow-Origin为具体域名，不能是*
上传文件时 axios 更省心
fetch 上传文件需手动构造 FormData 并注意不设置 Content-Type（让浏览器自动设置边界值）；axios 会自动识别 FormData 并正确设置 headers。
立即学习“Java免费学习笔记（深入）”；
const formData = new FormData();
formData.append('file', fileInput.files[0]);
// fetch：不设 headers，否则 boundary 会出错
fetch('/upload', {
method: 'POST',
body: formData
// ❌ 不要加 headers: { 'Content-Type': 'multipart/form-data' }
});
// axios：直接传 formData，内部处理 header
axios.post('/upload', formData);
- fetch 中手动设置
Content-Type为multipart/form-data会导致上传失败（浏览器无法插入 boundary） - axios 在检测到
FormData时自动删除Content-Typeheader，交由浏览器生成 - 需要进度监听？fetch 只能靠
ReadableStream手动读取（复杂）；axios 提供onUploadProgress回调
