2025年vue请求接口 --- vue-resourse和axios用法及区别

vue请求接口 --- vue-resourse和axios用法及区别vue resourse 和 axios 区别 用法 它其实就是我们 vue 请求里面的 this http 和 this axios 功能特性 vue axiosvue2 0 之后 就不再对 vue resource 更新 而是推荐使用 axios

--- 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界面。

 

具体用法:

--- 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插件具有以下特点:

 -- 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); }) 

 

今天的文章 2025年vue请求接口 --- vue-resourse和axios用法及区别分享到此就结束了,感谢您的阅读。
编程小号
上一篇 2025-10-10 11:01
下一篇 2025-09-24 23:06

相关推荐

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