vue-resource的應用

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

簡介

vue-resource是vue中的一個插件仁连。如果使用過vue的其他組件應用者會比較更容易理解vue-resource在vue中所處的狀態(tài)蓝角。
簡單的來說vue-resource它類似于jquery中的ajax。這個插件是vue.js對于web中利用XMLHttpRequest或JSONP提供請求和響應數(shù)據(jù)的一個服務饭冬。
下面簡單的來了解一下vue-resource的相關功能和具體應用使鹅。
相關功能
vue-resource
主要特點
支持Promise API 和 URI Templates
支持攔截器在發(fā)送請求時或者在請求響應時
體積小完整大小約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中

參數(shù)	類型	描述
url	string	請求的url
method	string	module.exports = abc.def;
body	Object Fromquery string	request body
params	Object	請求的URL參數(shù)對象
headers	Object	request header
timeout	number	單位為毫秒的請求超時時間（0表示無超時時間）
before	function(request)	請求發(fā)送前的處理函數(shù)劝评，類似于jQuery的beforeSend函數(shù)
progress	function(event)	ProgressEvent回調(diào)處理函數(shù)
credientials	boolean	表示跨域請求時是否需要使用憑證
emulateHTTP	boolean	發(fā)送PUT,PATCH,DELETE請求時以http的post方式
emulateJSON	boolean	將request body以application/x-www-form-urlencoded content type發(fā)送

方法	類型	描述
text()	string	以string形式返回response body
json()	Object	以JSON對象形式返回response body
blob()	Blob	以二進制形式返回response body
ok	boolean	響應的HTTP 狀態(tài)碼在200-299之間時科展，該屬性為true
status	number	響應的HTTP狀態(tài)嗎
statusText	string	響應的狀態(tài)文本
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)                
                })        
            } 
        },
        //參數(shù)用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)                
                })        
            } 
        },
        //參數(shù)用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
攔截器可以在請求發(fā)送前和發(fā)送請求后做一些處理
基礎用法

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

注意：攔截器是作為一個全局的請求檢測攔截，是每個請求請求發(fā)送前和結束后都會進行處理糠雨，并不是為某一特定的請求所有的才睹，是所有請求共用的，不過要為不同的請求處理不同的攔截邏輯甘邀，可以根據(jù)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的應用

vue-resource的應用