【js篇】AJAX、Axios 和 Fetch 的区别：前端网络请求的三种方式

LuckySusu
103 阅读4分钟

在现代Web开发中，进行网络请求是前端开发的重要组成部分。AJAX、Axios 和 Fetch 是三种常用的实现方式，它们各自有着不同的特点和适用场景。理解它们之间的区别有助于选择最适合项目需求的工具。

✅ 一句话总结

AJAX 使用 XMLHttpRequest 实现异步通信；Axios 提供了基于Promise的HTTP客户端，简化了与API的交互；而 Fetch API 则是原生支持的基于Promise的接口，用于替代 XMLHttpRequest。

✅ 一、什么是 AJAX？

🔹 定义

  • AJAX 并不是一种新的编程语言，而是使用 JavaScript 进行异步通信的技术；
  • 主要通过 XMLHttpRequest 对象来发送请求并处理响应；
  • 允许网页在不重新加载整个页面的情况下更新部分网页内容；

🔹 示例代码

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};

xhr.send();

🔹 特点

  • 需要手动管理状态（readyState）和错误处理；
  • 不支持Promise，回调地狱问题明显；
  • 跨域请求需要额外配置；

✅ 二、什么是 Axios？

🔹 定义

  • Axios 是一个基于 Promise 的 HTTP客户端，可以在浏览器和 Node.js 中使用；
  • 支持拦截请求和响应、自动转换 JSON 数据、取消请求等功能；
  • 提供了更简洁的API，并且内置了一些有用的特性如防抖、重试等；

🔹 示例代码

axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(function(response) {
        console.log(response.data);
    })
    .catch(function(error) {
        console.error(error);
    });

🔹 特点

  • 基于Promise，避免了回调地狱；
  • 自动转换JSON数据；
  • 支持请求/响应拦截器；
  • 更好的错误处理机制；
  • 支持取消请求；
  • 支持浏览器和Node.js环境；

✅ 三、什么是 Fetch？

🔹 定义

  • Fetch 是现代浏览器提供的原生接口，用于发起网络请求；
  • 基于Promise，提供了更加现代化的方式来处理HTTP请求；
  • 相比于 XMLHttpRequest，Fetch 提供了更简洁的API；

🔹 示例代码

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

🔹 特点

  • 原生支持，无需引入第三方库；
  • 基于Promise，易于链式调用；
  • 默认不支持超时控制和取消请求；
  • 默认不会拒绝非2xx状态码的响应，需手动检查 response.ok 属性；
  • 在某些老版本浏览器中可能需要polyfill；

✅ 四、核心区别对比表

特性AJAX (XMLHttpRequest)AxiosFetch
基础基础级别的网络请求第三方库，基于Promise浏览器原生API，基于Promise
语法复杂度较为复杂，需要手动管理状态简洁，链式调用简洁，链式调用
跨域支持需要额外配置内置支持内置支持
自动解析JSON否是否（需手动调用 .json() 方法）
错误处理手动处理更加智能，默认情况下会捕获网络错误不会因非2xx状态码拒绝Promise，需手动检查 response.ok

✅ 五、如何选择？

🔹 使用 XMLHttpRequest / AJAX

  • 如果你需要兼容非常老旧的浏览器；
  • 当你对现有代码库中的 XMLHttpRequest 感觉满意，并且不想引入额外依赖时；

🔹 使用 Axios

  • 需要一个功能强大的HTTP客户端，特别是当你需要拦截请求或响应时；
  • 希望拥有更好的错误处理机制；
  • 需要在浏览器和Node.js之间共享相同的API；

🔹 使用 Fetch

  • 适合现代Web应用，尤其是那些不需要复杂的请求配置的应用；
  • 如果你希望利用原生API的优势，并且愿意接受一些限制（如默认不支持超时）；
  • 在考虑性能优化时，由于它是浏览器原生支持的，可能会有性能优势；

✅ 六、一句话总结

根据你的具体需求选择合适的网络请求方法：对于简单的请求，可以优先考虑 Fetch；如果需要更多高级功能，则推荐使用 Axios；而对于需要兼容旧版浏览器的情况，AJAX 可能是唯一的选择。

💡 最佳实践

  • 在新项目中，除非有特殊需求，否则应尽量避免直接使用 XMLHttpRequest；
  • 考虑使用 Axios 或 Fetch 来提升代码可读性和维护性；
  • 结合 async/await 语法糖使用 Axios 或 Fetch，可以使异步代码看起来更加同步化，提高代码清晰度；
// 使用 async/await 和 Axios
async function fetchData() {
    try {
        const response = await axios.get('https://api.example.com/data');
        console.log(response.data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}
avatar
文章
阅读
粉丝