vue中如何使用vue-resource插件，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計與策劃設(shè)計,南京網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:南京等地區(qū)。南京做網(wǎng)站價格咨詢:13518219792

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

npm i vue-resource --save

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

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

如上所述，在入口文件中引入vue-resource即可。然后便是具體的使用了。vue-resource的使用和以前在JQ,ZEPTO等等中使用的$.ajax方式類似

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

最后，就是我自己遇到的一個坑，上代碼?。ú幌策^程的小伙伴兒可以看波代碼，然后直接跳到文章尾看結(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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

看完上述內(nèi)容，你們掌握vue中如何使用vue-resource插件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：vue中如何使用vue-resource插件-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://www.rwnh.cn/article6/dhhoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站建設(shè)、網(wǎng)站收錄、定制網(wǎng)站、網(wǎng)站改版、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)