数据交互的主要五种方式: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’,如果没有配置则无法访问接口。

Logo

前往低代码交流专区

更多推荐