vue中axios与fetch比较

在 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（更简洁）

javascript 复制代码

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（更灵活但更繁琐）

javascript 复制代码

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'`）	适用于后端环境

项目规模	推荐工具
小型项目	`fetch`（轻量、无依赖）
中大型项目	`axios`（功能强、易维护）