vue-resource 与服务器端通信及跨域实际应用

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介:

与服务器端通信


Vue.js 可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新。Vue 本身并没有提供与服务端通信的接口,但是通过插件的形式实现了基于AJAX、JSONP 等技术的服务端通信。


vue-resource 是一个通过 XMLHttpRequest 或 JSONP 技术实现异步加载服务端数据的 Vue 插件,该插件提供了一般的 HTTP 请求接口和 RESTful 架构请求接口,并且提供了全局方法和 Vue 组件实例方法。


一般的 HTTP 请求接口按照调用的便捷程度又分为底层方法 和 便捷方法,便捷方法是对底层方法的封装。在 vue-resource 中我们可以全局配置,同时,它提供了数据获取各个阶段的钩子,使得我们可以对数据获取过程进行更好的控制。


vue-resource 插件提供的公开方法总览图:

wKiom1hA4cCS6KzJAADliGEoFZ0327.png

vue-resource 安装及配置


1、安装  

vue-resource 提供了 npm、bower、手动编译等安装方式,可以根据业务需要选择其中一种方式进行安装。


1-1、npm

如果项目基于 npm 包方式来开发,则可以使用 npm 来按照 vue 和 vue-resource,执行如下命令

$ npm i vue vue-resource --save-dev


wKiom1hA41aCGyivAAAMJQSd5Eg489.png


然后在项目中引入 Vue.js 和 vue-resource,并且在 Vue.js 中注册 vue-resource 插件,代码如下:

// 引入 Vue.js 和 vue-resource

var Vue = require('vue');

var VueResource = require('vue-resource');

// 注册 vue-resource 插件

// 注意,假如 Vue.js 已经在html 中直接引入,则不需要再执行此步骤

// 此时 vue-resource 会自动调用 Vue.use 方法来注册

Vue.use(VueResource);


1-2、bower

当业务代码使用 bower 来管理时,可以使用 bower 安装到指定目录。假如该目录为 js/vendor,执行如下命令:

$ bower install vue-resource


在 HTML 中,在 vue 文件之后引入 vue-resource,代码如下:

<!-- 引入 Vue-->

<script src="js/vendor/vue.js"></script>



<!-- 引入 vue-resource -->

<script src="js/vendor/vue-resource.js"></script>


1-3、手动编译

当想尝试一些 Vue 中并未发布的新特性时,可以直接 clone 源码,手动构建实现。由于在未正式发布之前,有些特性可能被移除,所以不建议在生产环境中使用手动编译方式安装。


没有安装 git 工具的,可参照百度提供的步骤并解决安装过程中遇到的相关问题

http://jingyan.baidu.com/article/d2b1d1029065ba5c7e37d43e.html?st=2&os=0&bd_page_type=1&net_type=


执行命令如下:

$ git clone https://github.com/pagekit/vue-resource


$ cd vue-resource


$ npm install


$ npm run build


wKioL1hA6rzxDB83AAAfM1uhkVs247.png

wKioL1hBL0Kx2bxZAABOQ0RI548752.png


在C盘对应的目录下就生成了一系列的 vue-resource 文件


wKioL1hBL4DRr5McAABMncpFUrI254.png


2、参数配置


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


全局配置默认参数,如图:

wKioL1hA8JaAjSISAABhLjSBbXs404.png


2-1、全局配置

1
2
Vue.http.options.root =  '/root' ;
Vue.http.headers.common[ 'Authorization' ] =  'Basic YXBpOnBhc3N3b3Jk' ;


2-2、组件实例配置

在实例化组件时,可以传入 http 选项来进行配置

1
2
3
4
5
6
7
8
new  Vue({
     http: {
         root:  '/root' ,
         headers: {
             Authorization:  'Basic YXBpOnBhc3N3b3Jk'
         }
     }
})


2-3、方法调用时配置

在调用 vue-resource 请求方法时传入选项对象

1
2
3
4
5
6
7
8
9
10
11
12
new  Vue({
     ready: function (){
         //get请求
         this .$http.get({url: '/someUrl' , headers:{Authorization:  'Basic YXBpOnBhc3N3b3Jk' }})
                   .then( function (successResponse){
                         //请求成功的回调函数
                         }, function (errorResponse){
                         //请求失败的回调函数
                         }
                   )
     }
})



3、headers 配置

headers 属性用来配置请求头。合并策略遵循参数配置合并策略。除了参数配置 headers 属性可以设置请求头外,在 vue-resources 中也提供了全局默认的 headers 配置

wKioL1hBArHTQuVgAACBBadjvJA751.png上图中,可以看到 Vue.http.headers 键值可以是 HTTP 方法名、common、custom 三种类型。这三种类型的配置会进行合并,优先级从低到高依次是 common、custom、HTTP方法名。


其中 common 对应的请求头会在所有请求头中设置,custom 对应的请求头在非跨域时设置,HTTP 方法名对应的请求头只有在请求的 method 匹配方法名时才会被设置。



4、基本 HTTP 调用

基本 HTTP 调用即普通的 GET、POST 等基本的 HTTP 操作,实际上执行增、删、改、查是前后端开发人员共同约定的,并非通过 HTTP 的请求方法如 GET 代表获取数据、PUT代表写入数据、POST 代表更新数据。


4-1、底层方法

全局的 Vue.http 方法和Vue 组件的实例方法 this.$http 都属于底层方法,它们根据所传 option 参数的 method 属性来判断请求方式是 GET 还是 POST,或者是其它合法的 HTTP 方法


(1)、全局调用          this -> window

1
2
3
// global Vue object
Vue.http.get( '/someUrl' , [options]).then(successCallback, errorCallback);
Vue.http.post( '/someUrl' , [body], [options]).then(successCallback, errorCallback);


(2)、组件实例调用        this -> Vue 实例

1
2
3
// in a Vue instance
this .$http.get( '/someUrl' , [options]).then(successCallback, errorCallback);
this .$http.post( '/someUrl' , [body], [options]).then(successCallback, errorCallback);


以组件实例调用方式为例来了解一下如何发送 POST 请求,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
new  Vue({
     ready: function (){
         //POST 请求
         this .$http({
             url: '/book' ,
             method: 'POST' ,
             //请求体中发送的数据
             data:{
                 cat: '1'
             },
             //设置请求头
             headers:{
                 'Content-Type' : 'x-www-form-urlencoded'
             }
         }).then(
                 function (response){
                     //请求成功回调
                 },
                 function (response){
                     //请求失败回调
                 }
         )
     }
})


示例一:

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < meta  http-equiv = "X-UA-Compatible"  content = "IE=edge" >
     < meta  name = "viewport"  content = "width=device-width, initial-scale=1" >
     < link  href = "//cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.css"  rel = "stylesheet" >
     < title ></ title >
</ head >
< body >
< div  id = "app" >
     < input  class = "btn btn-success"  type = "button"  value = "按钮"  @ click = "get()" >
</ div >
 
< script  src = "//cdn.bootcss.com/vue/2.0.8/vue.js" ></ script >
< script  src = "//cdn.bootcss.com/vue-resource/0.7.2/vue-resource.js" ></ script >
< script >
     new Vue({
         el:'#app',
         data:{
 
         },
         methods:{
             get:function(){
                 this.$http.get('aa.txt').then(function(res){
                     alert(res.data);
                 },function(res){
                     alert(res.status);
                 });
             }
         }
     });
</ script >
</ body >
</ html >


在同级目录下,新建一个“aa.txt”,并写上一段文本“welcome vue-----”,用Apche服务器打开网页,点击按钮以后

wKiom1hBLWCyzI_wAAA-36C2mFw415.png

成功请求到了 aa.txt,并拿到了响应数据。如果响应失败,就会弹出响应失败的状态码 status,比如把 aa.txt 改成 bb.txt,就会报404 错误

wKiom1hBLhThxybiAABcjRIXl44682.png




示例二:

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head lang= "en" >
     <meta charset= "UTF-8" >
     <meta http-equiv= "X-UA-Compatible"  content= "IE=edge" >
     <meta name= "viewport"  content= "width=device-width, initial-scale=1" >
     <link href= "//cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.css"  rel= "stylesheet" >
     <title></title>
</head>
<body>
<div id= "app" >
     <input class= "btn btn-success"  type= "button"  value= "按钮"  @click= "get()" >
</div>
 
<script src= "//cdn.bootcss.com/vue/2.0.8/vue.js" ></script>
<script src= "//cdn.bootcss.com/vue-resource/0.7.2/vue-resource.js" ></script>
<script>
     new  Vue({
         el: '#app' ,
         data:{
 
         },
         methods:{
             get: function (){
                 this .$http.get( 'get.php' ,{
                     a:1,
                     b:2
                 }).then(
                     function (response){  //成功的回调函数
                         alert(response.data);
                     },
                     function (response){  //失败的回调函数
                         alert(response.status);
                     }
                 )
             }
         }
     });
</script>
</body>
</html>


PHP代码:

1
2
3
4
5
<?php
$a = $_GET [ 'a' ];
$b = $_GET [ 'b' ];
echo  $a + $b ;
?>


点击按钮以后,发起一个 get 请求,如果请求成功则返回 a+b的结果,如果请求失败则返回对应的状态码

wKiom1hBMvHgBJgnAABVqL_YuOk895.png


4-2、便捷方法

不同于底层方法,便捷方法是对底层方法的封装,在调用时可以省去配置选项 option 中的method 属性。以下是 vue-resource 提供的便捷方法列表:


  • get(url, [options])

  • head(url, [options])

  • delete(url, [options])

  • jsonp(url, [options])

  • post(url, [body], [options])

  • put(url, [body], [options])

  • patch(url, [body], [options])


options 参数列表

参数
类型 描述
url
string 请求的 URL 地址
body Object, FormData, string 请求体
headers Object HTTP请求头部
params Object

URL参数,默认值为{}

Vue.http({

 url:'http://example.com/{book}',

 params:{

  book:'vue',

  cat:'1'

 }

})

最终URL为 http://example.com/vue?cat=1

method
string 请求的HTTP方法(GET、POST等),默认GET
timeout number 请求超时时间,默认值为0,单位是ms,0表示没有超时限制,超时后将会取消当前请求
before
function(request) 请求发送前的处理函数。默认值为null,接受请求选项对象作为参数
progress function(event) 处理ProgressEvent的回调函数
credentials boolean
表示跨域请求时是否需要使用凭证
emulateHTTP boolean 默认值为false,当值为true时,用HTTP的POST方法发送PUT、PATCH、DELETE等请求,并设置请求头字段 HTTP-Method-Override为原始请求方法
emulateJSON boolean 默认值为false,当值为true并且data为对象时,设置请求头Content-Type的值为 application/x-www-form-urlencoded
xhr Object 默认值为null,该对象中的属性都会应用到原生xhr实例对象上
upload Object 默认值为null,该对象的属性都会应用到原生xhr实例对象的upload属性上
jsonp string

默认值为callback,JSONP请求中回调函数的名

Vue.http({

 url:'http://example.com/book',

 method:'JSONP',

 jsonp:'cb'

})

crossOrigin Object 默认值为null,表示是否跨域,如果没有设置该属性,vue-resource 内部会判断浏览器当前 URL 和请求 URL 是否跨域


示例代码:

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < meta  http-equiv = "X-UA-Compatible"  content = "IE=edge" >
     < meta  name = "viewport"  content = "width=device-width, initial-scale=1" >
     < link  href = "//cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.css"  rel = "stylesheet" >
     < title ></ title >
</ head >
< body >
< div  id = "app" >
     < input  class = "btn btn-success"  type = "button"  value = "按钮"  @ click = "get()" >
</ div >
 
< script  src = "//cdn.bootcss.com/vue/2.0.8/vue.js" ></ script >
< script  src = "//cdn.bootcss.com/vue-resource/0.7.2/vue-resource.js" ></ script >
< script >
     new Vue({
         el:'#app',
         data:{
 
         },
         methods:{
             get:function(){
                 this.$http.post('post.php',{
                     a:1,
                     b:20
                 },{
                     emulateJSON:true
                 }).then(
                         function(response){ //成功的回调函数
                             alert(response.data);
                         },
                         function(response){ //失败的回调函数
                             alert(response.status);
                         }
                 )
             }
         }
     });
</ script >
</ body >
</ html >


PHP代码:

1
2
3
4
5
<?php
$a = $_POST [ 'a' ];
$b = $_POST [ 'b' ];
echo  $a - $b ;
?>


把 emulateJSON的值改为 true,运行代码

wKiom1hBNY3gBYBsAAA7HuRq_hA372.png

把 emulateJSON的值改为默认值false 或者去掉“{emulateJSON:true}”,运行代码,报错了

wKiom1hBNfqjem8rAABmX-SFnOQ386.png



5、response 对象

response 对象包含服务端返回的数据,以及 HTTP 响应状态、响应头等信息。

属性
类型 描述
url
string 响应的 URL
body Object, Blob, string 响应体数据
headers Header 响应头对象
ok boolean HTTP 状态码(200-299之间)
status number HTTP 响应状态码
statusText string HTTP 响应文本
data Object,string 服务器端返回的数据,已使用JSON.parse解析
方法 类型 描述
text( ) Promise 把响应数据解析为字符串
json( ) Promise 把响应数据解析为JSON对象
blob( ) Promise 把响应数据解析为二进制对象


示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{   // POST /someUrl
   this .$http.post( '/someUrl' , {foo:  'bar' }).then((response) => {    
     // get status
     response.status;    
     // get status text
     response.statusText;    
     // get 'Expires' header
     response.headers.get( 'Expires' );    
     // set data on vm
     this .$set( 'someData' , response.body);
 
   }, (response) => {    
   // error callback
   });
}


从响应对象中获得一个 image并使用blob() 方法提取image的数据内容

1
2
3
4
5
6
7
8
9
10
11
{
     // GET /image.jpg
     this .$http.get( '/image.jpg' ).then((response) => {