使用vue resource庫發送請求獲取數據

數據獲取 vue-resource

單來講,vue-resource就像jQuery裏的$.ajax,用來和後端交互數據的。能夠放在created或者ready裏面運行來獲取或者更新數據... ###vue-resource特色 vue-resource插件具備如下特色:html

  1. 體積小 vue-resource很是小巧,在壓縮之後只有大約12KB,服務端啓用gzip壓縮後只有4.5KB大小,這遠比jQuery的體積要小得多。
  2. 支持主流的瀏覽器 和Vue.js同樣,vue-resource除了不支持IE 9如下的瀏覽器,其餘主流的瀏覽器都支持。
  3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含義爲「先知」,Promise對象用於異步計算。URI Templates表示URI模板,有些相似於ASP.NET MVC的路由模板。
  4. 支持攔截器 攔截器是全局的,攔截器能夠在請求發送前和發送請求後作一些處理。攔截器在一些場景下會很是有用,好比請求發送前在headers中設置access_token,或者在請求失敗時,提供共通的處理方式。 ###vue-resource使用

1.引入vue-resourcevue

####基本語法ios

  • 引入vue-resource後,能夠基於全局的Vue對象使用http,也能夠基於某個Vue實例使用http。

// 基於全局Vue對象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一個Vue實例內使用$http this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);git

在發送請求後,使用then方法來處理響應結果,then方法有兩個參數,第一個參數是響應成功時的回調函數,第二個參數是響應失敗時的回調函數。github

GET

  • 說明:發送JSONP的方式與get請求相同
const url = 'http://vue.studyit.io/api/getnewslist'
this.$http.get(url)
  .then(data => {
    console.log(data)
    console.log(data.body)
  })
複製代碼

POST

// const url = 'http://182.254.146.100:8899/api/postcomment/17'
const url = 'http://vue.studyit.io/api/postcomment/17'
this.$http.post(url, {
  content: '完美!'
}, {
  emulateJSON: true
})
  .then(data => {
    console.log(data.body);
  })
複製代碼

JSONP

const url = 'http://v.showji.com/Locating/showji.com2016234999234.aspx?m=13333333333&output=json&&timestamp=' + (new Date() - 0)
this.$http.jsonp(url)
  .then(data => {
    console.log(data.body);
  })
複製代碼
相關文章
相關標籤/搜索