听说你在找最赏心悦目的前端请求库?我可以推荐!

今天跟大家一起聊聊 XHR、AJAX、Axios、Fetch 和 Vue-resource 这几位大佬的异同。不管你是新手小白还是老鸟，我都会尽量让你看完本文之后，对这几位大佬有更深入的了解。那么我们就开始吧！

一、XHR（XMLHttpRequest）

我们先从老祖宗 XHR 开始讲起。那个时候，人们还在用 IE6 浏览网页，而网速慢得要上天的时代。在那个时候，XHR 出现了，就像一个英雄一样，拯救了我们想要实现异步请求的渴望。

XHR 是一种 API，它提供了浏览器与服务器之间的异步通信能力。它使得我们可以在不刷新整个页面的情况下，更新部分页面内容。这可是当时的一大创新啊！

XHR 的基本用法

来，跟我学一下怎么用 XHR 吧。先看个简单的例子：

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

是不是感觉回到了十几年前？这就是 XHR 的基本用法，虽然有点繁琐，但是功能还是很强大的。

二、AJAX（Asynchronous JavaScript and XML）

说起 AJAX，可能有些朋友会疑惑：“这不就是 XHR 的别名吗？”嘿嘿，告诉你个秘密，其实 AJAX 并不等于 XHR。AJAX 是一种技术方案，它的核心是 XHR，但是还包括其他技术，比如 DOM 操作、CSS、HTML 等。XHR 是 AJAX 的基石，但 AJAX 不仅仅是 XHR。

AJAX 的基本用法

看看下面这个简单的 AJAX 例子：

function ajax(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText);
        }
    };
    xhr.open('GET', url);
    xhr.send();
}

ajax('https://api.example.com/data', function(response) {
    console.log(response);
});

这个例子中，我们将 XHR 封装成了一个简单的 ajax 函数。这样就可以更方便地使用 AJAX 了。

三、Fetch

在 Fetch 出现之前，我们都用 XHR 来实现异步请求。但是 XHR 的 API 设计有点古老，不太符合现代编程范式。因此，Fetch 应运而生，它是一种更现代、更简洁的 API。

Fetch 的基本用法

fetch('https://api.example.com/data')
    .then(response => {
        if (response.ok) {
            return response.json();
        } else {
            throw new Error('请求失败');
        }
    })
    .then(data => console.log(data))
    .catch(error => console.error(error));

Fetch 的 API 是基于 Promise 的，因此我们可以使用链式调用，代码看起来更简洁、优雅。

四、Axios

Axios 是一个基于 Promise 的 HTTP 库，可以运行在浏览器和 Node.js 环境中。它提供了丰富的 API 和更友好的错误处理，是前端开发的好帮手。

Axios 的基本用法

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

Axios 的 API 设计非常简洁，支持各种 HTTP 请求方法，如 get、post、put、delete 等。同时，Axios 还提供了很多高级功能，比如请求拦截、响应拦截、超时设置等。

五、Vue-resource

Vue-resource 是一个基于 Vue.js 的 HTTP 库，与 Axios 类似，也提供了基于 Promise 的 API。但是，官方已经不再维护 Vue-resource，推荐使用 Axios。不过，我们还是来了解一下 Vue-resource 的用法。

Vue-resource 的基本用法

this.$http.get('https://api.example.com/data')
    .then(response => {
        console.log(response.body);
    }, error => {
        console.error(error);
    });

Vue-resource 的用法与 Axios 类似，只是将 axios 替换为了 this.$http。

六、总结

经过一番详细的介绍，我们来比较一下这几位大佬的异同：

1. XHR：XHR 是一种原生的 API，提供了浏览器与服务器之间的异步通信能力。它是 AJAX、Fetch、Axios、Vue-resource 的基础。
2. AJAX：AJAX 是一种技术方案，它的核心是 XHR，但是还包括其他技术，比如 DOM 操作、CSS、HTML 等。XHR 是 AJAX 的基石，但 AJAX 不仅仅是 XHR。
3. Fetch：Fetch 是一种更现代、更简洁的 API，基于 Promise 设计。它提供了比 XHR 更简洁、优雅的 API。
4. Axios：Axios 是一个基于 Promise 的 HTTP 库，提供了丰富的 API 和更友好的错误处理。它可以运行在浏览器和 Node.js 环境中。
5. Vue-resource：Vue-resource 是一个基于 Vue.js 的 HTTP 库，提供了基于 Promise 的 API。不过官方已经不再维护，推荐使用 Axios。

至此，相信大家对这几位大佬的异同已经有了更深入的了解。选择哪个工具，要根据实际项目和团队需求来决定，但无论如何，掌握这些工具的使用对我们前端开发者来说都是非常重要的。

希望这篇文章对你有帮助，如果你觉得好，别忘了分享给你的小伙伴哦！那么，我们下次再见！

更多题目

juejin.cn/column/7201…