用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請求,這樣引數傳送不了,下面是不簡略的統一寫法
get請求想要傳送資料需要把資料寫在params中,資料就會拼入連結後面傳送了。post請求寫在data中,其實也就是我第一種簡略方法即可。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 () { // 請求失敗回撥 });
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,所以無從判斷是否登入超時,只能通過獲取正確請求後必然返回的引數來判斷介面是否請求成功。