vue外掛程式vue-resource的使用筆記（小結），vuevue-resource

vue外掛程式vue-resource的使用筆記（小結），vuevue-resource

最近手頭有個小項目，打算用vue練個手，期間用到了vue的外掛程式：vue-resource。下面是我使用這個外掛程式的一些經驗，算是給自己寫的一個筆記，分享出來也希望和我遇到同樣坑的朋友可以藉此踩坑而過~

在使用這個外掛程式之前，當然是先安裝啦：

npm i vue-resource --save

安裝讀條完畢，接下來便是在項目中引入：

import VueResource from 'vue-resource'Vue.use(VueResource);

如上所述，在入口檔案中引入vue-resource即可。然後便是具體的使用了。vue-resource的使用和以前在JQ,ZEPTO等等中使用的$.ajax方式類似，當然，官方也提供了一系列的介面供小夥伴兒們使用，具體在此不做贅述，有興趣的小夥伴兒請移步：

Git傳送門：https://github.com/pagekit/vue-resource/blob/master/README.md

具體的使用方式個中均有詳述。

最後，就是我自己遇到的一個坑，上代碼！（不喜過程的小夥伴兒可以看波代碼，然後直接跳到文章尾看結論。）

<script> export default {  name: 'app',  data () {   return {    articles: []   }  },  created: function() {   this.$http.get('/api/user/order/list',     {       productType:"1",       pageNum:1,       pageLimit:8     },     {      headers:{      },      emulateJSON: true     }   ).then((response) => {    this.articles = response.data.data.list;   }).catch(function(response) {    console.log(response)   });  } }</script>

這個是最初始的代碼，滿心歡喜打包運行之後，發現控制台報了個錯，說list未定義！WTF！為此我去後台看了下介面調用的情況，發現之前在調用介面時所傳的參數並沒有傳參成功，後來去網上多方搜查資料，發現把傳參方式修改成如下形式即可：

{ params: {  productType:"1",  pageNum:1,  pageLimit:8 }}

和之前的傳參方式不同，這次我把參數加在了一個名為params的對象中，再次打包後上傳，發現介面調用成功！

在這裡，我對params做一個解釋，params表示的是支援上傳多個可變參數，至於為啥加了之後就可以了，我也不是非常清楚，如有大神看到，望不吝賜教OTZ。

OK，既然介面調用成功了，那麼資料也應該就如願以償的可以擷取到了，然而看到頁面上仍是一片空白，懵逼的我瞄了一眼控制台，發現此時控制台上報了個錯，說list未定義。WTF！為此我仔細的看了下介面的資料結構，發現這樣賦值並沒有問題，可就是報錯未定義。於是便有了如下猜想：

想法一：response資料返回有誤

針對這個想法，我console了下response，發現response返回正常，此想法被終結。

想法二：既然response返回沒有問題，那問題難道出在data上？

針對這個想法，我console了下response.data，發現response.data返回正常，返回的資料正是我介面中的資料！

驗證完這兩個想法之後，我有點迷糊了，既然data沒有問題，為什麼擷取不到內部的資料呢？帶著這個問題，我去GOOGLE了一把，發現vue-resource的GET方法返回的response不僅僅只是單純的資料，而是包含了要求標頭資訊，資料等等一系列的資料，而vue-response也提供了提取資料的方法：response.json()。感覺抓到救命稻草的我迫不及待的試用的這個方法去擷取資料，結果依舊無法擷取。

想法三：既然response.json()無法擷取，應該有其他的方法可以擷取到。

為此，我又去參考了相應的文檔，發現確實還有一個方法：response.body.data！如蒙大赦，天不亡我！

然。。。依舊失敗。多次的嘗試無果，略有煩躁，恰巧這個時候，同事問了我一個問題，也是介面的資料擷取不到，只不過是用的$.ajax的方法，後來發現是未定義dataType:JSON的問題。說到這兒，醍醐灌頂！是不是一開始，data返回的就不是JSON格式，而是字串的格式？於是，我在最開始擷取資料的方式外，加了一層JSON.parse：

this.articles = JSON.parse(response.data).data.list;

滿懷期待的看著控制台，終於，擷取到資料。

結論：綜上所述，在使用vue-resource時，需要留意最終擷取的資料是否為JSON格式，如若不是，需要先進行JSON格式化才可以。vue-resource是否有設定dataType的入口，本人才疏學淺，還未得知，以後如果發現，定會告知。如有大神看到，希望不吝賜教OTZ~

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。