ajax，axios，fetch的使用

今天，看书，发现有涉及到此三种前后端连接的方法，我因此对此进行了学习，新手小菜鸟，有错误请见谅。

---

1.jQuery ajax

这里运用了jQuuery已经封装好的ajax,使用之前需要引包，但缺点是JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理，且多个请求之间如果有先后关系的话，就会出现回调地狱。

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

回调地狱可以使用Promise解决。

function load() {
    return new Promise((resovel, reject) => {
        $.ajax({
            type: 'POST',
            url: 'url',
            data: data,
            dataType: dataType,
            success: function(res) {
                resolve(res);
            },
            error: function(err) {
                reject(err);
            }
        });
    });
}

load().then(data => {
    console.log(data);  // 请求到的数据
    console.log('请求数据成功');
}, err => {
    console.log('请求失败',err);
});

---

2.axios

axios是Promise的实现版本，符合最新的ES规范,使用前也需要引包，使用如下

axios({
    method: 'post',
    url: 'url',
    data: data
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

---

3.fetch

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，fetch不是ajax的进一步封装，而是原生js。

Fetch获取数据

还有其他方法来处理不同类型的响应。如果请求一个XML格式文件，则调用response.text。如果请求图片，使用response.blob方法。所有这些方法(response.json等等）返回另一个Promise，所以可以调用.then方法处理我们转换后的数据。

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

Fetch发送数据

fetch('url', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(...)
})
.then(data => console.log(data))
.catch(error => console.log(error));

如有问题，可以联系本人，请见谅。