Vue-Resource是一個(gè)基于Vue.js的HTTP庫(kù)。它能夠極大地簡(jiǎn)化發(fā)送HTTP請(qǐng)求的過(guò)程，支持?jǐn)r截器、請(qǐng)求取消、全局配置等功能。

使用Vue-Resource，我們可以輕松地發(fā)送各種HTTP請(qǐng)求，包括GET、POST、PUT、DELETE等，同時(shí)也可以設(shè)置請(qǐng)求頭、請(qǐng)求體、超時(shí)時(shí)間等。

// 安裝Vue-Resource
npm install vue-resource
// 引入Vue-Resource
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
// 發(fā)送GET請(qǐng)求
this.$http.get('/user').then(response =>{
console.log(response.body)
}, error =>{
console.log(error)
})
// 發(fā)送POST請(qǐng)求
this.$http.post('/user', {name: 'admin', password: '123456'}).then(response =>{
console.log(response.body)
}, error =>{
console.log(error)
})

Vue-Resource還支持?jǐn)r截器，我們可以通過(guò)設(shè)置before、after、success、error等方法來(lái)實(shí)現(xiàn)對(duì)請(qǐng)求和響應(yīng)的攔截。

// 請(qǐng)求攔截器
this.$http.interceptors.request.use(config =>{
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
return config
})
// 響應(yīng)攔截器
this.$http.interceptors.response.use(response =>{
if (response.status === 401) {
this.$router.push('/login')
}
return response
}, error =>{
if (error.status === 401) {
this.$router.push('/login')
}
return Promise.reject(error)
})

另外，Vue-Resource還支持取消請(qǐng)求的功能，我們可以利用Promise.race方法來(lái)實(shí)現(xiàn)。

// 取消請(qǐng)求
let cancelToken = new this.$http.CancelToken()
let request = this.$http.get('/user', {cancelToken})
Promise.race([
request,
new Promise((resolve, reject) =>{
setTimeout(() =>{
cancelToken.cancel()
reject(new Error('請(qǐng)求超時(shí)'))
}, 5000)
})
]).then(response =>{
console.log(response.body)
}, error =>{
if (this.$http.isCancel(error)) {
console.log('請(qǐng)求已取消：', error.message)
} else {
console.log(error)
}
})

最后，我們可以全局配置Vue-Resource，例如設(shè)置請(qǐng)求超時(shí)時(shí)間、根路徑等。

// 全局配置
Vue.http.options.root = 'https://example.com/api'
Vue.http.options.timeout = 5000

總的來(lái)說(shuō)，Vue-Resource是一個(gè)非常方便易用的HTTP庫(kù)，可以極大地幫助我們簡(jiǎn)化發(fā)送HTTP請(qǐng)求的過(guò)程。