Ajax八
jQuery Ajax、fetch 和 axios
近年来，前端技术呈现一派迅猛发展的态势，随之而来的是，前后端通信方式也发生了翻天覆地的变化，从一开始的重载页面的老旧方式，逐步发展到如今 XMLHttpRequest 和 fetch。相应的，各种各样的 Ajax 类库推陈出新，不断的进步。这个章节，我们打算来聊一聊 jQuery Ajax、fetch和 axios，相信同学们将会有一个更加全面的了解。
这个技术在前面章节有独立章节进行讲解。事实上，$.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，这显然是不现实也不可取的。在更新的技术中，我们将寻求体积更小，更为先进的类库。
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 还需要多多努力呀。
接下来讲一下大名鼎鼎的 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 原理实现，一边造轮子的同学，都可以看看。
一路走来，前端发展的过程中诞生了很多优秀的前后端交互的技术。本章从 jQuery Ajax 、fetch 和 axios 三者展开讨论和比较，尽管 jQuery 对于现在来讲比较老旧了，但这丝毫不妨碍它是一个优秀的类库，它提供的 Ajax 功能也确实是非常好。而 fetch 后来的替代方案，本身的设计也是可圈可点的，只是现在来讲还过于稚嫩，不适用于我们业务中推广使用。相比之下，axios 可算是当打之年，从设计上、从体积上，都很适用于我们现在的各种前端技术体系中，因此，我也推荐同学们可以进一步的学习和使用这个技术。
