// 基于全局Vue對象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);

// 在一個Vue實例內(nèi)使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

示例

//不帶參數(shù)的get請求
this.$http.get('/someUrl').then(function(res){
    console.log('請求成功處理');   
},function(res){
    console.log('請求失敗處理');
});

//需要傳遞數(shù)據(jù)的get請求
this.$http.get('/someUrl',{param:jsonData}).then(function(res){
    console.log('請求成功處理');   
},function(res){
    console.log('請求失敗處理');
});

//ES6的Lambda寫法
this.$http.get('/someUrl', [options]).then((response) => {
	console.log('請求成功處理');
}, (response) => {
	console.log('請求失敗處理');
});

2.POST請求

post 發(fā)送數(shù)據(jù)到后端，需要第三個參數(shù) {emulateJSON:true}。

emulateJSON 的作用：如果Web服務器無法處理編碼為 application/json 的請求，你可以啟用 emulateJSON 選項。啟用該選項后，請求會以application/x-www-form-urlencoded作為MIME type，就像普通的HTML表單一樣。

// 基于全局Vue對象使用http
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一個Vue實例內(nèi)使用$http
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

示例

this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鳥教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
    	document.write(res.body);    
	},function(res){
     	console.log(res.status);
	});

二、使用Vue.resource/this.$resource

vue-resource提供了另外一種方式訪問HTTP——resource服務，resource服務包含以下幾種默認的action：

get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}

訪問resource對象的兩種方式：

//全局訪問
Vue.resource
//實例訪問
this.$resource

GET請求

//使用一個局部變量來接受this
var vm = this;
this.$resource('apiUrl').get().then((response) => {
	console.log("調(diào)用成功");
	})
	.catch(function(response) {
	console.log("調(diào)用失敗");
	})
}

POST請求

使用save方法發(fā)送POST請求

//使用一個局部變量來接受this
var vm = this;
this.$resource('apiUrl').save('apiUrl',Target).then((response) => {
	console.log("調(diào)用成功");
	})
	.catch(function(response) {
	console.log("調(diào)用失敗");
	})
}

inteceptor – 在請求前和請求后附加行為

攔截器可以在請求發(fā)送前和發(fā)送請求后做一些處理

來自keepfool文章

用法

//Lambda函數(shù)寫法
Vue.http.interceptors.push((request, next) => {
		// ...
		// 請求發(fā)送前的處理邏輯
		// ...
	next((response) => {
		// ...
		// 請求發(fā)送后的處理邏輯
		// ...
		// 根據(jù)請求的狀態(tài)，response參數(shù)會返回給successCallback或errorCallback
		return response
	})
})
//普通寫法
Vue.http.interceptors.push(function(request, next) {
	// ...
	// 請求發(fā)送前的處理邏輯
	// ...
	next(function(response) {
		// ...
		// 請求發(fā)送后的處理邏輯
		// ...
		// 根據(jù)請求的狀態(tài)，response參數(shù)會返回給successCallback或errorCallback
		return response
	})
})

實例 – 為所有的請求處理加一個loading

請求發(fā)送前顯示loading，接收響應后隱藏loading或顯示指定的loading信息；

添加loading.vue組件

<template id="loading-template">
	<div class="loading-overlay">
		<div class="sk-three-bounce">
			<div class="sk-child sk-bounce1"></div>
			<div class="sk-child sk-bounce2"></div>
			<div class="sk-child sk-bounce3"></div>
		</div>
	</div>
</template>

在父組件中引入loading組件

<template>
	<div class="father">
		//loading 發(fā)起請求時顯示
		<loading v-show="showLoading"</loading>
		//modal-dialog 請求失敗時顯示
		<modal-dialog :show="showDialog">
		<header class="dialog-header" slot="header">
			<h1 class="dialog-title">Server Error</h1>
		</header>
		<div class="dialog-body" slot="body">
			<p class="error">Oops,server has got some errors, error code: {{errorCode}}.</p>
		</div>
	</modal-dialog>
	</div>
</template>

在父組件中添加inteceptor

data: {
		showLoading: false,
		showDialog: false,
		errorCode: ''
},
//在生命周期中添加inteceptor
Vue.http.interceptors.push((request, next) => {
	help.showLoading = true
	next((response) => {
		if(!response.ok){
			help.errorCode = response.status
			help.showDialog = true
		}
		help.showLoading = false
		return response
	});
});

拓展

vue-resource 提供了 7 種請求 API(REST 風格)：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

除了 jsonp 以外，另外 6 種的 API 名稱是標準的 HTTP 方法。其中，options參數(shù)說明如下：

菜鳥教程