当前位置：首页 > news >正文

vue中axios与fetch比较

news 2025/9/8 5:28:54

在 Vue 项目中，axios 和 fetch 都是常用的网络请求工具，但它们在功能、易用性、错误处理、兼容性等方面存在明显差异。下面是一个全面对比，帮你判断哪种更适合你的项目需求：

Axios vs Fetch 对比总览

对比维度	Axios	Fetch（原生 API）
是否需安装	✅ 需要安装第三方库（`npm install axios`）	❌ 浏览器原生支持，无需安装
语法简洁性	✅ 更简洁，自动处理 JSON 和 headers	❌ 需手动解析响应体、设置 headers
错误处理	✅ 自动抛出 HTTP 错误（如 404、500）	❌ 只抛网络错误，需手动判断 `response.ok`
请求拦截器	✅ 支持请求/响应拦截器	❌ 不支持，需手动封装
取消请求	✅ 支持取消请求（`CancelToken`）	✅ 支持 `AbortController`（需手动实现）
兼容性	✅ 支持旧浏览器（IE11）	❌ 仅现代浏览器支持
默认处理 JSON	✅ 自动解析为对象	❌ 需手动调用 `.json()`
上传/下载进度	✅ 支持（通过 `onUploadProgress`）	❌ 不直接支持
全局配置	✅ 可创建实例统一配置 baseURL、headers 等	❌ 需手动封装
体积大小	❌ 增加依赖体积	✅ 更轻量

示例对比

Axios 示例

import axios from 'axios';axios.get('/api/user').then(res => console.log(res.data)).catch(err => console.error(err));

Fetch 示例

fetch('/api/user').then(res => {if (!res.ok) throw new Error('请求失败');return res.json();}).then(data => console.log(data)).catch(err => console.error(err));

Vue 项目中的使用建议

使用 Axios 的优势

更适合中大型项目，支持拦截器、统一配置、错误处理
可封装为全局插件，挂载到 Vue.prototype.$http
更适合配合 Vuex、权限校验、Token 注入等场景

使用 Fetch 的场景

轻量项目或无需复杂配置的场景
只需简单 GET/POST 请求，依赖越少越好
可结合 async/await 封装为简洁工具函数

流式响应处理（Streaming Response）

Fetch 的优势

Fetch 原生支持ReadableStream，可以逐块读取响应内容，非常适合处理：

大文件下载（如视频、PDF）
服务端推送（如 SSE）
AI 接口返回的 token 流（如 ChatGPT）

示例：使用 Fetch 处理流式响应

fetch('/api/stream').then(response => {const reader = response.body.getReader();const decoder = new TextDecoder('utf-8');return reader.read().then(function process({ done, value }) {if (done) return;console.log(decoder.decode(value));return reader.read().then(process);});});

❌ Axios 的限制

Axios 是基于 XMLHttpRequest 或 http 模块封装的，它会在响应完成后一次性返回整个 response.data，不支持逐块读取。

虽然你可以设置 responseType: 'stream'，但这只在Node.js 环境下有效，浏览器端无法使用。

示例（仅限 Node.js）：

axios.get('/api/stream', { responseType: 'stream' }).then(response => {response.data.on('data', chunk => {console.log(chunk.toString());});});

异步语法对比示例

Axios（更简洁）

const getData = async () => {try {const res = await axios.get('/api/data');console.log(res.data);} catch (err) {console.error(err.response?.status);}
};

扩展

axios的两种异步方式对比-CSDN博客

Fetch（更灵活但更繁琐）

const getData = async () => {try {const res = await fetch('/api/data');if (!res.ok) throw new Error('请求失败');const data = await res.json();console.log(data);} catch (err) {console.error(err.message);}
};

总结建议

场景	推荐工具	理由
流式响应（AI、视频、SSE）	Fetch	原生支持 ReadableStream
普通 API 请求	Axios	自动处理 JSON、错误、拦截器
文件上传/下载进度	Axios	支持 `onUploadProgress`
轻量项目或无依赖需求	Fetch	无需安装，原生支持
Node.js流式处理	Axios（带 `responseType: 'stream'`）	适用于后端环境