虽然现在都用axios，但老师课程里讲了vue-resource，就学习一下吧。

• 1.之前的学习中如何发起数据请求？
  • 原生，但太复杂了
  • jQuery，但在vue里不提倡操作DOM
    除此之外的话，我们可以用vue-resource 和 axios(读音：埃可斯一哦斯)
• 2.常见的数据请求类型？
  get，post，jsonp
• 3. 测试的URL请求资源地址：
  • get请求地址：http://120.77.181.41:3000/api/getgod?pageIdx=1
  • post请求地址：http://120.77.181.41:3000/api/addnewscom
  • jsonp请求地址：
• 4. jsonp的实现原理：
  • 由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全。
  • 可以通过动态创建script的方式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称为jsonp（根据JSONP的实现原理知道，JSONP只支持get请求）
  • 具体实现过程：
    • 先在客户端定义一个回调方法，预定义对数据的操作
    • 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口
    • 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传过来的回调方法的名称，拼接出一个调用该方法的字符串，发送给客服端去解析执行
    • 客户端拿到服务器返回的字符串后，当作script脚本去解析执行，这样就能拿到JSONP的数据了

如何使用

 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <!-- vue-resource 依赖于 vue ,先引入vue -->
  <!-- this.$http.get, this.$http.post, this.$http.jsonp -->
  <!-- 第一步，导包 -->
  <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
......
 <div id="app">
    <input type="button" value="get请求" @click="getInfo">
  </div>
......
new Vue({
  el: "#app",
  methods: {
    getInfo(){
      //第二步，发起相应的请求
      console.log("get请求");
      this.$http.get()
    },
  }
});

那么请求方法里面的格式有时怎样写呢？

• get(url, [config])
• jsonp(url, [config])
• post(url, [body], [config])
  body：要发送给服务器的数据对象

url：请求地址：

config:

发送请求后，服务器返回来了一些数据，客户端怎么获取呢？通过.then函数

需要记住的是，只要是请求数据后调用.then方法获取返回的数据，则说明该请求方法是用Promise封装的(后期补充，现在能使用就行)。

this.$http.get("http://120.77.181.41:3000/api/getgod?pageIdx=1").then(successCallback,errorCallback);

其中，成功的回调函数是必须写的，失败的回调函数是可选的。

    getInfo(){
      //第二步，发起相应的请求
      console.log("get请求");
      // this.$http.get("http://120.77.181.41:3000/api/getgod?pageIdx=1").then(successCallback,errorCallback);
      this.$http.get("http://120.77.181.41:3000/api/getgod?pageIdx=1").then(function(result){
        console.log(result);
      });
    },

body跟data里的就是返回的数据

再来学习post请求：

注意，有的服务器post只允许表单形式提交。
手动发起的post请求默认没有表单格式，有的服务器是没办法处理的。
我们可以通过post方法的第三个参数 {emulateJSON:true} 设置提交的的内容类型为普通表单数据格式。

    <input type="button" value="post请求" @click="postInfo">
......
 postInfo(){
      console.log("post请求");
      //this.$http.post("http://120.77.181.41:3000/api/addnewscom",{},{}).then(result =>{
      this.$http.post("http://120.77.181.41:3000/api/addnewscom",{},{emulateJSON:true}).then(result =>{
        console.log(result.data);
      });
    }

没有写参数时

写了参数后

再来学习JSONP：

跟get有点类似

   jsonpInfo(){
      //回调函数是匿名函数，箭头函数也是匿名函数
      this.$http.jsonp("url").then(result =>{
        console.log(result.data);
      });
    }

结合Node手写JSONP服务器剖析JSONP原理

没学过node，反正现在也不用vue-resource了用axios了，额，这儿就先不学习。