fetch 和 axios 是前端开发中常用的两种 HTTP 请求工具，它们的主要区别如下：

1. 来源与兼容性

• fetch：

  • 是浏览器原生提供的 API（属于 Web API），无需安装。
  • 兼容性：现代浏览器支持，但 IE 不支持（需用 polyfill 如 whatwg-fetch）。

• axios：

  • 是一个第三方库（基于 XMLHttpRequest），需通过 npm 或 CDN 引入。
  • 兼容性更好，支持旧版浏览器（包括 IE 11）。

2. 请求与响应处理

• fetch：

  • 默认不会直接解析 JSON 数据，需手动调用 .json()。
  • 不会自动处理错误状态码（如 404、500），需检查 response.ok。
  • 默认不带cookie： 需要手动配置 credentials: 'include'

  fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("HTTP error");
      return response.json();
    })
    .catch(error => console.log(error));
  

• axios：

  • 自动解析 JSON 数据（直接通过 response.data 获取）。
  • 自动将非 2xx 状态码视为错误（触发 catch）。
  • 默认带cookie： 自动发送同源请求的cookie

  axios.get(url)
    .then(response => console.log(response.data))
    .catch(error => console.log(error));
  

3. 错误处理

• fetch：

  • 仅在网络请求失败时（如断网）触发 reject，HTTP 错误状态码（如 404）不会触发 catch。

• axios：

  • 任何 HTTP 错误状态码（如 404、500）均会触发 catch。

4. 拦截器与全局配置

• fetch：

  • 无内置拦截器，需手动封装或使用第三方库实现类似功能。
  • 全局配置需自行封装（如统一添加请求头）。

• axios：

  • 支持 请求/响应拦截器，方便统一处理日志、认证、错误等。
  • 支持全局默认配置（如 baseURL、headers）。

  axios.defaults.baseURL = 'https://api.example.com';
  axios.interceptors.request.use(config => {
    config.headers.Authorization = 'Bearer token';
    return config;
  });
  

5. 取消请求

• fetch：

  • 使用 AbortController 实现取消。

  const controller = new AbortController();
  fetch(url, { signal: controller.signal })
    .then(...)
    .catch(err => {
      if (err.name === 'AbortError') console.log('Request canceled');
    });
  controller.abort(); // 取消请求
  

• axios：

  • 早期用 CancelToken，现也支持 AbortController（推荐）。

  const controller = new AbortController();
  axios.get(url, { signal: controller.signal })
    .then(...)
    .catch(err => {
      if (axios.isCancel(err)) console.log('Request canceled');
    });
  controller.abort();
  

6. 上传/下载进度监控

• fetch：

  • 不支持原生进度监控，需通过读取响应流实现（较复杂）。

• axios：

  • 支持 onUploadProgress 和 onDownloadProgress 回调。

  axios.post(url, data, {
    onUploadProgress: progressEvent => {
      const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
      console.log(`Upload: ${percent}%`);
    }
  });
  

7. 其他差异

• 请求体格式：

  • fetch 需手动设置 Content-Type，如发送 JSON 时需 JSON.stringify(data) 并添加 headers: { 'Content-Type': 'application/json' }。
  • axios 自动根据数据类型设置 Content-Type（如对象默认转为 JSON）。

• CSRF/XSRF 防护：

  • axios 内置支持 XSRF Token 配置。
  • fetch 需手动处理。

使用建议

• 选择 fetch：
  项目轻量、无需兼容旧浏览器、希望减少依赖。
• 选择 axios：
  需要更简洁的 API、拦截器、自动错误处理、兼容性要求高或需要进度监控。

两者各有优劣，根据项目需求选择即可。现代项目中 axios 的封装性更友好，但 fetch 作为原生 API 也在不断改进。