vue-resource的应用

2017-05-18 本文已影响279人小a草

vue-resource的应用

最近在了解资源的相关加载方式，主要是基于http协议下的资源请求，之前由于用了vue作为前端页面的一个框架，但是处理请求的数据为了较为便捷，还一直停留在jquery中的ajax等方法，在了解vue-resource后，打算采用vue的相关插件，（本来是想自己写原生的ajax来处理的，由于个人一个字懒），不小心找到了vue-resource,发现处理方式挺全面的。所以O(∩_∩)O哈哈~
为了能引入到自己的项目中，就先了解了一下，写在这里望大家参考，并且指正。

简介

vue-resource是vue中的一个插件。如果使用过vue的其他组件应用者会比较更容易理解vue-resource在vue中所处的状态。
简单的来说vue-resource它类似于jquery中的ajax。这个插件是vue.js对于web中利用XMLHttpRequest或JSONP提供请求和响应数据的一个服务。
下面简单的来了解一下vue-resource的相关功能和具体应用。
相关功能
vue-resource
主要特点
支持Promise API 和 URI Templates
支持拦截器在发送请求时或者在请求响应时
体积小完整大小约14kb(压缩后大小5.3kb)
对浏览器的支持程度和vue.js保持一致，支持最新的firefox, safari,Opera 和IE9以上版本

引入方法

这里简单的说说明一下自己所了解的两种应用方式

一（直接应用vue-resource.js）

<script src="vue.js"></script>  //当然在引入vue-resource之前应先引入vue.js
<script src="vue-resource.js"></script>

二（在webpack+vue-router+vue-resource）

当然在该配置下需要安装nodejs,npm管理包，同时配置相关的模块，要引用vue-resource就要在npm管理包中安装，安装命令

npm install vue-resource

在相关配置安装好后就可以引入vue-resource，vue-router具体引入代码

const Vue = require('vue');
const VueRouter = require('vue-router');//引入vue-outer
const VueResource = require('vue-resource');//引入vue-resource

Vue.use(VueRouter);//将vue-router插件用在vue中
Vue.use(VueResource);//vue-resource插件用在vue中

相关方法和属性

vue-resource的请求支持API时候按照REST风格设计的，他提供了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])

除jsonp外其他的方法名称都是标准的http方法，当服务使用rest API

options对象

参数	类型	描述
url	string	请求的url
method	string	module.exports = abc.def;
body	Object Fromquery string	request body
params	Object	请求的URL参数对象
headers	Object	request header
timeout	number	单位为毫秒的请求超时时间（0表示无超时时间）
before	function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	function(event)	ProgressEvent回调处理函数
credientials	boolean	表示跨域请求时是否需要使用凭证
emulateHTTP	boolean	发送PUT,PATCH,DELETE请求时以http的post方式
emulateJSON	boolean	将request body以application/x-www-form-urlencoded content type发送

emulateHTTP的作用
如果web服务器无法处理PUT,PATCH和DELETE这种REST风格的请求，你可以开启用enulateHTTP选项后，请求会以普通的POST方法发出，并且HTTP头信息的x-HTTP-Method-Override属性会设置为实际的HTTP方法。

emulateJSON的作用
如果web服务无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type,就像普通的HTML表单一样。respones对象包含以下属性

方法	类型	描述
text()	string	以string形式返回response body
json()	Object	以JSON对象形式返回response body
blob()	Blob	以二进制形式返回response body
ok	boolean	响应的HTTP 状态码在200-299之间时，该属性为true
status	number	响应的HTTP状态吗
statusText	string	响应的状态文本
headers	Object	响应头

相关应用案例

常见的get和post实例

//get实例
var vm= new Vue({
    el:"#app",
    data:function(){
        return {
            url:"url",
            getdata:"",
        }
    },
    ready:function(){
        this.getdatamethod();
    },
    methods:{
        //普通方式请求
        getdatamethod:function(){
            this.$http.get(this.url)                
            .then((response) => {                    
                this.getdata=response.data                
                }).catch(function(response) {                    
                    console.log(response)                
                })        
            } 
        },
        //参数用json的形式请求
        getdatamethodjson:function(){
            var item={id:1,title:111};
            this.$http.get(this.url,{params:item},{emulateJSON:true})                
            .then((response) => {                    
                this.getdata=response.data                
                }).catch(function(response) {                    
                    console.log(response)                
                })        
            } 
        },
    }
})

post

//用post的形式
var vm= new Vue({
    el:"#app",
    data:function(){
        return {
            url:"url",
            getdata:"",
        }
    },
    ready:function(){
        this.postdatamethod();
    },
    methods:{
        //普通方式请求
        postdatamethod:function(){
            this.$http.post(this.url)                
            .then((response) => {                    
                this.getdata=response.data                
                }).catch(function(response) {                    
                    console.log(response)                
                })        
            } 
        },
        //参数用json的形式请求
        postdatamethodjson:function(){
            var item={id:1,title:111};
            this.$http.post(this.url,item,{emulateJSON:true})                
            .then((response) => {                    
                this.getdata=response.data                
                }).catch(function(response) {                    
                    console.log(response)                
                })        
            } 
        },
    }
})

使用inteceptor
拦截器可以在请求发送前和发送请求后做一些处理
基础用法

Vue.http.interceptors.push(function(request, next) {
    
    // 请求发送前的处理逻辑
    
    next(function(response) {
        // 请求发送后的处理逻辑
        
        return response
    })
})

注意：拦截器是作为一个全局的请求检测拦截，是每个请求请求发送前和结束后都会进行处理，并不是为某一特定的请求所有的，是所有请求共用的，不过要为不同的请求处理不同的拦截逻辑，可以根据request所带信息进行相应的判断，然后处理。
同样在请求之后可以采用response返回的信息进行判断处理。

//eg:
Vue.http.interceptors.push(function(request, next) {
    if(request.url=="1111"&&request.method=="POST"){
        console.log(0000)//处理符合该请求的拦截器
    }else{
        console.log(11111)//处理不符合该请求的拦截器逻辑
    }
    next(function(response) {
        if(response.url=="1111"){
            console.log(2222)//在符合该请求之后处理
        }else{
            console.log(3333)//处理不符合该请求之后的处理
        }
        return response
    })
})

vue-resource的应用