黑马vue---33、vue-resource 实现 get, post, jsonp请求
一、总结
一句话总结：
vue-resource使用非常非常非常简单：this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {console.log(result.data)})
// 当发起get请求之后， 通过 .then 来设置成功的回调函数 this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) { // 通过 result.body 拿到服务器返回的成功的数据 // console.log(result.body) })
1、vue-resource的post请求实例？
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
// 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了 // 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式 this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => { console.log(result.body) })
2、vue-resource的jsonp请求实例？
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => { console.log(result.body) })
3、手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了，如何解决？
通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => { console.log(result.body) })
二、vue-resource 实现 get, post, jsonp请求
1、相关知识
除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求
- 之前的学习中，如何发起数据请求？
- 常见的数据请求类型？ get post jsonp
- 测试的URL请求资源地址：
- get请求地址： http://vue.studyit.io/api/getlunbo
- post请求地址：http://vue.studyit.io/api/post
- jsonp请求地址：http://vue.studyit.io/api/jsonp
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10 <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意 --> 11 <!-- this.$http.jsonp --> 12 <script src="./lib/vue-resource-1.3.4.js"></script> 13 </head> 14 15 <body> 16 <div id="app"> 17 <input type="button" value="get请求" @click="getInfo"> 18 <input type="button" value="post请求" @click="postInfo"> 19 <input type="button" value="jsonp请求" @click="jsonpInfo"> 20 </div> 21 22 <script> 23 // 创建 Vue 实例，得到 ViewModel 24 var vm = new Vue({ 25 el: '#app', 26 data: {}, 27 methods: { 28 getInfo() { // 发起get请求 29 // 当发起get请求之后， 通过 .then 来设置成功的回调函数 30 this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) { 31 // 通过 result.body 拿到服务器返回的成功的数据 32 // console.log(result.body) 33 }) 34 }, 35 postInfo() { // 发起 post 请求 application/x-wwww-form-urlencoded 36 // 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了 37 // 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式 38 this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => { 39 console.log(result.body) 40 }) 41 }, 42 jsonpInfo() { // 发起JSONP 请求 43 this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => { 44 console.log(result.body) 45 }) 46 } 47 } 48 }); 49 </script> 50 </body> 51 52 </html>