Ajax、Axios 和 Fetch 的区别

问题

Ajax、Axios 和 Fetch 有什么区别？

解答

Ajax

Ajax（Asynchronous JavaScript and XML）是一种创建交互式网页应用的技术，可以在不重新加载整个页面的情况下更新部分内容。它通过在后台与服务器进行少量数据交换实现异步更新。

Ajax 基于原生的 XMLHttpRequest 对象，存在以下问题：

• 针对 MVC 编程模式设计，不符合前端 MVVM 架构
• XHR 本身架构不清晰，配置和调用方式混乱
• 基于事件的异步模型不够友好
• 不符合关注分离原则

Fetch

Fetch 是 ES6 引入的原生 JavaScript API，基于 Promise 设计，是 Ajax 的替代方案（而非封装）。

优点：

• 语法简洁，更加语义化
• 基于标准 Promise 实现，支持 async/await
• 提供丰富的底层 API（Request、Response）
• 脱离 XHR，是 ES 规范的新实现

缺点：

• 只在网络错误时才会 reject，HTTP 400、500 等状态码会被当作成功请求
• 默认不携带 cookie，需要手动配置：fetch(url, {credentials: 'include'})
• 不支持请求取消和超时控制，使用 setTimeout 和 Promise.reject 实现的超时无法真正中止请求
• 无法原生监听请求进度

// Fetch 基本用法
fetch('https://api.example.com/data', {
  credentials: 'include'
})
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

Axios

Axios 是基于 Promise 封装的 HTTP 客户端，同时支持浏览器和 Node.js 环境。

特点：

• 浏览器端使用 XMLHttpRequest，Node.js 端使用 http 模块
• 支持 Promise API
• 可以拦截请求和响应
• 自动转换 JSON 数据
• 支持请求取消
• 支持超时控制
• 客户端支持 XSRF 防护

// Axios 基本用法
axios.get('https://api.example.com/data', {
  timeout: 5000
})
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

关键点

• Ajax 基于 XHR，API 设计较老旧，不符合现代前端开发模式
• Fetch 是原生 API，语法简洁但缺少错误处理、超时控制等功能
• Axios 功能最完善，支持拦截器、取消请求、自动转换数据等特性
• Fetch 需要手动处理 HTTP 错误状态码，Axios 会自动将非 2xx 状态码视为错误
• 生产环境推荐使用 Axios，它提供了更好的开发体验和错误处理机制