vue-resource的应用

vue-resource的应用

简介

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])

options对象

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

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

相关应用案例

常见的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
    })
})

更多参考