Vue-resource实现get，post，jsonp请求

除了 Vue-resource 之外可以使用'axios'的第三方包实现数据请求

get请求

语法：

this.$http.get(url,[options]).then(successCallback,errorCallback)

errorCallback可以不写

methods:{
     getinfo(){
          this.$http.get('http://*********').then(function(result){
                //用result.body或result.data获取服务器返回的成功数据     
                console.log(result.body);
          })
     },
}

 

post请求

语法：

this.$http.post(url,[body],[options]).then(successCallback,errorCallback)

手动发起的Post请求，默认没有表单格式，所以有的服务器处理不了

通过设置第三个参数，{emulateJSON:true}设置提交的内容格式为普通表单数据格式

methods:{
    postinfo(){                            
         this.$http.post(url,{}{emulateJSON:true}).then(function(result){
                //通过设置第三个参数，{emulateJSON:true}设置提交的内容格式为普通表单数据格式
                console.log(result.body);
         })       
    }
}

 

jsonp请求

语法：

this.$http.jsonp(url, [options]).then(successCallback,errorCallback)

methods:{
      jsonpinfo(){
            this.$http.jsonp(url).then(function(result){
                   console.log(result.body);
            })
      }
}

jsonp的实现原理：

原因：由于浏览器的安全限制，不容许AJAX访问协议不同、域名不同、端口不同的数据接口，也就是说不容许跨域访问

原理：通过动态创建scripts标签，把src属性指向数据接口的地址，因为scripts不存在跨域限制，缺点是只支持GET请求

 

 

Vue-resource设置请求接口的根域名

    全局配置请求的数据接口的根域名，在每次发起http请求时，请求的url路径为相对 路径，前面不能加/

    Vue.http.options.root = 'http://vue.studyit.io/';

    项目中最好是弄一个配置文件来处理

 

Vue-resource全局配置emulateJSON

    全局启用 emulateJSON:true

    Vue.http.options.emulateJSON = true;