Vue插件——vue-resource

一、vue-resource

插件下載：https://github.com/pagekit/vue-resource

vue-resource是Vue的插件，通過XMLHttpRequest或JSONP發起請求或處理響應。

  <script src="lib/vue.js"></script> <!-- 先引入vue的包 -->
  <script src="lib/vue-resource.js"></script>

1、HTTP請求/響應

https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

在Vue對象上掛載$http屬性來提供http服務，在全局使用Vue.http，在一個Vue實例中使用this.$http。

通過response.body拿到服務器返回的數據。

手動發起的post請求，默認沒有表單格式，有的服務器處理不了。通過post方法的第三個參數{ emulateJSON: true }設置提交的內容類型爲普通表單數據格式application/x-wwww-form-urlencoded。

this.$http.get('/someUrl', [config]).then(successCallback, [errorCallback]);
this.$http.post('/someUrl', [body], [config]).then(successCallback, [errorCallback]);
this.$http.jsonp('/someUrl', [config]).then(successCallback, [errorCallback]);

{
  this.$http.get('/someUrl').then(response => {
    // success callback
    // console.log(response.body);
  }, response => {
    // error callback
  });
}

2、配置

https://github.com/pagekit/vue-resource/blob/develop/docs/config.md

配置根路徑和  的默認值。如果配置了根域名，則發送請求時的相對路徑前面不能帶'/'，否則不能與根路徑作拼接。

// 全局
Vue.http.options.root = '/root';
Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

// 在Vue實例局部
new Vue({
  http: {
    root: '/root',
    headers: {
      Authorization: 'Basic YXBpOnBhc3N3b3Jk'
    }
  }
})

全局設置emulateJSON:true

Vue.http.options.emulateJSON = true;

二、vue-axios

 

vue-preview