vue中axios与fetch比较

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

Axios vs Fetch 对比总览

示例对比

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);
  }
};

总结建议