从ajax到fetch、axios

前端是个发展迅速的领域，前端请求天然也发展迅速，从原生的XHR到jquery ajax，再到如今的axios和fetch。

jquery ajax

$.ajax({
    type: 'POST',
    url: url,
    data: data,
    dataType: dataType,
    success: function() {},
    error: function() {}
})
复制代码

它是对原生XHR的封装，还支持JSONP，很是方便；真的是用过的都说好。可是随着react，vue等前端框架的兴起，jquery早已不复当年之勇。不少状况下咱们只须要使用ajax，可是却须要引入整个jquery，这很是的不合理，因而便有了fetch的解决方案。

fetch

fetch号称是ajax的替代品，它的API是基于Promise设计的，旧版本的浏览器不支持Promise，须要使用polyfill es6-promise

举个例子：

// 原生XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)   // 从服务器获取数据
    }
}
xhr.send()
// fetch
fetch(url)
    .then(response => {
        if (response.ok) {
            return response.json();
        }
    })
    .then(data => console.log(data))
    .catch(err => console.log(err))
复制代码

看起来好像是方便点，then链就像以前熟悉的callback。

在MDN上，讲到它跟jquery ajax的区别，这也是fetch很奇怪的地方：

当接收到一个表明错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即便该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （可是会将 resolve 的返回值的 ok 属性设置为 false ）， 仅当网络故障时或请求被阻止时，才会标记为 reject。 默认状况下, fetch 不会从服务端发送或接收任何 cookies, 若是站点依赖于用户 session，则会致使未经认证的请求（要发送 cookies，必须设置 credentials 选项）.

忽然感受这还不如jquery ajax好用呢？别急，再搭配上async/await将会让咱们的异步代码更加优雅：

async function test() {
    let response = await fetch(url);
    let data = await response.json();
    console.log(data)
}
复制代码

看起来是否是像同步代码同样？简直完美！好吧，其实并不完美，async/await是ES7的API，目前还在试验阶段，还须要咱们使用babel进行转译成ES5代码。

还要提一下的是，fetch是比较底层的API，不少状况下都须要咱们再次封装。 好比：

// jquery ajax
$.post(url, {name: 'test'})
// fetch
fetch(url, {
    method: 'POST',
    body: Object.keys({name: 'test'}).map((key) => {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&')
})
复制代码

因为fetch是比较底层的API，因此须要咱们手动将参数拼接成'name=test'的格式，而jquery ajax已经封装好了。因此fetch并非开箱即用的。

另外，fetch还不支持超时控制。

哎呀，感受fetch好垃圾啊，，还须要继续成长。。

axios

axios是尤雨溪大神推荐使用的，它也是对原生XHR的封装。它有如下几大特性：

• 能够在node.js中使用
• 提供了并发请求的接口
• 支持Promise API

简单使用

axios({
    method: 'GET',
    url: url,
})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})
复制代码

写法有不少种，自行查看文档

并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));
复制代码

这是官方的并发案例，好像是挺厉害的样子。不过感受它的all方法应该是基于Promise.all()的

axios体积比较小，也没有上面fetch的各类问题，我认为是当前最好的请求方式

最后，这都是些基础用法，尚未深刻了解，仍是要在实战中踩过坑才能运用的更加自如。

查看原文