Axios和Ajax的区别是什么

2026-03-24 11:22:04发布 0次浏览

详情描述

Axios 和 Ajax 的区别

1. 基本概念

Ajax（Asynchronous JavaScript and XML）：是一种技术概念，指在不刷新页面的情况下与服务器异步交互数据的技术方案。
Axios：是一个基于 Promise 的 HTTP 客户端库，用于浏览器和 Node.js 环境中发起 HTTP 请求。

2. 核心区别对比

方面	Ajax	Axios
本质	技术思想/概念	具体JavaScript库
API 方式	使用原生 `XMLHttpRequest` 对象	基于 Promise 的现代 API
兼容性	依赖浏览器内置的 `XMLHttpRequest`	支持浏览器和 Node.js
请求/响应拦截	需手动实现	内置拦截器功能
自动JSON转换	需手动 `JSON.parse()`	自动转换 JSON 数据
错误处理	回调函数方式	Promise 链式调用 `.catch()`
取消请求	较复杂（`xhr.abort()`）	支持 CancelToken 或 AbortController
跨域处理	需手动设置 `withCredentials`	默认支持 CORS 配置
请求进度	通过事件监听实现	提供进度监控功能

3. 代码示例对比

Ajax（原生JavaScript）

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

Axios

// 简洁的 Promise 语法
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 或使用 async/await
async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

4. Axios 优势特性

拦截器：统一处理请求/响应

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

并发请求：axios.all() + axios.spread()
客户端XSRF保护
超时配置：timeout 参数
默认配置：全局 baseURL、headers 等
TypeScript 支持：完整的类型定义

5. Ajax 的其他实现库

除了 Axios，常见的 Ajax 实现库还包括：

Fetch API：现代浏览器原生 API（Axios 的竞品）
jQuery.ajax()：jQuery 的 Ajax 实现
SuperAgent、Request 等

6. 选择建议

使用 Axios 当：
- 需要统一处理 HTTP 请求
- 需要请求/响应拦截功能
- 项目中使用 Promise/async-await
- 需要同时支持浏览器和 Node.js
- 需要自动 JSON 转换
使用原生 Ajax/Fetch 当：
- 项目追求零依赖
- 只需要简单请求
- 目标环境不支持 Promise
- 学习 HTTP 请求原理