2019-06-08vue-resource实现get，post，jsonp请求

虽然现在都用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的数据了

如何使用

 
  
  
  
  
......
 

    
  
......
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:

Parameter	Type	Description
url	string	URL to which the request is sent
body	Object, FormData, string	Data to be sent as the request body
headers	Object	Headers object to be sent as HTTP request headers
params	Object	Parameters object to be sent as URL parameters
method	string	HTTP method (e.g. GET, POST, ...)
responseType	string	Type of the response body (e.g. text, blob, json, ...)
timeout	number	Request timeout in milliseconds (0 means no timeout)
credentials	boolean	Indicates whether or not cross-site Access-Control requests should be made using credentials
emulateHTTP	boolean	Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header
emulateJSON	boolean	Send request body as application/x-www-form-urlencoded content type
before	function(request)	Callback function to modify the request object before it is sent
uploadProgress	function(event)	Callback function to handle the ProgressEvent of uploads
downloadProgress	function(event)	Callback function to handle the ProgressEvent of downloads

发送请求后，服务器返回来了一些数据，客户端怎么获取呢？通过.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} 设置提交的的内容类型为普通表单数据格式。

    
......
 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了，额，这儿就先不学习。