vue-resource是【Vue.js】的一款插件，它可以通過XMLHttpRequest或JSONP發(fā)起請求并處理響應，也就是說，【$.ajax】能做的事情，【vue-resource】插件一樣也能做到。

本教程操作環(huán)境：windows7系統(tǒng)、Vue2.9.6版、thinkpad t480電腦。

vue-resource特點

vue-resource插件具有以下特點：

1. 體積小

立即學習“前端免費學習筆記（深入）”；

vue-resource非常小巧，在壓縮以后只有大約12KB，服務端啟用gzip壓縮后只有4.5KB大小，這遠比jQuery的體積要小得多。

2. 支持主流的瀏覽器

和Vue.js一樣，vue-resource除了不支持IE 9以下的瀏覽器，其他主流的瀏覽器都支持。

3. 支持Promise API和URI Templates

Promise是ES6的特性，Promise的中文含義為“先知”，Promise對象用于異步計算。

URI Templates表示URI模板，有些類似于ASP.NET MVC的路由模板。

4. 支持攔截器

Layx是一款網(wǎng)頁彈窗Javript插件

Layx 是一款網(wǎng)頁彈窗Javript插件，她將助力于互聯(lián)網(wǎng)Web開發(fā)，提供優(yōu)質的彈窗體驗

32

查看詳情

攔截器是全局的，攔截器可以在請求發(fā)送前和發(fā)送請求后做一些處理。

攔截器在一些場景下會非常有用，比如請求發(fā)送前在headers中設置access_token，或者在請求失敗時，提供共通的處理方式。

vue-resource使用

引入vue-resource#

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

基本語法#

引入vue-resource后，可以基于全局的Vue對象使用http，也可以基于某個Vue實例使用http。

// 基于全局Vue對象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一個Vue實例內(nèi)使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在發(fā)送請求后，使用then方法來處理響應結果，then方法有兩個參數(shù)，第一個參數(shù)是響應成功時的回調(diào)函數(shù)，第二個參數(shù)是響應失敗時的回調(diào)函數(shù)。

then方法的回調(diào)函數(shù)也有兩種寫法，第一種是傳統(tǒng)的函數(shù)寫法，第二種是更為簡潔的ES 6的Lambda寫法：

// 傳統(tǒng)寫法
this.$http.get('/someUrl', [options]).then(function(response){
// 響應成功回調(diào)
}, function(response){
// 響應錯誤回調(diào)
});
// Lambda寫法
this.$http.get('/someUrl', [options]).then((response) => {
// 響應成功回調(diào)
}, (response) => {
// 響應錯誤回調(diào)
});

相關免費學習推薦：javascript（視頻）

以上就是vue.resource是什么的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！