vue学习笔记（三）---- vue-resource

一、使用vue-resource发起get请求

github仓库地址：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
在这里插入图片描述

<body>
<div id="app">
   <input type="button" value="get请求" @click="vueget()"/>
</div>
<script src="../lib/vue-resource-1.3.4.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: { 
        },
        methods:{
            vueget(){
                console.log(this.$http)
                })
            }
        }
    })
</script>
</body>

如果在没有导入vue-resource的时候
console.log(this.$http) ====> undefined

如果导入了vue-resource
那么console.log(this.$http) 结果如下
在这里插入图片描述

<div id="app">
   <input type="button" value="get请求" @click="vueget()"/>
</div>

methods:{
    vueget(){
  // console.log(this.$http)
   this.$http.get('http://api.cms.liulongbin.top/api/getlunbo').then(function (data) {
   console.log(data)
   console.log(data.body)
   console.log(data.body.message)
                })
            }
        }

来吧展示：
在这里插入图片描述

二、使用async和awite来修饰实现数据请求的异步方法

methods:{
 async vueget(){
 //这样一修饰，在内部就可以使用await
  //使用await去修饰法异步请求的方式
  //这样后面就不用点then了
  // await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')
  //定义一个变量去接收一下请求的数据
 var result = await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')
 console.log(result)
//这个方法不用.then 直接await调用this.$http.get()，然后输入返回值
   }
}

来吧展示：
在这里插入图片描述
从一个对象中使用结构赋值 {} 拿到对应的属性

var { body } = await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')
console.log(body)
console.log(body.message)

来吧展示：

在这里插入图片描述

三、使用vue-resource发起post请求

<input type="button" value="post请求" @click="vuepost()"/>

async vuepost(){
var {body} = await 
 // post 方法接收三个参数：
  // 参数1： 要请求的URL地址
  // 参数2： 要发送的数据对象
  // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post('http://api.cms.liulongbin.top/api/post',{
name:'千夏',age:18,hobbies:'吃饭睡觉敲代码'
    })
 console.log(body)
}

来吧展示：
在这里插入图片描述

四、使用vue-resource发起jsonp请求

 <input type="button" value="jsonp请求" @click="vuejsonp()"/>

 async vuejsonp(){
     var {body} = await this.$http.jsonp('http://api.cms.liulongbin.top/api/jsonp')
     console.log(body)
  }

来吧展示：

在这里插入图片描述

五、使用axios结合vue发起get请求

导入axios文件

<script src="../lib/axios-v0.17.1.js"></script>

在vm区域中，触发点击事件

<div id="app">
    <input type="button" value="get请求" @click="vueget()"/>
</div>

使用axios结合vue发起get请求

methods:{
   async vueget(){
   const result = await axios.get('http://api.cms.liulongbin.top/api/getlunbo')
//也可以写成
//const {data} = await axios.get('http://api.cms.liulongbin.top/api/getlunbo')
//console.log(data)
   console.log(result)
    }
}

来吧展示：

在这里插入图片描述
如果想要axios和vue-resource中的get一样使用this.$http.get()去发送请求，方法如下：

//把axios挂载到vue构造函数的原型上
    Vue.prototype.$http = axios
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
         async vueget(){
          const {data} = await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')
          console.log(data)
       }
        }
    })

六、 JSONP的实现原理

由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全；
可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
具体实现过程：
- 先在客户端定义一个回调方法，预定义对数据的操作；
- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
- 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；