vue-resource中文文檔
Vue可以構建一個不完全依賴后端服務的應用，同時可以與服務端進行數據交互來同步界面的動態(tài)更新。
Vue通過XMLHttpRequrest或JSONP技術實現異步加載服務端數據的Vue插件
提供了一版的HTTP請求接口和RESTful框架請求接口(RESTful框架詳解：https://www.runoob.com/w3cnote/restful-architecture.html)，并提供全局方法和Vue組件實例方法盖彭。
文章講解使用vue-resource 0.7.2
配置
參數配置
分為：
1.全局配置
2.組件實例配置
3.調用配置
這三部分的優(yōu)化依次增高芍耘，優(yōu)先級高的配置會覆蓋優(yōu)先級低的配置舌菜。
全局配置
vue.http.options.root = '/root';
全局配置option屬性
組件實例配置
? ? 在實例化組件時可以傳入http選項進行配置
new Vue({
? ? ? ? http:? {
? ? ? ? ? ? ? ? root: '/root'
? ? ? ? ? ? ? ? headers: {
? ? ? ? ? ? ? ? ? ? ? ? Authorization: ''
????????????????}
????????}
})? ?
方法調時配置
? ? 在調用vue-resource請求方法時傳入選項對象舷嗡。
new Vue({
? ? ready: {
? ? ? ? // get請求
? ? ? ? this.$http.get({
? ? ? ? ? ? url: '',
? ? ? ? ? ? headers: {
? ??????????????Authorization: ''
????????????}
????????}).then(() => {
? ? ? ? ? ? // 請求成功回調
????????}, () => {
? ? ? ? ? ? // 請求失敗回調
????????})
????}
})
headers配置
通過headers屬性來配置請求頭毁腿。
除了參數配置headers屬性可以設置請求外，在vue-resource中也提供了全局默認的headers配置
? ? Vue.http.headers鍵值可以是HTTP方法名段只，common腮猖，custom這三種類型的配置會進行合并，優(yōu)先級依次是common>custom>HTTP方法名赞枕。
其中common對應的請求頭會在所有請求中設置澈缺，custom對應的請求頭在費跨域時設置坪创，HTTP方法名對應的請求頭只在請求的method匹配方法名時才會被設置。
基本HTTP調用
????基本HTTP調用就是普通的GET,POST等基本HTTP操作姐赡，實際上執(zhí)行增刪改查是前后端開發(fā)人員共同約定的并非通過HTTP請求方法如GET表示獲取數據莱预，PUT代表寫入數據，POST代表更新數據项滑。
? ? 底層方法和便捷方法執(zhí)行后返回一個Promise對象依沮，可以使用Promise語法來注冊成功，失敗回調枪狂。
底層方法
全局的Vue.http方法和Vue組件的實例方法this.$http都屬于底層方法危喉，他們根據所傳入option參數的method屬性來判斷請求方法的GET還是POST，亦或是其它HTTP的合法請求州疾。
全局調用
Vue.http(option);
組件實例調用??
Vue.$http(option)
? ? 全局調用和組件實例調用都是接收相同的option參數辜限。都返回Promise對象。不同的是严蓖，全局方式回調this指向window,而組件實例調用方式回調指向組件實例薄嫡。
? ? 組件實例方式發(fā)送POST請求
new Vue({
? ? ready: function（）{
? ? ? ? // post請求
? ? ? ? this.$http({
? ? ? ? ? ? url: '',
? ? ? ? ? ? method: 'post',
? ? ? ? ? ? // 請求體發(fā)送的數據
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? cat: 1
????????????},
? ? ? ? ? ? // 設置請求頭
? ? ? ? ? ? headers: {
? ??????????????'Content-Type': 'x-www-from-urlencoded'
????????????}
????????}).then(() => {
? ? ? ? ? ? // 請求成功調用
? ? ? ? }, () => {
? ? ? ? ? ? // 請求失敗調用
????????})
????}
})
便捷方法
? ? 不同于底層方法 ，便捷方法時對底層方法的封裝颗胡，在調用是可以省去配置選項option中的method屬性毫深。
? ? ? ? get(url, [data], [option]);? ?
? ? ? ? post(url, [data], [option]);? ?
? ? ? ? put(url, [data], [option]);? ?
? ? ? ? patch(url, [data], [option]);? ?
? ? ? ? delete(url, [data], [option]);? ?
? ? ? ? jsonp(url, [data], [option]);? ?
都接受三個參數：
? ? url（字符串），請求地址毒姨⊙颇瑁可悲options對象中url屬性覆蓋。
data（可選手素，字符串或對象）鸳址，要發(fā)送的數據瘩蚪，可被options對象中的data屬性覆蓋泉懦。
options
便捷方法的POST請求
? ? ? ? this.$http.post({
????????????'http://example.com',
? ? ? ? ? ? // 請求體發(fā)送數據給服務端
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: 'Marting',
? ? ? ? ? ? ? ? age: 28
????????????}, {
? ??????????????headers: {
? ??????????????????'Content-Type':'x-www-form-urlencoded'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
????????}).then(() => {
????????????// 請求成功回調
????????}, () => {
????????????// 請求失敗回調
????????})
請求選項對象
option對象的各屬性以及含義
