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

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

你們必定知道，在jquery中，咱們使用$.ajax()方法，來發送請求獲取數據，

在vue中，咱們使用vue-resource或者axios來向接口發送請求，獲取數據，官方推薦使用axios,其實用法差很少。

這裏咱們先介紹vue-resource庫：

vue-resource的特色：

• 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的路由模板。

• 支持攔截器

攔截器是全局的，攔截器能夠在請求發送前和發送請求後作一些處理。 攔截器在一些場景下會很是有用，好比請求發送前在headers中設置access_token，或者在請求失敗時，提供共通的處理方式。

vue-resource的使用

引入vue-resource

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

基本語法

引入vue-resource後，能夠基於全局的Vue對象使用http，也能夠基於某個Vue實例使用http。咱們發現其實vue中特性：不少功能，在實例中可使用，全局對象也能夠直接定義。

示例：
// 基於全局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);

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

then方法的回調函數也有兩種寫法，第一種是傳統的函數寫法，第二種是更爲簡潔的ES 6的Lambda寫法：

示例：
// 傳統寫法
this.$http.get('/someUrl', [options]).then(function(response){
    // 響應成功回調
}, function(response){
    // 響應錯誤回調
});


// Lambda寫法
this.$http.get('/someUrl', [options]).then((response) => {
    // 響應成功回調
	// 注意：函數表達式簡寫形式，可是其中this指向發生變化，此時，執行vue實例,上面傳統寫法指向window對象
}, (response) => {
    // 響應錯誤回調
});

支持的HTTP方法

• get(url, [options])

• head(url, [options])

• delete(url, [options])

• jsonp(url, [options])

• post(url, [body], [options])

• put(url, [body], [options])

• patch(url, [body], [options])

  ​

  介紹三種經常使用的，get請求，post請求，jsonp跨域

var vm = new Vue({
      el: '#app',
      data: {
        list: []
      },

      // 在 created 鉤子函數中，能夠調用data和methods, getData 方法，獲取數據
      // 由於這個鉤子函數，會在vue建立階段調用，因此，咱們直接在這個方法中調用
      // this.getData 方法便可
      created() {
        // 發送 get 請求
        this.getData()

        // 發送 post 請求
        this.postData()

        // 發送 JSONP 請求
        this.jsonpData()
      },

      methods: {
        getData() {
          // console.log(this.$http);

          // 發送 get 請求
          this.$http.get('http://vue.studyit.io/api/getnewslist')
            .then(resp => {
              console.log(resp.body);

              this.list = resp.body.message
            })
            .catch(err => {
              console.log(err);
            })
        },

        postData() {
          // this.$http.post()
          var url = 'http://vue.studyit.io/api/postcomment/17'

          // 第一個參數：表示請求的接口地址
          // 第二個參數：表示提交給接口的數據
          // 第三個參數：請求的配置對象，若是是post請求，須要將 emulateJSON 設置爲true
          this.$http.post(url, {
            content: '完美！'
          }, {
              emulateJSON: true
            })
            .then(resp => {
              console.log(resp.body);
            })
        },

        jsonpData() {
          var 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);
            })
        }
      }
})

options對象

發送請求時的options選項對象包含如下屬性：

參數	類型	描述
url	string	請求的URL
method	string	請求的HTTP方法，例如：'GET', 'POST'或其餘HTTP方法
body	Object,FormData``string	request body
params	Object	請求的URL參數對象
headers	Object	request header
timeout	number	單位爲毫秒的請求超時時間 (0 表示無超時時間)
before	function(request)	請求發送前的處理函數，相似於jQuery的beforeSend函數
progress	function(event)	ProgressEvent回調處理函數
credientials	boolean	表示跨域請求時是否須要使用憑證
emulateHTTP	boolean	發送PUT, PATCH, DELETE請求時以HTTP POST的方式發送，並設置請求頭的X-HTTP-Method-Override
emulateJSON	boolean	將request body以application/x-www-form-urlencoded content type發送

emulateHTTP的做用

若是Web服務器沒法處理PUT, PATCH和DELETE這種REST風格的請求，你能夠啓用enulateHTTP現象。啓用該選項後，請求會以普通的POST方法發出，而且HTTP頭信息的X-HTTP-Method-Override屬性會設置爲實際的HTTP方法。

Vue.http.options.emulateHTTP = true;

emulateJSON的做用

若是Web服務器沒法處理編碼爲application/json的請求，你能夠啓用emulateJSON選項。啓用該選項後，請求會以application/x-www-form-urlencoded做爲MIME type，就像普通的HTML表單同樣。

Vue.http.options.emulateJSON = true;

response對象

response對象包含如下屬性：

方法	類型	描述
text()	string	以string形式返回response body
json()	Object	以JSON對象形式返回response body
blob()	Blob	以二進制形式返回response body
屬性	類型	描述
ok	boolean	響應的HTTP狀態碼在200~299之間時，該屬性爲true
status	number	響應的HTTP狀態碼
statusText	string	響應的狀態文本
headers	Object	響應頭

注意：本文的vue-resource版本爲v0.9.3，若是你使用的是v0.9.0之前的版本，response對象是沒有json(), blob(), text()這些方法的。

介紹一個博客：神人博客，知識點很全

連接：http://blog.csdn.net/sinat_17775997/article/details/52549084?locationNum=6&fps=1