vue-resource使用簡介

什么是vue-resource？

vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發起請求並處理響應，也就是說，jQuery中ajax能做的事情，vue-resource插件一樣也能做到，而且vue-resource的API更為簡潔。此外，vue-resource還提供了非常有用的inteceptor功能，使用inteceptor可以在請求前和請求后附加一些行為，比如使用inteceptor在ajax請求時顯示loading界面。

vue-resource是不是已經不那么陌生了，接下來我們就來看看vue-resouce的具體使用方法：

// 因為vue-resource依賴於vue.js，所以要先引入vue.js
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

引入插件以后，我們再來看看它怎么使用：

// 全局引用
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 基於某個Vue實例使用
var vm = new Vue();
vm.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
vm.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

可以看到，在發出請求以后，會有一個then對callback進行處理，看到then我們就會想到ES6里面的promise函數，這里確實是在promise的基礎上進行封裝的。為了方便，我們可以在回調函數中使用箭

頭函數，示例如下：

Vue.http.get('/someUrl', [options]).then((response) => {
  // 成功回調函數
}).catch((error) => {
   // 錯誤回調函數，會在整個請求過程中監聽錯誤
})

vue-resource總共提供了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])

值得注意的是API中的options屬性，發送請求時的options選項對象包含以下屬性：

參數	類型	描述
url	string	請求的URL
method	string	請求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body	Object, FormData string	request body
params	Object	請求的URL參數對象
headers	Object	request header
timeout	number	單位為毫秒的請求超時時間 (0 表示無超時時間)
before	function(request)	請求發送前的處理函數，類似於jQuery的beforeSend函數
progress	function(event)	ProgressEvent回調處理函數
credentials	boolean	表示跨域請求時是否需要使用憑證
emulateHTTP	boolean	發送PUT, PATCH, DELETE請求時以HTTP POST的方式發送，並設置請求頭的X-HTTP-Method-Override
emulateJSON	boolean	將request body以application/x-www-form-urlencoded content type發送（表單形式發送）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

response對象包含以下屬性：

方法	類型	描述
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	響應頭