ajax、axios和fetch之间优缺点重点对比总结

一、技术概述

1. XMLHttpRequest (AJAX)

• 概念：浏览器原生API，用于在后台与服务器交换数据
• 出现时间：1999年（ActiveX），2006年标准化

2. Axios

• 概念：基于Promise的HTTP客户端库
• 依赖关系：基于XMLHttpRequest封装
• 特点：支持浏览器和Node.js环境

3. Fetch API

• 概念：浏览器原生API，Promise-based
• 出现时间：2015年（ES6）
• 特点：现代浏览器内置，无需额外库

二、核心优缺点对比

三、详细特性对比

1. 基本使用示例

// 1. XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = () => console.log(xhr.responseText);
xhr.send();

// 2. Axios
axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// 3. Fetch
fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('HTTP error');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

2. 错误处理差异

// Axios：自动处理HTTP错误状态（非2xx）
axios.get('/api/not-found')
  .catch(error => {
    // 404等状态码会进入catch
    console.log(error.response.status); // 404
  });

// Fetch：需要手动检查状态
fetch('/api/not-found')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.log(error));

3. 请求取消实现

// Axios (旧版)
const source = axios.CancelToken.source();
axios.get('/api/data', {
  cancelToken: source.token
});
source.cancel('请求取消');

// Axios (新版) / Fetch
const controller = new AbortController();
fetch('/api/data', {
  signal: controller.signal
});
controller.abort();

4. 拦截器（仅Axios支持）

// 请求拦截器
axios.interceptors.request.use(
  config => {
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 重定向到登录
    }
    return Promise.reject(error);
  }
);

四、选择建议

选择 Axios 的情况

• 需要统一的错误处理机制
• 项目需要请求/响应拦截器
• 需要自动转换JSON数据
• 需要上传进度监控
• 需要向后兼容性（包括旧版浏览器）
• 项目已在Node.js中使用

选择 Fetch 的情况

• 现代浏览器项目，无需支持IE
• 希望减少第三方依赖
• 项目较小，简单请求为主
• 需要利用Service Workers
• 遵循原生API标准

选择 XMLHttpRequest 的情况

• 需要支持非常旧的浏览器
• 需要精确的上传/下载进度控制
• 项目已有成熟的封装
• 需要同步请求（极少情况）

五、最佳实践建议

// 封装Fetch解决常见问题
async function httpRequest(url, options = {}) {
  const { timeout = 8000, ...fetchOptions } = options;

  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, {
      ...fetchOptions,
      signal: controller.signal
    });

    clearTimeout(timeoutId);

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    // 自动根据Content-Type解析
    const contentType = response.headers.get('content-type');
    if (contentType?.includes('application/json')) {
      return await response.json();
    }
    return await response.text();
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error('请求超时');
    }
    throw error;
  }
}

六、性能考虑

包大小

• Fetch：0KB（浏览器内置）
• Axios：~4KB（gzipped）
• XHR：0KB（浏览器内置）

请求速度

• 三者底层都是HTTP请求，性能差异可以忽略
• Axios有轻微封装开销，但影响不大

内存占用

• 原生API更节省内存
• 库的封装会增加内存占用

总结表格

最终建议：对于大多数现代Web项目，Axios提供了最佳开发体验和功能完整性；对于追求轻量和现代API的项目，可以选择Fetch并进行适当封装。