vue resource和axios区别_axios和resource[通俗易懂]

vue resource和axios区别_axios和resource[通俗易懂]-vue-resourse和axios区别:用法:它其实就是我们vue请求里面的this.$http.***和this.axios.***功能特性:***vue-axiosvue2.0之后,就不

vue

— vue-resourse和axios区别:

       用法:它其实就是我们vue请求里面的 this.$http.*** 和 this.axios.***

       功能特性:

 

*** vue-axios

vue2.0之后,就不再对vue-resource更新,而是推荐使用axios。基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用。

功能特性
1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 CSRF/XSRF 攻击

 

*** vue-resource

vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,jquery的 $.ajax 能做的事情,vue-resource一样也能做到,而且vue-resource的API更为简洁。另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为,比如使用inteceptor在ajax请求时显示loading界面。

1、体积小
vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比
jQuery的体积要小得多。
2、支持主流的浏览器
和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。

3、支持Promise API和URI Templates
Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。
URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。
4、支持拦截器
拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。拦截器在一些场景下会非常有用,
比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。

 

具体用法:

— axios

基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用。

— 安装 axios

npm install axios

— 在要使用的文件中引入axios

import axios from 'axios'

 — GET请求

// 向具有指定ID用户发出请求 

// 向具有指定ID的用户发出请求
 
axios.get('/user?ID=12345').then(function (response) {
 
    console.log(response);
 
}).catch(function (error) {
 
    console.log(error);
 
});

// 通过params对象传递参数

// 也可以通过 params 对象传递参数
 
axios.get('/user', {
 
    params: {
 
        ID: 12345
 
    }
 
})
 
.then(function (response) {
 
    console.log(response);
 
})
 
.catch(function (error) {
 
    console.log(error);
 
});

 — POST请求

axios.post('/user', {
 
    firstName: 'Fred',
 
    lastName: 'Flintstone'
 
})
 
.then(function (response) {
 
    console.log(response);
 
})
 
.catch(function (error) {
 
    console.log(error);
 
});

 — 执行多个并发请求

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) {
 
    //两个请求现已完成
 
}));

 

 

— vue-resourse

Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,
    如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。
    vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。
    也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。
    另外,vue-resource还提供了非常有用的inteceptor(监示器)功能,
        使用inteceptor可以在请求前和请求后附加一些行为,
        比如使用inteceptor在ajax请求时显示loading界面。

 — vue-resource特点

     vue-resource插件具有以下特点:

        1.体积小
            vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。

        2.支持主流的浏览器
            和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。

        3.支持Promise API和URI Templates
            Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。
            URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。

        4.支持拦截器
            拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。
            拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。

 — vue-resource使用

1.安装vue-resourse
    输入:npm install vue-resource --save
2.在main.js中导入,如下所示:
    import VueResource from 'vue-resource'

    Vue.use(VueResource)
3.组件中就可以使用了:
    --- get请求
           
        var params = {params: {id: id}}
        this.$http.get(url, params).then(function(res){
            // 响应成功回调
            var data = res.body;
            //数据在res.body里面
        }, function(res){
            // 响应错误回调
        });  


    --- post请求


        //启用{emulateJSON : true}选项后,
            请求会以application/x-www-form-urlencoded作为content-type,像HTML表单一样。

        var params = {params: {id: id}}
        this.$http.post(url, params,{emulateJSON : true}).then(function(res){
            // 响应成功回调
            var data = res.body;
            //数据在res.body里面
        }, function(res){
            // 响应错误回调

        }

    --- JSONP 请求
         
        var JSONparams ={
            params: {id: id}
            jsonp: 'callback' // 设置回调函数的参数的一个名字,默认是话是callback,
        }
        this.$http.jsonp(url, JSONparams).then( (res) => {
            console.log(res);
        }, (err) => {
            console.log(err);
        })

 

今天的文章vue resource和axios区别_axios和resource[通俗易懂]分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/84477.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注