如何用JavaScript进行网络请求_fetch和axios有什么区别

fetch是浏览器原生API，axios是第三方库；fetch需手动处理错误、jsON解析、cookie、文件上传等，axios则自动处理并提供拦截器、进度监听等功能。

fetch 是浏览器原生 API，axios 是第三方库

fetch 是现代浏览器内置的网络请求接口，不需要额外安装；axios 必须通过 npm install axios 引入，或用 标签加载。两者都能发 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-Type header，交由浏览器生成
• 需要进度监听？fetch 只能靠 ReadableStream 手动读取（复杂）；axios 提供 onUploadProgress 回调

实际项目中选哪个，取决于是否需要拦截器、上传进度、自动错误处理、IE 兼容性（fetch 需 polyfill）等。如果只是简单请求且已用现代浏览器，fetch 足够轻量；若团队已有 axios 生态或需要统一请求层，它省掉的重复代码远多于引入体积。