axios fetch ajax

ajax

传统Ajax是XMLHttpRequest（XHR），核心是使用XHR对象，但是多个请求之间如果有先后关系的话，会出现回调地狱。JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持

缺点：

1. 不符合MVVM，是针对MVC的编程
2. 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
3. JQuery太大，如果只是用ajax的话而导入整个JQuery太不划算
4. .不符合关注分离（Separation of Concerns）的原则
5. 配置和调用方式非常混乱，而且基于事件的异步模型不友好

fetch

fetch是基于promise设计的。fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

fetch是比较底层的API，很多情况下都需要我们再次封装。

// fetch
fetch(url, {
    method: 'POST',
    body: Object.keys({name: 'test'}).map((key) => {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&')
})

优缺点：

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

axios

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax.

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范

可以在node.js中使用，

axios({
    method: 'GET',
    url: url,
})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})

并发请求

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) {
    // Both requests are now complete
  }));

以上是官方的案例

axios体积比较小，封装的也很好，也没有fetch和ajax的问题

防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略

以上内容整理于互联网