ajax,axios，fetch区别

首先，ajax是一种技术，实现网页部分数据的刷新，那么ajax是怎么实现的呢？先看一下基础版的ajax封装：

var xml=new XMLHttpRequest()
xml.open('get',url,false)
xml.onreadystatechange=function(){
    if(xhr.readyState==4){
        if(xhr.status==200||xhr.status==304){
            console.log(xhr.responseText)
        }
    }
}
xml.send()
xml.open('post',url,false)
xml.setRequestHeader('Content-type','application/x-www-urlencoded')
xml.onreadystatechange=function(){
    if(xhr.readyState==4){
        if(xhr.status==200||xhr.status==304){
            console.log(xhr.responseText)
        }
    }
}
xml.send()

可以看出这就是XML的基本使用，其实无论jquery的ajax方法，还是axios，都是基于XML进行封装的。

jquery的ajax方法的使用场景和优缺点

使用场景：

一些没有使用框架的项目中，因为基本项目中引入jquery会节省很多操作，而jquery对ajax也进行了封装，能兼容各个浏览器。

优点：

兼容性高，能在各个浏览器中使用，而且简化了使用
增加了对jsonp的支持，可以支持简单的跨域

缺点：

如果有多个请求，且有依赖关系，很容易形成回调地狱
本身是针对MVC的编程，不符合现在MVVM的潮流
如果只使用ajax这个方法，还要引入整个jquery库，得不偿失

axios的使用场景和优缺点

使用场景：

各个支持高级语法的地方，因为axios是基于Promise进行封装的

优点：

支持Promise Api
有请求和发送拦截，可以进行处理
传唤请求数据和响应数据
客户端支持防御XSRF

缺点：

值适用于高版本浏览器

fetch的使用场景和优缺点

fetch是低层次的API，代替XHR，可以轻松处理各种格式，非文本化格式。可以很容易的被其他技术使用，例如Service Workers。但是想要很好的使用fetch，需要做一些封装处理

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

优势

跨域很简单

fetch({
  url:'api/index',
  method:'post',
  mode:'no-cors',
})

劣势：
fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
fetch默认不会带cookie，需要添加配置项。
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费。
fetch没有办法原生监测请求的进度，而XHR可以。