当前位置：首页 > news >正文

JavaScriptAJAX异步请求：XHR、Fetch与Axios对比

news 2025/8/3 7:40:22

在 JavaScript 中，AJAX 是通过异步请求来与服务器交互并更新页面内容的一种技术。常见的方式有使用 XMLHttpRequest（即 xhr）、Fetch API 和 Axios。这三种方法各自有不同的特点和适用场景。

1. XMLHttpRequest（XHR）

XMLHttpRequest 是最早的 AJAX 实现方法，在浏览器中发送 HTTP 请求并处理响应。尽管 XMLHttpRequest 现在已经被 Fetch API 和 Axios 替代，但它仍然是很多遗留项目中使用的标准方法。

基本用法：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);  // 设置请求方法和URL
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {  // 请求完成并成功console.log(JSON.parse(xhr.responseText));  // 解析并处理响应数据}
};
xhr.send();  // 发送请求

优缺点：

优点：原生浏览器支持，无需任何外部库。
缺点：
- 语法较为繁琐，尤其是处理响应时。
- 使用回调函数，容易出现回调地狱。
- 不支持 Promise，与现代 JavaScript 不太兼容。

2. Fetch API

Fetch API 是现代浏览器中提供的一种更加简洁的方式来处理 HTTP 请求，它基于 Promise，使得异步操作更加清晰易懂。

基本用法：

fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json())  // 解析响应数据为 JSON.then(data => console.log(data))    // 处理响应数据.catch(error => console.log('请求失败', error));  // 错误处理

优缺点：

优点：
- 更简洁和现代，基于 Promise，支持 .then() 和 .catch()。
- 更易于处理异步操作，避免了回调地狱。
- 支持 async/await，使得异步代码更加清晰。
缺点：
- 不支持较老的浏览器（例如 Internet Explorer），需要通过 Polyfill 来实现兼容性。
- 请求失败时，fetch 不会抛出错误，除非网络连接失败。需要手动检查响应的 status。

3. Axios

Axios 是一个流行的第三方库，用于发起 HTTP 请求，基于 Promise。它在功能和使用上提供了更多的灵活性和方便性。Axios 适合于需要高度定制的 HTTP 请求。

基本用法：

axios.get('https://jsonplaceholder.typicode.com/posts').then(response => console.log(response.data))  // 处理返回的数据.catch(error => console.log('请求失败', error));  // 错误处理

优缺点：

优点：
- 支持 Promise，支持 async/await。
- 自动转换 JSON 响应为对象。
- 提供了取消请求的功能。
- 更好的错误处理：Axios 会在响应状态码不是 2xx 时抛出错误，可以直接通过 .catch() 捕获。
- 支持请求和响应拦截器，可以更灵活地处理请求。
缺点：
- 需要引入额外的库（即 Axios），增加了额外的依赖。

比较总结：

特性	`XMLHttpRequest`	`Fetch API`	`Axios`
支持性	原生支持	原生支持（部分浏览器需要 polyfill）	需要引入第三方库
API风格	回调函数	`Promise`，支持 `async/await`	`Promise`，支持 `async/await`
响应处理	必须手动解析响应	自动解析 JSON（需要手动处理其他类型）	自动解析 JSON
错误处理	需要手动检查 `status`	不会抛出错误，需手动检查 `status`	自动抛出错误（2xx以外）
功能	基本的请求功能	简单易用，适合大多数情况	更强大，支持拦截器、取消请求等
兼容性	最广泛的兼容性	新浏览器支持，旧浏览器需 polyfill	需要引入库，兼容大部分浏览器

示例：使用 `async/await` 简化异步请求

`Fetch API` 示例：

async function getPosts() {try {let response = await fetch('https://jsonplaceholder.typicode.com/posts');if (!response.ok) throw new Error('请求失败');let data = await response.json();console.log(data);} catch (error) {console.error('请求错误:', error);}
}getPosts();

`Axios` 示例：

async function getPosts() {try {let response = await axios.get('https://jsonplaceholder.typicode.com/posts');console.log(response.data);} catch (error) {console.error('请求错误:', error);}
}getPosts();