fetch

fetch
ajax

fetch采用了Promise的异步处理机制，使用比ajax更加简单，可能会逐渐代替ajax
1. 旧浏览器不支持 Promise，需要使用 polyfill es6-promise
2. fetch-ie8 会自动使用 XHR 做 polyfill。但在跨域时有个问题需要处理

从 fetch()返回的 Promise 将不会拒绝HTTP错误状态, fetch只对网络请求报错
1. 对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject
2. 只有网络错误这些导致请求不能完成时，fetch 才会被 reject

fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: ‘include’})
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
1. 不能中断，没有 abort、terminate、onTimeout 或 cancel 方法
2. Fetch 和 Promise 一样，一旦发起，不能中断，也不会超时，只能等待被 resolve 或 reject
3. 标准 Promise 没有提供获取当前状态 rejected 或者 resolved 的方法。只允许外部传入成功或失败后的回调

fetch没有办法原生监测请求的进度，而XHR可以
1. 缺少其它一些方法：always，progress，finally
2. always 可以通过在 then 和 catch 里重复调用方法实现。finally 也类似。progress 这种进度通知的功能还没有用过，暂不知道如何替代

fetch 是全局量 window 的一个方法，主要特点有：

第一个参数是URL:
第二个是可选参数，可以控制不同配置的 init 对象
fetch的好处
1. 在ES6出现的，使用了 JavaScript Promises 来处理结果/回调，支持链式操作
2. 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
3. 基于标准 Promise 实现，支持 async/await

fetch('/api/url')
  .then(function(response) {
  return . //... 执行成功, 第1步...
})
  .then(function(returnedValue) {
  // ... 执行成功, 第2步...
})
  .catch(function(err) {
  // 中途任何地方出错...在此处理 :( 
})

fetch的特点

fetch在服务端不会发送或接收任何 cookies,
1. 如果站点依赖于维护用户会话，则导致未经认证的请求,要发送 cookies，必须发送凭据头
2. 如果想要在同域中自动发送cookie,加上 credentials 的 same-origin 选项
3. same-origin值使得fetch处理Cookie与XMLHttpRequest类似。否则，Cookie将不会被发送，导致这些请求不保留认证会话
对于CORS请求，使用include值允许将凭据发送到其他域

fetch(url, {
  credentials: ’same-origin'
})
// cors
fetch(url, {
  credentials: 'include'
})

fetch的封装

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}
function parseJSON(response) {
  return response.json()
}
fetch('/api/users')
  .then(checkStatus)
  .then(parseJSON)

axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
本质上也是对原生XHR的封装，基于 Promise的实现版本，符合最新的ES规范
axios特点
1. 从浏览器中创建 XMLHttpRequest
2. 支持 Promise API
3. 客户端支持防止CSRF
4. 提供了一些并发请求的接口（重要，方便了很多的操作）
5. 从 node.js 创建 http 请求
6. 拦截请求和响应
7. 转换请求和响应数据
8. 取消请求
9. 自动转换JSON数据

csrf攻击

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

ajax

Ajax的本质是使用 XMLHttpRequest对象来请求数据
ajax缺点
1. 多个请求之间如果有先后关系的话，就会出现回调地狱，fetch用 then解决
2. 不符合关注分离（Separation of Concerns）的原则

function ajax(url, fnSucc, fnFaild) {
  //1.创建Ajax对象
  if(window.XMLHttpRequest){
    var oAjax=new XMLHttpRequest();
  }else{
    var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //2.连接服务器（打开和服务器的连接）
  oAjax.open('GET', url, true);
  //3.发送
  oAjax.send();
  //4.接收
  oAjax.onreadystatechange=function (){
    if(oAjax.readyState==4){
      if(oAjax.status==200){
        //alert('成功了：'+oAjax.responseText);
        fnSucc(oAjax.responseText);
      }else{
        //alert('失败了');
        if(fnFaild){
          fnFaild();
        }
      }
    }
  }
}