Vue

vue-resource跨域请求

联系站长 作者:web知道,未知,网络大神 来源:未知 2018-10-15 13:31 我要评论

vue-resource跨域请求的使用方法...

<!-- vue-resource这是基于vue,所以我们要在引入vue.js之后再引入vue-resource
当引入这个文件之后,vue-resource会在当前vue实例上动态的绑定一个属性$http -->
 
npm i vue-resource
 
// 全局Vue构造器写法
      Vue.http.get('/someUrl', [options])
              .then(successCallback, errorCallback);
      Vue.http.post('/someUrl', [body], [options])
              .then(successCallback, errorCallback);
 
// 在Vue实例中的写法
vue-resource get请求写法格式:
        this.$http.get('请求的url', [可选参数对象,使用{}传参]).then(成功回调函数, 失败回调函数);
         this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
 
vue-resource post请求写法格式:
         this.$http.post('请求的url',[可选参数请求报文体对象body,使用{}传参], {emulateJSON:true}).then(成功回调函数, 失败回调函数);
 
注意点:
    $http.post()方法中的第二个参数固定写成:{emulateJSON:true},否则可能造成服务器无法接收到请求报文体中的参数值
    
     this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
 
 举例:
    this.$http.post('http://vuecms.ittun.com/api/adddata?id=1'  //请求的url
    ,{content:'hello'}  //请求报文体中传入的参数对象,多个使用逗号分隔
    ,{emulateJSON:true}  //固定写法,保证服务器可以获取到请求报文体参数值
    ).then(function(res){console.log(res.body)}, function(err){//err是异常数据});
    
 
jsonp请求主要用来解决ajax跨域请求问题,使用jsonp实现跨域首先要保证服务器api支持jsonp请求的格式
vue-resource jsonp请求写法格式:
    this.$http.jsonp('请求的url', [可选参数对象,使用{}传参]).then(成功回调函数, 失败回调函数);
 
举例:
    this.$http.jsonp('http://157.122.54.189:9093/jsonp').then(function(res){console.log(res.body)}, function(err){//err是异常数据});



本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评