Vue-resource是Vue.js提供的一個插件，使得我們可以更加方便地處理HTTP請求。它基于XMLHttpRequest實現，是一個簡單、靈活、可擴展的HTTP客戶端。本文將對vue-resource的使用進行詳細介紹。

安裝

npm install vue-resource --save

使用

import Vue from 'vue' 
import VueResource from 'vue-resource' 
Vue.use(VueResource)

API

所有Vue實例都會繼承VueResource。可以在Vue實例上訪問$http屬性。

// get 
this.$http.get(url, [options]) 
.then(response =>{ ... }) 
.catch(error =>{ ... }) 
// post 
this.$http.post(url, [body], [options]) 
.then(response =>{ ... }) 
.catch(error =>{ ... }) 
// delete 
this.$http.delete(url, [options]) 
.then(response =>{ ... }) 
.catch(error =>{ ... }) 
// put 
this.$http.put(url, [body], [options]) 
.then(response =>{ ... }) 
.catch(error =>{ ... })

設置默認選項

Vue.http.options.root = 'http://localhost:8080' 
Vue.http.options.emulateJSON = true

攔截器

VueResource還提供了攔截器，可以在請求或響應前對其進行攔截和修改。

Vue.http.interceptors.push((request, next) =>{ 
// ...
// modify request
// ...
next((response) =>{ 
// ...
// modify response 
// ...
return response 
}) 
})

取消請求

let request = Vue.http.get('/some/url') 
// Abort the request if necessary 
request.abort()

總結

VueResource是一個非常方便的HTTP請求處理插件。可以輕松實現各種HTTP方法請求以及攔截器、請求取消等高級功能，實現前后端的數據交互。