1. 程式人生 > >用vue構建專案筆記6(在vue中使用vue resource)

用vue構建專案筆記6(在vue中使用vue resource)

jquery用的是$.ajax。我們在vue專案中保持程式碼儘量精簡而不引入jq的話,官方推薦vue resource.

使用vue resource有一個優勢,就是this指向不會改變,即在呼叫完成之後直接寫this就能呼叫到vue資料和方法,而如果寫ajax,this指向變化,不得不在ajax之前先定義this指向另一個容器。

下面是一點使用vue resource的過程

1.安裝 cnpm install vue-resource --save-dev

2、引入 找到main.js檔案

import VueResource from 'vue-resource'
Vue.use(VueResource);
然後就可以在程式碼中愉快的呼叫了。

3、使用

this.$http.post(this.jsCtx+'aae',{
	id:id,
	state:state
},{emulateJSON:true}).then(function(response){
	if(response.data.result==0){
	   }else{
	   alert(response.data.msg)
	}
})
這裡有幾個地方需要注意:

1、我用的是post請求的簡略寫法,如果是get請求,這樣引數傳送不了,下面是不簡略的統一寫法

this.$http({
		            url: this.jsCtx+'aa',
		            method: 'get',
		            // 請求體重發送的資料
		            params: {
		                id:1
		            },
		            // 設定請求頭
		            headers: {
		                'Content-Type': 'x-www-from-urlencoded'
		            }
		        }).then(function (response) {
		            if(response.data.result==0){
			  			
			  		}else{
			  			
			  		}
		        }, function () {
		            // 請求失敗回撥
		        });
get請求想要傳送資料需要把資料寫在params中,資料就會拼入連結後面傳送了。post請求寫在data中,其實也就是我第一種簡略方法即可。

2.、第二個需要注意的是emulateJSON:true引數,官方描述大概就是預設是false,如果資料穿不過去就它寫成true,其實就是關聯到header的引數。

如果emulateJSON:true 則

Content-Type: application/x-www-form-urlencoded (相當於form表單提交)

如果emulateJSON:false(預設) 則

Content-Type: application/json;charset=UTF-8
關於get請求怎麼改header引數已經在上面的程式碼中體現了。
如果傳JSON.stringify()的引數,是用emulateJSON:false的,除此之外,基本都要把emulateJSON改為true.

此外,官方還提供了可以統一設定控制請求介面前,請求後的操作,可以通過返回資料進行統一控制

Vue.http.interceptors.push(function ( request, next ) {
    // 請求傳送前的處理邏輯
//					console.log(request)
//					console.log(next)
		    next(function (response) {   
		    	// 請求傳送後的處理邏輯
		    	// 更具請求的狀態, response引數會返回給 successCallback或errorCallback
//					console.log(response.data.result)
					if(response.data.stats == undefined){
						this.$router.push('/')
					}
//		        return response
		    });
		    
		});

這個方法我是寫在我上一篇文章的公用方法裡的,可以讓每個元件都呼叫到此方法具體如何建立公用方法js 移步

http://blog.csdn.net/qq_39507727/article/details/77482051點選開啟連結

我在寫這個方法的時候其實是想獲取除200以外的狀態值的,後臺介面之前用的是jsp,當判斷到使用者尚未登入或者登入超時後,介面狀態返回302,然後自動開啟登入頁面。然而我用這個介面的時候,根本找不到302這個狀態值,返回的直接是開啟登入頁面的狀態值200,所以無從判斷是否登入超時,只能通過獲取正確請求後必然返回的引數來判斷介面是否請求成功。