vue-resource
实现get
,post
,jsonp
请求
常见的数据类型:get
,post
,jsonp
除了vue-resource
(官方文档)之外,还可以使用axios
(官方文档)使用第三方请求
配置vue-resource
的步骤:
-
在
html
文件中通过script
标签引入vue-resource
文件;<script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-resource-1.3.4.js"></script>
注意:先引用
vue
文件,在引用vue-resource
文件 -
get
请求getInfo(){ this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => { console.log(res.body); }) }
-
post
请求postInfo(){ var url = 'http://127.0.0.1:8899/api/post'; this.$http.post(url,{username:'zhangsan',pwd:'123456'},{emulateJSON:true}).then(res => { console.log(res.body); }) }
post 方法接收三个参数:
- 参数1: 要请求的URL地址;
- 参数2: 要发送的数据对象;
- 参数3: 指定post提交的编码类型为 application/x-www-form-urlencoded;
-
jsonp
请求this.$http.jsonp('http://127.0.0.1:8899/api/jsonp').then(res => { console.log(res.body) })
可以通过全局配置,设置BaseURL等参数,例如:
Vue.http.options.root = 'http://127.0.0.1:8899/' // 全局启用 emulateJSON 选项 Vue.http.options.emulateJSON = true
还可以在
vue
实例中配置:new Vue({ http: { root : 'http://127.0.0.1:8899', } })
注意:如果我们通过全局配置了,请求的数据接口根域名,则在每次单独发起 http 请求的时候,请求的 url 路径,应该以相对路径开头,前面不能带/
,否则不会启用根路径做拼接。