數(shù)據(jù)獲取 vue-resource

• vue-resource
• axios

單來說，vue-resource就像jQuery里的$.ajax，用來和后端交互數(shù)據(jù)的?？梢苑旁赾reated或者ready里面運(yùn)行來獲取或者更新數(shù)據(jù)...

vue-resource特點(diǎn)

vue-resource插件具有以下特點(diǎn)：

1. 體積小
   vue-resource非常小巧，在壓縮以后只有大約12KB，服務(wù)端啟用gzip壓縮后只有4.5KB大小，這遠(yuǎn)比jQuery的體積要小得多。
2. 支持主流的瀏覽器
   和Vue.js一樣，vue-resource除了不支持IE 9以下的瀏覽器，其他主流的瀏覽器都支持。
3. 支持Promise API和URI Templates
   Promise是ES6的特性，Promise的中文含義為“先知”，Promise對象用于異步計(jì)算。URI Templates表示URI模板，有些類似于ASP.NET MVC的路由模板。
4. 支持?jǐn)r截器
   攔截器是全局的，攔截器可以在請求發(fā)送前和發(fā)送請求后做一些處理。攔截器在一些場景下會非常有用，比如請求發(fā)送前在headers中設(shè)置access_token，或者在請求失敗時(shí)，提供共通的處理方式。

vue-resource使用

1.引入vue-resource

<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

基本語法

• 引入vue-resource后，可以基于全局的Vue對象使用http，也可以基于某個Vue實(shí)例使用http。

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

在發(fā)送請求后，使用then方法來處理響應(yīng)結(jié)果，then方法有兩個參數(shù)，第一個參數(shù)是響應(yīng)成功時(shí)的回調(diào)函數(shù)，第二個參數(shù)是響應(yīng)失敗時(shí)的回調(diào)函數(shù)。

GET

• 說明：發(fā)送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);
  })