ajax、axios、fetch 的区别

Ajax

• 全称是 Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思。
• ajax 并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
  1. 使用 CSS 和 XHTML 来表示。
  2. 使用 DOM 模型来交互和动态显示。
  3. 使用 XMLHttpRequest 来和服务器进行异步通信。
  4. 使用 javascript 来绑定和调用。
• Ajax 的原理简单来说是通过 XMLHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作 DOM 而更新页面。 XMLHttpRequest 是 Ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

    //ajax-get：
    //实例化XMLHttpRequest对象，与服务器通信，模拟http请求
    var xhr = new XMLHttpRequest();
    //请求行
    xhr.open('get','./get.php?key1=val1&key2=val2');
    //请求头
    xhr.setRequestHeader('content-Type','text/html');
    //请求主体
    xhr.send(null);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            console.log(xhr.responseText);
        }
    }

    //ajax-post：
    //实例化XMLHttpRequest对象，与服务器通信，模拟http请求
    var xhr = new XMLHttpRequest();
    //请求行
    xhr.open('post','./ajax-post.php');
    //请求头
    xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');
    //请求主体
    xhr.send('key1=val1&key2=val2');
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            console.log(xhr.responseText);
        }
    }

• Ajax 的优点：

  1. 无刷新更新数据:在不刷新整个页面的前提下与服务器通信维护数据。这使得 Web 应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
  2. 异步与服务器通信：AJAX 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了 Browser 和 Server 之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
  3. 前端和后端负载平衡：可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
  4. 基于标准被广泛支持: 不需要下载插件或者小程序。
  5. 界面与应用分离

• Ajax 的缺点

  1. AJAX 干掉了 Back 和 History 功能，即对浏览器机制的破坏
  2. AJAX 的安全问题
  3. 对搜索引擎支持较弱
  4. 破坏程序的异常处理机制
  5. 违背 URL 和资源定位的初衷
  6. 客户端过肥，太多客户端代码造成开发上的成本

XMLHttpRequest

let xhr = new XMLHttpRequest();
// 请求成功回调函数
xhr.onload = e => console.log('request success');
// 请求结束
xhr.onloadend = e => console.log('request loadend');
// 请求出错
xhr.onerror = e => console.log('request error');
// 请求超时
xhr.ontimeout = e => console.log('request timeout');
// 请求回调函数
xhr.onreadystatechange = () => {};

// 设置超时时间,0表示永不超时
xhr.timeout = 0;
// 初始化请求
xhr.open('GET/POST/DELETE/...', '/url', true || false);
// 发送请求
xhr.send(null || new FormData || 'a=1&b=2' || 'json字符串');
// 接收数据
console.log(xhr.responseText);
// 取消当前响应，关闭连接并且结束任何未决的网络活动
xhr.abort();

JQ ajax

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

特性：

1. 本身是针对mvc编程，不符合mvvm前端开发流程
2. 基于原生XHR进行开发，XHR结构本身不清晰
3. JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理

axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

特性：

1. 从浏览器中创建XMLHttpRequest
2. 从node.js 中发出http请求
3. 支持 Promise API
4. 客户端支持防止CSRF（伪脚本攻击）
5. 提供了并发请求API接口
6. 支持请求/响应拦截、取消请求
7. 自动转换json数据

用法：详见

1. 执行多个并发请求

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) {
    // 两个请求现在都执行完成
  }));

2. post 请求
   默认情况下，axios 将 JavaScript 对象序列化为 JSON。要以application / x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

3. 封装：详见

fetch

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

特性：

1. 关注分离，没有将输入、输出和用事件来跟踪的状态混合在一个对象中
2. 更好更方便的写法
3. 更加底层化，提供了丰富的API
4. 脱离了XHR
   • fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
   • fetch默认不会带cookie，需要添加配置项
   • fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
   • fetch没有办法原生监测请求的进度，而XHR可以

总结

更倾向于 axios