1. 程式人生 > 程式設計 >vue-resourc發起非同步請求的方法

vue-resourc發起非同步請求的方法

除了vue-resource之外,還可以使用'axios‘的第三方包實現資料的請求因為跨域失敗訪問不到,不過同域的可以直接訪問.html檔案來檢驗,這樣可以不用搭伺服器建議使用axios來進行非同步訪問請求

1.安裝或匯入vue-resource

安裝命令:

npm install vue-resource

匯入:

import VueResource from 'vue-resource'
Vue.use(VueResource)

2.使用

格式:

this.http.get('/url',[options]).then(successCallback,errorCallback)

更多

get(url,[options])
post(url,[body],[options])
jsonp(url,[options])

具體使用:

get:

function(){
this.$http.get{'/訪問地址'}.then(function(result){
//訪問成功後的處理
},function(result){
//訪問不成功的處理
})
}

post:

function(){
this.$http.post{'/訪問地址',{},{emulateJSON:true}}.then(function(result){
//訪問成功後的處理
},function(result){
//訪問不成功的處理
})
}

jsonp:

function(){
this.$http.jsonp{'/訪問地址'}.then(function(result){
//訪問成功後的處理
},function(result){
//訪問不成功的處理
})
}

result的資料使用推薦使用result.body下的資料

vue-resource提供的全域性配置資料根域名的方法

作用

使發起請求時,請求地址不用再寫根域名

方便移植設定全域性根域名

//在Vue例項建立前定義
//注意:根域名後面需要帶斜線
Vue.http.options.root='根域名/'

請求

//注意:地址前面不能帶斜線
this.$http.get('a/a')
vue-resource提供的全域性啟用emulateJSON選項
//在Vue例項建立前定義
Vue.http.options.emulateJSON=true

總結

以上所述是小編給大家介紹的vue-resourc發起非同步請求的方法,希望對大家有所幫助!