ajax、fetch、axios区别

1、jQuery ajax：传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。 问题： 1.1、 回调地狱问题； 1.2、 单纯使用ajax却要引入整个JQuery非常的不合理 1.3、 配置和调用方式非常混乱，而且基于事件的异步模型不友好

2、 fetch :Ajax的替代品，是在es6中出现的，Fetch是基于promise设计的。是window上原生API，没有使用XMLHttpRequest对象。 优势： 2.1、 语法简洁，更加语义化 ; 2.2、 基于标准 Promise 实现，支持 async/await; 2.3、 同构方便，SSR渲染，使用 isomorphic-fetch 2.4、 更加底层，提供的API丰富（request, response） 2.5、 脱离了XHR，是ES规范里新的实现方式 劣势： 2.1、 fetch只有网络错误这些导致请求不能完成时，fetch才会被reject。对400，500都当做成功的请求，服务器返回 400，500错误码时并不会 reject， 2.2、 fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'}) 2.3、 fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费 2.4、 fetch没有办法原生监测请求的进度，而XHR可以 3、 axios : 是一个基于Promise 用于浏览器和nodejs的HTTP客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范 优势： 3.1 从浏览器环境中创建 XMLHttpRequest; 3.2 从 node环境中创建http请求; 3.3 支持 Promise API; 3.4 客户端支持防止CSRF ; 3.5 拦截请求和响应、取消请求 ; 3.6 转换请求和响应数据 ;

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

总结：axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。