最近手頭有個(gè)小項(xiàng)目，打算用vue練個(gè)手，期間用到了vue的插件：vue-resource。下面是我使用這個(gè)插件的一些經(jīng)驗(yàn)，算是給自己寫的一個(gè)筆記，分享出來(lái)也希望和我遇到同樣坑的朋友可以借此踩坑而過(guò)~

在使用這個(gè)插件之前，當(dāng)然是先安裝啦：

npm i vue-resource --save

安裝讀條完畢，接下來(lái)便是在項(xiàng)目中引入：

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

如上所述，在入口文件中引入vue-resource即可。然后便是具體的使用了。vue-resource的使用和以前在JQ,ZEPTO等等中使用的$.ajax方式類似，當(dāng)然，官方也提供了一系列的接口供小伙伴兒們使用，具體在此不做贅述，有興趣的小伙伴兒請(qǐng)移步：

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

具體的使用方式個(gè)中均有詳述。

最后，就是我自己遇到的一個(gè)坑，上代碼！（不喜過(guò)程的小伙伴兒可以看波代碼，然后直接跳到文章尾看結(jié)論。）

<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>

這個(gè)是最初始的代碼，滿心歡喜打包運(yùn)行之后，發(fā)現(xiàn)控制臺(tái)報(bào)了個(gè)錯(cuò)，說(shuō)list未定義！WTF！為此我去后臺(tái)看了下接口調(diào)用的情況，發(fā)現(xiàn)之前在調(diào)用接口時(shí)所傳的參數(shù)并沒(méi)有傳參成功，后來(lái)去網(wǎng)上多方搜查資料，發(fā)現(xiàn)把傳參方式修改成如下形式即可：

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

和之前的傳參方式不同，這次我把參數(shù)加在了一個(gè)名為params的對(duì)象中，再次打包后上傳，發(fā)現(xiàn)接口調(diào)用成功！

在這里，我對(duì)params做一個(gè)解釋，params表示的是支持上傳多個(gè)可變參數(shù)，至于為啥加了之后就可以了，我也不是非常清楚，如有大神看到，望不吝賜教OTZ。

OK，既然接口調(diào)用成功了，那么數(shù)據(jù)也應(yīng)該就如愿以償?shù)目梢垣@取到了，然而看到頁(yè)面上仍是一片空白，懵逼的我瞄了一眼控制臺(tái)，發(fā)現(xiàn)此時(shí)控制臺(tái)上報(bào)了個(gè)錯(cuò)，說(shuō)list未定義。WTF！為此我仔細(xì)的看了下接口的數(shù)據(jù)結(jié)構(gòu)，發(fā)現(xiàn)這樣賦值并沒(méi)有問(wèn)題，可就是報(bào)錯(cuò)未定義。于是便有了如下猜想：

想法一：response數(shù)據(jù)返回有誤

針對(duì)這個(gè)想法，我console了下response，發(fā)現(xiàn)response返回正常，此想法被終結(jié)。

想法二：既然response返回沒(méi)有問(wèn)題，那問(wèn)題難道出在data上？

針對(duì)這個(gè)想法，我console了下response.data，發(fā)現(xiàn)response.data返回正常，返回的數(shù)據(jù)正是我接口中的數(shù)據(jù)！

驗(yàn)證完這兩個(gè)想法之后，我有點(diǎn)迷糊了，既然data沒(méi)有問(wèn)題，為什么獲取不到內(nèi)部的數(shù)據(jù)呢？帶著這個(gè)問(wèn)題，我去GOOGLE了一把，發(fā)現(xiàn)vue-resource的GET方法返回的response不僅僅只是單純的數(shù)據(jù)，而是包含了請(qǐng)求頭信息，數(shù)據(jù)等等一系列的數(shù)據(jù)，而vue-response也提供了提取數(shù)據(jù)的方法：response.json()。感覺(jué)抓到救命稻草的我迫不及待的試用的這個(gè)方法去獲取數(shù)據(jù)，結(jié)果依舊無(wú)法獲取。

想法三：既然response.json()無(wú)法獲取，應(yīng)該有其他的方法可以獲取到。

為此，我又去參考了相應(yīng)的文檔，發(fā)現(xiàn)確實(shí)還有一個(gè)方法：response.body.data！如蒙大赦，天不亡我！

然。。。依舊失敗。多次的嘗試無(wú)果，略有煩躁，恰巧這個(gè)時(shí)候，同事問(wèn)了我一個(gè)問(wèn)題，也是接口的數(shù)據(jù)獲取不到，只不過(guò)是用的$.ajax的方法，后來(lái)發(fā)現(xiàn)是未定義dataType:JSON的問(wèn)題。說(shuō)到這兒，醍醐灌頂！是不是一開始，data返回的就不是JSON格式，而是字符串的格式？于是，我在最開始獲取數(shù)據(jù)的方式外，加了一層JSON.parse：

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

滿懷期待的看著控制臺(tái)，終于，獲取到數(shù)據(jù)。

結(jié)論：綜上所述，在使用vue-resource時(shí)，需要留意最終獲取的數(shù)據(jù)是否為JSON格式，如若不是，需要先進(jìn)行JSON格式化才可以。vue-resource是否有設(shè)置dataType的入口，本人才疏學(xué)淺，還未得知，以后如果發(fā)現(xiàn)，定會(huì)告知。如有大神看到，希望不吝賜教OTZ~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論