vue-resource是Vue.js官方的HTTP客戶端,提供了很多便捷的API讓我們更加方便地進(jìn)行HTTP請(qǐng)求和響應(yīng)處理。而在Vue 2.0版本之后,vue-resource被官方標(biāo)記為“已廢棄”的狀態(tài),官方更推薦大家使用更加靈活和輕量的axios庫進(jìn)行HTTP請(qǐng)求。但是在一些已有代碼和小項(xiàng)目中,我們?nèi)匀豢梢岳^續(xù)使用vue-resource。
首先我們需要在項(xiàng)目中安裝vue-resource。使用npm或yarn進(jìn)行安裝即可:
npm install vue-resource --save
或者:
yarn add vue-resource
在Vue 2.0中使用vue-resource時(shí),需要將其注冊(cè)為Vue的插件:
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
在注冊(cè)完畢之后,我們就可以使用vue-resource中提供的API。比如,我們可以使用$http來進(jìn)行GET請(qǐng)求:
this.$http.get('/api/someurl').then(response =>{
// 處理響應(yīng)結(jié)果
}, error =>{
// 處理請(qǐng)求出錯(cuò)情況
})
類似的,還可以使用$http進(jìn)行POST請(qǐng)求:
this.$http.post('/api/someurl', { data: 'data' }).then(response =>{
// 處理響應(yīng)結(jié)果
}, error =>{
// 處理請(qǐng)求出錯(cuò)情況
})
最后需要注意的是,在使用vue-resource時(shí),需要在請(qǐng)求頭中設(shè)置Content-Type為application/x-www-form-urlencoded格式,才能正確地傳遞POST請(qǐng)求的數(shù)據(jù)。例如:
this.$http.post('/api/someurl', { data: 'data' }, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(response =>{
// 處理響應(yīng)結(jié)果
}, error =>{
// 處理請(qǐng)求出錯(cuò)情況
})