Javascript類庫：vue.js中的vue-resource示例詳解

張偵毅發表於2018-11-27
JavaScriptVue.js

Vue與後臺Api進行互動通常是利用vue-resource來實現的，本質上vue-resource是透過http來完成AJAX請求相應的。這篇文章主要介紹了Vue中的vue-resource示例詳解,需要的朋友可以參考下

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

4. 支援攔截器 攔截器是全域性的，攔截器可以在請求傳送前和傳送請求後做一些處理。攔截器在一些場景下會非常有用，比如請求傳送前在headers中設定Access_token，或者在請求失敗時，提供共通的處理方式。

下面透過示例看下Vue中的vue-resource一起看看吧

  • 版本：vue-resource v1.2.1
  • 作用：

  Vue與後臺Api進行互動通常是利用vue-resource來實現的，本質上vue-resource是透過http來完成AJAX請求相應的。

用法：

  Vue例項物件註冊this.$http服務，可以傳送HTTP請求。解析請求所返回的結果。此外，Vue例項將會自定繫結到this所在的回撥函式中。

  1. {
  2.  // GET /someUrl
  3.  this.$http.get('/someUrl').then(response => {
  4.   // success callback
  5.  }, response => {
  6.   // error callback
  7.  });
  8. }

快捷方法列表

  1. get(url, [config])
  2. head(url, [config])
  3. delete(url, [config])
  4. jsonp(url, [config])
  5. post(url, [body], [config])
  6. put(url, [body], [config])
  7. patch(url, [body], [config])

配置資訊命令

響應

原始碼

下面我將以get請求訪問json檔案的方式來展示vue-resource的用法。

html中的原始碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>vue-router</title>
  6. </head>
  7. <body>
  8.   <div id="app">
  9.     <ul>
  10.       <li v-for="item in list">{{item.name}}</li>
  11.     </ul>
  12.     <button @click="getData">get請求</button>
  13.   </div>
  14. <script src="../../../js/vue/vue/1.0/vue.js"></script>
  15. <script src="../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
  16. <script type="application/javascript">
  17.   var vm = new Vue({
  18.     el:'#app'
  19.     ,data:{
  20.       list:[]
  21.     }
  22.     ,methods:{
  23.       getData(){
  24.         var url = '../json/get.json';
  25.         this.$http.get(url).then(function(res){
  26.           var body = res.body;
  27.           if(body.status){
  28.             alert('請求出錯！');
  29.           }
  30.           this.list = body.message;
  31.         });
  32.       }
  33.     }
  34.   });
  35. </script>
  36. </body>
  37. </html>

json檔案中的原始碼

  1. {
  2.  "status":0
  3.  ,"message":[
  4.   {
  5.    "id":1
  6.    ,"name":"張三"
  7.   }
  8.   ,{
  9.    "id":2
  10.    ,"name":"李四"
  11.   }
  12.  ]
  13. }

結果

分析

上面的程式碼實現的功能是在頁面中透過點選button按鈕來觸發一個getData的click響應事件，而該事件實現的功能是傳送一個url請求（儘管說其請求的是本地的json檔案資料，不過其請求後臺的方法和該方法是一模一樣的，所以說其用於請求後臺的資料也是同樣的用法。），該請求返回url連結所響應的資料。而該返回資料將會在then()回撥函式中進行相應的處理，比如說我們的json檔案中就返回了status響應狀態碼，其中0代表成功，否則失敗。而一旦響應成功，則呼叫body.message，將相應的資料主體繫結到data資料域中的list中，由於list中的資料有變動，因而Vue會自定的重新整理li的v-for中的頁面資訊，進而完成頁面資訊的更新操作。

總結

以上所述是小編給大家介紹的Vue中的vue-resource示例詳解，希望對大家有所幫助。

相關文章