vue-resource的應(yīng)用

最近在了解資源的相關(guān)加載方式，主要是基于http協(xié)議下的資源請(qǐng)求，之前由于用了vue作為前端頁面的一個(gè)框架，但是處理請(qǐng)求的數(shù)據(jù)為了較為便捷，還一直停留在jquery中的ajax等方法，在了解vue-resource后，打算采用vue的相關(guān)插件，（本來是想自己寫原生的ajax來處理的，由于個(gè)人一個(gè)字懶），不小心找到了vue-resource,發(fā)現(xiàn)處理方式挺全面的。所以O(shè)(∩_∩)O哈哈~
為了能引入到自己的項(xiàng)目中，就先了解了一下，寫在這里望大家參考，并且指正。

簡介

vue-resource是vue中的一個(gè)插件。如果使用過vue的其他組件應(yīng)用者會(huì)比較更容易理解vue-resource在vue中所處的狀態(tài)。
簡單的來說vue-resource它類似于jquery中的ajax。這個(gè)插件是vue.js對(duì)于web中利用XMLHttpRequest或JSONP提供請(qǐng)求和響應(yīng)數(shù)據(jù)的一個(gè)服務(wù)。
下面簡單的來了解一下vue-resource的相關(guān)功能和具體應(yīng)用。
相關(guān)功能
vue-resource
主要特點(diǎn)
支持Promise API 和 URI Templates
支持?jǐn)r截器在發(fā)送請(qǐng)求時(shí)或者在請(qǐng)求響應(yīng)時(shí)
體積小完整大小約14kb(壓縮后大小5.3kb)
對(duì)瀏覽器的支持程度和vue.js保持一致，支持最新的firefox, safari,Opera 和IE9以上版本

引入方法

這里簡單的說說明一下自己所了解的兩種應(yīng)用方式

一（直接應(yīng)用vue-resource.js）

<script src="vue.js"></script>  //當(dāng)然在引入vue-resource之前應(yīng)先引入vue.js
<script src="vue-resource.js"></script>

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

當(dāng)然在該配置下需要安裝nodejs,npm管理包，同時(shí)配置相關(guān)的模塊，要引用vue-resource就要在npm管理包中安裝，安裝命令

npm install vue-resource

在相關(guān)配置安裝好后就可以引入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中

相關(guān)方法和屬性

vue-resource的請(qǐng)求支持API時(shí)候按照REST風(fēng)格設(shè)計(jì)的，他提供了7種請(qǐng)求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外其他的方法名稱都是標(biāo)準(zhǔn)的http方法，當(dāng)服務(wù)使用rest API

options對(duì)象

emulateHTTP的作用
如果web服務(wù)器無法處理PUT,PATCH和DELETE這種REST風(fēng)格的請(qǐng)求，你可以開啟用enulateHTTP選項(xiàng)后，請(qǐng)求會(huì)以普通的POST方法發(fā)出，并且HTTP頭信息的x-HTTP-Method-Override屬性會(huì)設(shè)置為實(shí)際的HTTP方法。

emulateJSON的作用
如果web服務(wù)無法處理編碼為application/json的請(qǐng)求，你可以啟用emulateJSON選項(xiàng)。啟用該選項(xiàng)后，請(qǐng)求會(huì)以application/x-www-form-urlencoded作為MIME type,就像普通的HTML表單一樣。respones對(duì)象包含以下屬性

相關(guān)應(yīng)用案例

常見的get和post實(shí)例

//get實(shí)例
var vm= new Vue({
    el:"#app",
    data:function(){
        return {
            url:"url",
            getdata:"",
        }
    },
    ready:function(){
        this.getdatamethod();
    },
    methods:{
        //普通方式請(qǐng)求
        getdatamethod:function(){
            this.$http.get(this.url)                
            .then((response) => {                    
                this.getdata=response.data                
                }).catch(function(response) {                    
                    console.log(response)                
                })        
            } 
        },
        //參數(shù)用json的形式請(qǐng)求
        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:{
        //普通方式請(qǐng)求
        postdatamethod:function(){
            this.$http.post(this.url)                
            .then((response) => {                    
                this.getdata=response.data                
                }).catch(function(response) {                    
                    console.log(response)                
                })        
            } 
        },
        //參數(shù)用json的形式請(qǐng)求
        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
攔截器可以在請(qǐng)求發(fā)送前和發(fā)送請(qǐng)求后做一些處理
基礎(chǔ)用法

Vue.http.interceptors.push(function(request, next) {
    
    // 請(qǐng)求發(fā)送前的處理邏輯
    
    next(function(response) {
        // 請(qǐng)求發(fā)送后的處理邏輯
        
        return response
    })
})

注意：攔截器是作為一個(gè)全局的請(qǐng)求檢測攔截，是每個(gè)請(qǐng)求請(qǐng)求發(fā)送前和結(jié)束后都會(huì)進(jìn)行處理，并不是為某一特定的請(qǐng)求所有的，是所有請(qǐng)求共用的，不過要為不同的請(qǐng)求處理不同的攔截邏輯，可以根據(jù)request所帶信息進(jìn)行相應(yīng)的判斷，然后處理。
同樣在請(qǐng)求之后可以采用response返回的信息進(jìn)行判斷處理。

//eg:
Vue.http.interceptors.push(function(request, next) {
    if(request.url=="1111"&&request.method=="POST"){
        console.log(0000)//處理符合該請(qǐng)求的攔截器
    }else{
        console.log(11111)//處理不符合該請(qǐng)求的攔截器邏輯
    }
    next(function(response) {
        if(response.url=="1111"){
            console.log(2222)//在符合該請(qǐng)求之后處理
        }else{
            console.log(3333)//處理不符合該請(qǐng)求之后的處理
        }
        return response
    })
})

更多參考

（http://www.itdecent.cn/p/17008a549f55）之前了解的有關(guān)webpack+vue構(gòu)建頁面
（http://www.bootcdn.cn/vue-resource/）有關(guān)vue-resource.js的版本
（https://github.com/pagekit/vue-resource/）github上其內(nèi)容簡介