前端数据交互的五种方式

数据交互的主要五种方式：xhr 、$.ajax 、fetch、axios 、vue-resource。

1.XMLHttpRequest是原生js基于浏览器所提供的一种可以数据交互的方式。
优点：1.在不重新加载页面的情况下更新网页
2.在页面已加载后从服务器请求数据
3.在后台向服务器发送数据
4.所有现代的浏览器都支持 XMLHttpRequest 对象。
2.$.ajax
jQuery的ajax底层原理是结合源生的XMLHttpRequest对象来进行二次封装，所以它具备了前后端交互的能力，它所配置的参数大概有二十多种，常用的请求类型（type），请求地址（url），传参（data），成功回调（success），失败回调（error），返回数据类型（dataType ），最大的问题存在于回调地狱。
3.fetch
fetch 是浏览器提供的另一种数据交互方式。全局 fetch 函数是 web 请求和处理响应的简单方式，不使用 XMLHttpRequest但是和XMLHttpRequest非常类似，和XMLHttpRequest不同是在底层添加了Promise，可以处理掉jQuery.ajax的回调地狱的问题，所以是现在主流的交互方式，也是现在用于vue的交互方式之一，它的成功回调是通过.then的方式，但是需要注意的是在第一次.then的时候我们并不能拿到所需要返回的值，第一次.then主要是把数据转换为json类型，我们所需要的数据一般在第二次.then的时候才可以取到。
4.axios
axios是另一种vue的交互方式，是vue“全家桶”的技术之一，vue“全家桶”是指用vue框架开发的主要技术，它的组成是vue.js、axios、vue-router、vuex，axios的默认请求是‘get’，‘get’传参的方式是params，‘post’传参的方式是data，axios是基于promise的http库，可以用于浏览器和node.js使用，虽然axios是基于promise（用作异步）但不是完全基于，axios的底层能力还是XMLHttpRequest（数据交互） 对象，axios的优势有：可以再node.js中创建http请求、拦截请求和响应、转换请求数据和响应数据、取消请求、可以自动转换json数据，axios在vue中提供了all的方法，可以执行多个并发请求，axios有着全局默认配置baseURL可以指定将被用在各个请求的配置默认值，axios最大的优势在于可以通过interceptors添加请求拦截器（request）和响应拦截器（response），可以方便我们做一个集中式的操作。
5.vue-resource
vue-resource是存在与vue1.0的交互方式，vue1.0在借鉴angularjs时保留了http来进行数据的交互,同时在vue1.0时存在jsonp，可以用来专门处理类似于百度接口的标准jsonp请求的数据，http相当于在vue.prototype上来挂载一个http的方法，在http的使用上需要传入两个参数，第一个参数为api，第二个参数必须是jsonp的选项对象且值必须为‘cb’，如果没有配置则无法访问接口。