vue与服务端通信—vue-resource

Vue.js本身没有提供与服务端通信的借口,但是通过插件的形式实现了基于Ajax、Jsonp等技术的服务端通信。

ps:说明下,从vue2.x开始尤大大推荐使用axios进行数据交互,关于axios后续将继续和大家一起学习。

今天我们就一起学习一下vue-resource

一、安装

npm install vue-resource --save
//然后在main.js(入口文件)中引入并注册
import Vue from 'vue';
import VueResource from 'vue-resource'
Vue.use(VueResource)

二、参数配置

vue-resource将请求配置分为全局配置、组件实例配置和调用配置这三部分。并且这三部分的优先级依次增高。

1. 全局配置

使用全局配置设置默认值。

Vue.http.options.root = '/root';
2.组件实例配置

在组件实例化的配置参数http选项中进行配置。

new Vue({
  http:{
      root: './root',
      headers{
        Authorization: 'Basic datura'
      }
  }
})
3.方法调用时配置
new Vue({
  methods:{
      getData(){
          this.$http.get({
              url: '/api',
              headers: {
                  Authorization: 'Basic datura'
              }
          }).then(function(res){
              //请求成功的回调
          },function(err){
               //请求失败的回调
          })
    }
  }
})

三、具体调用(请求数据)

1.方式一(底层式)
new Vue({
  methods:{
      getData(){
          //POST请求,带参数
          this.$http({
              url: '/api',
              method: 'POST',
              data:{
                  'username': 'datura_lj',
                  'password': 123456
              },
              headers: {
                  'Content-Type': 'x-wwww-form-urlencoded'
              }
          }).then(function(res){
              //请求成功的回调
          },function(err){
               //请求失败的回调
          })
    }
  }
})
2.方式二(便捷式)

不同于底层式方法,便捷式方法是其实是对底层方法进行了封装,它提供了7种请求API:

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

参数说明:

参数 数据类型 说明
url string 请求数据的地址
body Obj, FormData, string request body
headers Obj request header
params Object 请求的URL参数对象
method string 请求的HTTP方法,例如:'GET', 'POST'或其他
timeout number 单位为毫秒请求超时时间 (0 表示无超时时间)
before function(request) 请求发送前的处理函数,类似于jQuery的beforeSend函数
progress function(event) ProgressEvent回调处理函数
credentials boolean 表示跨域请求时是否需要使用凭证
emulateHTTP boolean 发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送,并设置请求头的X-HTTP-Method-Override
emulateJSON boolean 将request body以application/x-www-form-urlencoded content type发送

四、实战代码

// 基于全局Vue对象使用http 
Vue.http.get('/api', [options]).then(successCallback, errorCallback);
Vue.http.post('/api', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http 
this.$http.get('/api', [options]).then(successCallback, errorCallback);
this.$http.post('/api', [body], [options]).then(successCallback, errorCallback);
    methods:{
       get1:function(){
              //发送get请求
          this.$http.get('/api').then(function(res){
             //请求成功函数   
          },function(){
             //请求失败函数
          });
        },
        get2:function(){
             //发送get请求
           this.$http.get('get.do',
                {
                    a:1,
                    b:2
                }
                ).then(function(res){
                   //请求成功函数   
                   },function(){
                    //请求失败函数
                 });
          },
          post:function(){
                 //发送post请求
            this.$http.post('post.do',
                {
                    a:1,
                    b:2
                }
              ).then(function(res){
                    //请求成功函数 
              },function(){
                    //请求失败函数
              });
           },
        put:function(){
            this.$http.put('put.do',{
                "id": 111,
                "hascollect": 1
            }).then(function(res){
           //请求成功函数
            }
          },function(err){
            //请求失败函数
          });
      }
  }

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 89,541评论 13 124
  • 迎着夕阳西下,吹着晚风,走在静谧的小路上,一个人,一副耳机,一首单曲循环,朝着一条路的尽头走去。 不过...
    本陌阅读 77评论 1 1
  • 文/刘彩霞 (二十五) 小玲儿心中充满了懊恼,是自己一脸的慌张提醒了三子,他才转头直奔卧室,把脸贴在那扇窗户上往楼...
    彩霞漫天阅读 47评论 0 0
  • 昨天晚上我想偷懒,怀着深深的内疚躲到儿子高低床的上铺睡觉,儿子睡在下铺,他很开心,因为可以连续播放式给我普及...
    屰月阅读 90评论 1 2
  • 2012年10月16日凭借历史小说《提堂》,再次获得英国布克文学奖,现年六十岁的女作家,诺贝尔文学奖二度获...
    万盛和合阅读 179评论 0 2