ajax fetch axios

1.31. ajax fetch axios

ajax
对原生XML Http Request（XHR）的封装，增加了对jsonp的支持
缺点：1.如果有多个请求，并且有依赖关系的话，容易形成回调地狱。（主要是因为ajax会在回调函数里面继续发请求）
2.本身是针对MVC的编程，不符合现在前端MVVM的浪潮。
3.ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理。
特点：局部刷新页面，无需加载整个页面
Ajax是一种思想，XML Http Request只是实现ajax的一种方式
实现过程：
 创建 Ajax的核心对象 XMLHttpRequest对象
 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
 构建请求所需的数据内容，并通过XMLHttpRequest 对象的 send() 方法发送给服务器端
 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
 接受并处理服务端向客户端响应的数据结果
 将处理结果更新到 HTML页面中

Fetch （在ES6中提出来的）
fetch是XML Http Request的替代品，fetch是基于promise设计的，fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。是一个API是真实存在的

1. 使用promise，不使用回调函数
2. 采用模块化设计，比如rep、res等对象分散开来，比较友好
3. 通过数据流对象处理数据、提高网站性能（最主要的好处）
   1.fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
   2.fetch默认不会带cookie，需要添加配置项（ 发送cookies 需要设置 fetch(url, {credentials: ‘include’}) 选项。）。
   3.fetch不支持abort(取消请求)，不支持超时控制，使用setTimeout及Promise.reject的实现超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费。
   4.fetch没有办法原生监测请求的进度，而XHR可以。
   
   Axios（因为与框架结合的比较好）
   Axios是一个基于promise的HTTP库，可以用在浏览器和 node.js 中。它本质也是对原生XMLHttpRequest的封装，只不过它是Promise的实现版本，符合最新的ES规范。是一个封装库
   1.从浏览器中创建XMLHttpRequest
   2.从 node.js 创建 http 请求
   3.支持 Promise API
   4.提供了一些并发请求的接口 axios.all();
   5.客户端支持防御XSRF( 每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，)
   6.自动转化JSON数据
   7.拦截请求和响应
   8.取消请求

Axios（因为与框架结合的比较好）
Axios是一个基于promise的HTTP库，可以用在浏览器和 node.js 中。它本质也是对原生XMLHttpRequest的封装，只不过它是Promise的实现版本，符合最新的ES规范。是一个封装库
1.从浏览器中创建XMLHttpRequest
2.从 node.js 创建 http 请求
3.支持 Promise API
4.提供了一些并发请求的接口 axios.all();
5.客户端支持防御XSRF( 每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，)
6.自动转化JSON数据
7.拦截请求和响应
8.取消请求

ajax axios fetch跨域默认不携带cookie
1.客户端需要设置withCredentials:true(ajax,axios) credentials: ‘include’(fetch)
2.服务端需要设置响应头 access-control-allow-credentials:true
同时必须指明 access-control-allow-origin 为服务方的origin， 不能为*