Fetch和Ajax比有什么优缺点？

[问答题]

Fetch和Ajax比有什么优缺点？

查看答案及解析

拯救世界的光太郎

Ajax

//ajax-get：
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：
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);
  }
}

优点：兼容性比较好
缺点：容易产生回调地狱

1. Ajax

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

优缺点：

针对后端 MVC 模型编程，与前端框架的 MVVM 风格不符
JQuery整个项目太大，单纯使用Ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
不符合关注分离思想

2. fetch

fetch("http://localhost:6888/test_get",{
 method:"GET",
  mode:"cors"
}).then(res=>{
  return res.json()
}).then(json=>{
  console.log("获取的结果", json.data)
  return json
}).catch(err={
  console.log("请求错误", err)
})

优点：

基于promise，支持async、await
符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里。
更好更方便的写法。
更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式。

缺点：

fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
fetch默认不会带cookie，需要添加配置项
无法进行复杂的IO操作
fetch没有办法原生监测请求的进度
兼容性不好，IE不支持

3. axios

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

优缺点：