Ajax八

jQuery Ajax、fetch 和 axios

前言

近年来，前端技术呈现一派迅猛发展的态势，随之而来的是，前后端通信方式也发生了翻天覆地的变化，从一开始的重载页面的老旧方式，逐步发展到如今 XMLHttpRequest 和 fetch。相应的，各种各样的 Ajax 类库推陈出新，不断的进步。这个章节，我们打算来聊一聊 jQuery Ajax、fetch和 axios，相信同学们将会有一个更加全面的了解。

1.jQuery Ajax

这个技术在前面章节有独立章节进行讲解。事实上，$.ajax 是基于原生 XMLHttpRequest 进行了封装，并且提供了一套高度统一的设计和编程接口。在我们的代码中，我们一般都这样写：

$.ajax({
    method: 'POST',
    url: url,
    data: data,
    success: function () {},
    error: function () {}
});

或者结合 deferred 的写法：

$.ajax({
    url: url,
    method: 'GET',
    data : data
}).done(data => {
    // code
}).fail(err => {
    // code
})

不吹不黑，jQuery 提供的这一套 Ajax 工具方法真的非常优秀，并且经历了这么多年的打磨，其稳定性、成熟度自然不必多言。关于 jQuery 的 Ajax 工具方法的优点，在前面章节已经讲过。至少从使用体验上来讲，简单易用，功能齐全，以至于我身边至今依然有很多开发者在使用这一套工具函数。

然而，随着技术的发展，jQuery 也逐步走向一个衰弱的过程。越来越多的前端开发者开始使用诸如 Angular、React 和 Vue 这样的新型框架。想像一下，如果我们在一个基本用不到 jQuery 的技术中进行前端开发，为了要使用 jQuery 的 Ajax 相关方法而强行引入整个 jQuery，这显然是不现实也不可取的。在更新的技术中，我们将寻求体积更小，更为先进的类库。

2.fetch

fetch 面世以来，一直都被称为是 Ajax 的替代方案。作为一个底层的 API 而言，我们将它和 XMLHttpRequest 来进行比较。

相信使用过 XMLHttpRequst 的同学，在惊叹它赋予的前后端交互方式的同时，也无不会诟病它丑陋的代码组织方式。

举个例子来说明，假设我们要往后端发送一段 GET 请求，使用 XMLHttpRequest 我们会这样做：

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'text';

xhr.onreadystatechange = function() {
    if (this.readyState == 4) {
        if (this.status === 200 || this.status === 304) {
			// code ...
        }
    }
};


xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

这代码的组织简直是丑陋，写起来也非常的麻烦、松散。

而 fetch 在这方面的表现就不一样了。Fetch API 是基于 promise 进行设计的，写法上也更加的方便和简单，更为符合关注点分离的原则，不会将所有的配置和状态混淆在一个对象里。 接下来我们来看看使用 fetch 的写法：

// 写法一：
fetch(url)
    .then(response => {
        if (response.ok) {
            return response.json();
        }
    })
    .then(data => {// code...})
    .catch(err => {// code...})
        
// 写法二：
const fetchSend = async (url) => {
    try {
        const response = await fetch(url);
        if (response.ok) {
            return response.json()
        }
      } catch(e) {
        // code ...
      }
}
fetchSend(url)

感觉瞬间优雅了许多有木有！使用 promise 写法，我们的整个代码组织变得更加整洁有条理性。而方法二使用 async/await 结合 fetch 的编码形式，让我们能够以同步的方式来书写代码，体验更佳。总结起来：

• 代码组织简单干净，更具语义性。
• 可以结合 async/await 书写，体验更佳。

然而，fetch 在其他方面表现并不是都很完美。比如：

• 原生支持率不佳，兼容性差。
• 只对网络请求报错，对于诸如 400 和 500 之类的错误，并不会走 reject 分支。
• 不支持 abort 和 超时控制。
• 无法检测请求进度。

不得不说， fetch 还需要多多努力呀。

3.axios

接下来讲一下大名鼎鼎的 axios。在 Vue 2.0 之后，著名的 Vue 作者尤雨溪曾推荐过，而我对 axios 的认识也开始于此。

axios 在浏览器端实际上也是基于 XMLHttpRequest 来实现的，并且基于 promise 提供了一套 promise 风格的链式调用 API。在展示代码书写风格之前，我忍不住要说几个 axios 的亮点：

• 支持 promise API。
• 支持请求和响应拦截。
• 提供并发请求接口功能。
• 轻量高效、简单易用。
• 客户端支持防止CSRF。
• 支持 node 端。

可以说，axios 的设计非常的全面和优秀，甚至还支持 node 端，而支持拦截请求和响应、支持并发请求接口更是满足了很多业务场景的需求。接下来看看 axios 一般书写方式：

// 简单的请求
axios.get(url, {
    params: params
}).then(function (response) {
    // code ...
}).catch(function (error) {
    console.log(error);
})


// 并发请求
function axios1() {
    return axios.get(url);
}

function axios2() {
    return axios.get(url);
}

axios.all([axios1(), axios2()])
    .then(axios.spread(function (acct, perms) {
    // code ...
}));

显而易见，简单、高效，并且 API 体验非常好。事实上，我也更加推荐大家在实际工作中使用 axios 。而关于如何学习 axios ，除了官方文档和各类博客之外，这里我也推荐慕课网的一门课程 TypeScript 从零重构 Axios，有兴趣一边学习 axios 原理实现，一边造轮子的同学，都可以看看。

4.结尾

一路走来，前端发展的过程中诞生了很多优秀的前后端交互的技术。本章从 jQuery Ajax 、fetch 和 axios 三者展开讨论和比较，尽管 jQuery 对于现在来讲比较老旧了，但这丝毫不妨碍它是一个优秀的类库，它提供的 Ajax 功能也确实是非常好。而 fetch 后来的替代方案，本身的设计也是可圈可点的，只是现在来讲还过于稚嫩，不适用于我们业务中推广使用。相比之下，axios 可算是当打之年，从设计上、从体积上，都很适用于我们现在的各种前端技术体系中，因此，我也推荐同学们可以进一步的学习和使用这个技术。