'# Axios 和 Ajax 的区别
一、背景与问题
在现代前端开发中，异步数据获取是核心需求。开发者常会遇到两个技术选项：XMLHttpRequest（原生 Ajax）和 Axios。这两个技术虽然都用于发起 HTTP 请求，但它们的实现原理、使用方式和适用场景存在显著差异。
本文将从底层原理、代码实现、性能优化、安全风险等多个维度深入分析两者的区别，通过完整代码示例揭示其技术本质，并探讨实际开发中如何选择合适方案。
二、基本原理
1. Ajax 的本质
Ajax（Asynchronous JavaScript and XML）本质是基于 XMLHttpRequest 对象的浏览器 API。它通过 JavaScript 在后台与服务器进行数据交互，实现页面局部刷新。
// 原生 Ajax 示例
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();关键特点：
- 基于浏览器内置对象
- 需要手动处理响应数据（如 JSON 解析）
- 缺乏内置的 Promise 支持
2. Axios 的本质
Axios 是基于 XMLHttpRequest 的封装库，通过 Promise 构建异步处理模型。它通过封装底层实现，提供了更简洁的 API 和额外功能。
// Axios 示例
axios.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});关键特点：
- 基于 Promise 的异步处理
- 自动处理 JSON 数据转换
- 支持拦截器、并发请求等高级功能
三、环境准备
1. 前提条件
- 浏览器支持（现代浏览器均支持）
- 服务器端需提供测试接口（如 Express 或 Node.js 服务）
- 需要引入 Axios（原生 Ajax 不需要额外依赖）
2. 示例环境
# 创建测试服务器（Express）
npm init -y
npm install express// server.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
res.json({ data: 'Hello, Axios!' });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});四、核心实现
1. 原生 Ajax 实现
// 原生 Ajax 示例
function fetchData() {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Original Ajax Response:', JSON.parse(xhr.responseText));
} else {
console.error('Request failed with status:', xhr.status);
}
}
};
xhr.send();
}关键代码解释：
readyState === 4表示请求完成status === 200表示成功响应- 需要手动解析 JSON 数据
2. Axios 实现
// Axios 示例
async function fetchData() {
try {
const response = await axios.get('/api/data');
console.log('Axios Response:', response.data);
} catch (error) {
console.error('Axios Error:', error.message);
}
}关键代码解释：
- 使用
async/await简化异步处理 - 自动将响应数据转换为 JavaScript 对象
- 内置错误处理机制
3. 功能对比
| 功能 | 原生 Ajax | Axios |
|---|---|---|
| Promise 支持 | 不支持 | 支持 |
| 自动 JSON 解析 | 不支持 | 支持 |
| 拦截器 | 不支持 | 支持 |
| 并发请求 | 不支持 | 支持 |
| 请求取消 | 不支持 | 支持 |
五、完整案例
1. 登录系统示例
需求：实现用户登录功能，支持表单提交和错误提示
原生 Ajax 实现
<!-- login.html -->
<!DOCTYPE html>
<html>
<head><title>Login</title></head>
<body>
<form id="loginForm">
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button type="submit">Login</button>
</form>
<div id="error" style="color: red;"></div>
<script>
document.getElementById('loginForm').addEventListener('submit', function (e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const errorDiv = document.getElementById('error');
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/login', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
errorDiv.textContent = 'Login successful!';
} else {
errorDiv.textContent = 'Login failed: ' + xhr.responseText;
}
}
};
xhr.send(JSON.stringify({ username, password }));
});
</script>
</body>
</html>Axios 实现
// login.js
async function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const errorDiv = document.getElementById('error');
try {
const response = await axios.post('/api/login', { username, password }, {
headers: { 'Content-Type': 'application/json' }
});
errorDiv.textContent = 'Login successful!';
} catch (error) {
errorDiv.textContent = 'Login failed: ' + error.message;
}
}差异分析：
- 原生 Ajax 需要手动处理响应数据
- Axios 自动处理响应数据并提供更清晰的错误信息
- Axios 支持拦截器统一处理错误
六、源码解析
1. Axios 核心源码（简化版）
// axios.js (简化版)
function createInstance(config) {
const defaults = {
transformRequest: [data => data],
transformResponse: [data => data],
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
};
const instance = {
get(url, config) {
return this._request({
method: 'get',
url,
...config
});
},
_request(config) {
const xhr = new XMLHttpRequest();
xhr.open(config.method, config.url, true);
// 设置 headers
for (const [key, value] of Object.entries(config.headers || {})) {
xhr.setRequestHeader(key, value);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
const response = {
data: config.transformResponse(xhr.responseText)
};
if (xhr.status !== 200) {
throw new Error(`HTTP error ${xhr.status}`);
}
return Promise.resolve(response);
}
};
xhr.send(config.data);
}
};
return instance;
}关键点：
- 封装了
XMLHttpRequest的底层实现 - 自动处理响应数据转换
- 支持自定义 transform 函数
七、进阶使用
1. 拦截器的使用
// Axios 拦截器示例
axios.interceptors.request.use(config => {
console.log('Request Interceptor:', config.url);
return config;
}, error => {
console.error('Request Error:', error);
return Promise.reject(error);
});
axios.interceptors.response.use(response => {
console.log('Response Interceptor:', response.status);
return response;
}, error => {
console.error('Response Error:', error);
return Promise.reject(error);
});2. 并发请求处理
// 并发请求示例
axios.all([
axios.get('/api/data1'),
axios.get('/api/data2')
])
.then(axios.spread((res1, res2) => {
console.log('Data1:', res1.data);
console.log('Data2:', res2.data);
}));3. 请求取消
// 请求取消示例
const source = axios.CancelToken.source();
axios.get('/api/data', { cancelToken: source.token })
.catch((thrown) => {
if (axios.isCancel(thrown)) {
console.log('Request canceled:', thrown.message);
} else {
console.error('Request error:', thrown);
}
});
// 取消请求
source.cancel('Request canceled by user');八、性能与工程实践
1. 性能优化策略
| 优化点 | 原生 Ajax | Axios |
|---|---|---|
| 请求并发 | 不支持 | 支持 |
| 缓存机制 | 需手动实现 | 自动缓存 |
| 网络请求 | 不支持 | 支持 |
| 错误重试 | 不支持 | 支持 |
优化建议：
- 使用 Axios 的
CancelToken避免无效请求 - 启用 HTTP 缓存（通过
Cache-Control头） - 对高频请求使用请求合并（debounce/throttle）
2. 安全风险分析
原生 Ajax 风险：
- 需手动设置
Content-Type和Accept头 - 缺乏内置的安全校验机制
Axios 风险：
- 默认发送
Accept: application/json头 - 可能引发 CORS 问题（需服务器配置）
解决方案：
- 使用
axios.defaults.headers设置默认头 - 配置 CORS 策略（服务器端）
- 避免直接暴露敏感数据（如密码）
九、常见问题与踩坑
1. 常见错误及解决方法
错误示例 1：未设置 Content-Type 头
axios.post('/api/data', { key: 'value' });问题：服务器无法解析 JSON 数据
解决：显式设置 Content-Type 头
axios.post('/api/data', { key: 'value' }, {
headers: { 'Content-Type': 'application/json' }
});错误示例 2：未处理跨域问题
// 前端代码
axios.get('http://localhost:3000/api/data');问题：浏览器阻止跨域请求
解决：服务器配置 CORS
// Express 配置
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});2. 常见性能问题
问题 1：频繁创建 XMLHttpRequest 对象
解决方案：使用 Axios 的单例模式
const axiosInstance = axios.create();问题 2：未使用压缩传输
解决方案：启用 gzip 压缩（服务器端配置）
十、最佳实践
1. 推荐使用场景
| 场景 | 推荐方案 | 原因 |
|---|---|---|
| 简单数据获取 | 原生 Ajax | 简单直接 |
| 复杂业务逻辑 | Axios | 支持拦截器、并发请求 |
| 需要统一错误处理 | Axios | 内置错误处理机制 |
| 需要请求取消 | Axios | 支持 CancelToken |
2. 不推荐使用场景
| 场景 | 不推荐方案 | 原因 |
|---|---|---|
| 简单请求 | Axios | 增加不必要的依赖 |
| 高频请求 | 原生 Ajax | 缺乏优化机制 |
| 需要高级功能 | 原生 Ajax | 功能受限 |
十一、总结
Axios 和 Ajax 本质是两种不同层次的异步通信方案。Ajax 是浏览器原生的底层接口，而 Axios 是基于 Ajax 的封装库，提供了更高级的抽象和功能。在实际开发中，应根据项目需求选择合适方案：
- 使用原生 Ajax 适用于简单、轻量级的场景
- 使用 Axios 更适合复杂业务，尤其是需要拦截器、并发请求、错误处理等高级功能的场景
通过深入理解两者的原理和差异，开发者可以更高效地构建稳定、安全的前端应用。同时，需要注意 CORS、安全校验、性能优化等常见问题，确保代码的健壮性和可维护性。