中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue中如何使用vue-resource插件

發布時間:2021-07-21 14:17:50 來源:億速云 閱讀:138 作者:Leah 欄目:web開發

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

在使用這個插件之前,當然是先安裝啦:

npm i vue-resource --save

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

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

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

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

最后,就是我自己遇到的一個坑,上代碼!(不喜過程的小伙伴兒可以看波代碼,然后直接跳到文章尾看結論。)

<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中如何使用vue-resource插件的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

永年县| 清远市| 淅川县| 页游| 临猗县| 莱西市| 兴城市| 土默特左旗| 博罗县| 阿鲁科尔沁旗| 五大连池市| 巨鹿县| 砚山县| 潼南县| 教育| 莆田市| 兴业县| 西乡县| 朝阳区| 龙州县| 勐海县| 益阳市| 泾阳县| 精河县| 淄博市| 临海市| 白玉县| 永平县| 宁河县| 江阴市| 桃园市| 汝阳县| 温州市| 时尚| 萍乡市| 慈利县| 鸡泽县| 遂宁市| 梨树县| 田东县| 门源|