欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue插件vue-resource的使用筆記(小結(jié))

 更新時(shí)間:2017年08月04日 14:35:00   作者:MRblackLu  
本篇文章主要介紹了vue插件vue-resource的使用筆記(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

npm i vue-resource --save

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

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

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

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

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

最后,就是我自己遇到的一個(gè)坑,上代碼!(不喜過程的小伙伴兒可以看波代碼,然后直接跳到文章尾看結(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)控制臺報(bào)了個(gè)錯(cuò),說list未定義!WTF!為此我去后臺看了下接口調(diào)用的情況,發(fā)現(xiàn)之前在調(diào)用接口時(shí)所傳的參數(shù)并沒有傳參成功,后來去網(wǎng)上多方搜查資料,發(fā)現(xiàn)把傳參方式修改成如下形式即可:

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

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

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

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

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

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

想法二:既然response返回沒有問題,那問題難道出在data上?

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

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

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

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

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

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

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

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

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

相關(guān)文章

  • 基于ElementUI實(shí)現(xiàn)v-tooltip指令的示例代碼

    基于ElementUI實(shí)現(xiàn)v-tooltip指令的示例代碼

    文本溢出隱藏并使用tooltip 提示的需求,相信在平時(shí)的開發(fā)中會經(jīng)常遇到,常規(guī)做法一般是使用 elementui 的 el-tooltip 組件,在每次組件更新的時(shí)候去獲取元素的寬度/高度判斷是否被隱藏,本文給大家介紹了基于ElementUI實(shí)現(xiàn)v-tooltip指令,需要的朋友可以參考下
    2024-09-09
  • vue項(xiàng)目中使用scss的方法步驟

    vue項(xiàng)目中使用scss的方法步驟

    這篇文章主要介紹了vue項(xiàng)目中使用scss的方法步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-05-05
  • Vue組件通信深入分析

    Vue組件通信深入分析

    對于vue來說,組件之間的消息傳遞是非常重要的,用vue可以是要組件復(fù)用的,而組件實(shí)例的作用域是相互獨(dú)立,這意味著不同組件之間的數(shù)據(jù)無法互相引用,一般來說,組件之間可以有幾種關(guān)系,下面是我對組件之間消息傳遞的常用方式的總結(jié)
    2022-08-08
  • elementUI Tree 樹形控件的官方使用文檔

    elementUI Tree 樹形控件的官方使用文檔

    這篇文章主要介紹了elementUI Tree 樹形控件的官方使用文檔,用清晰的層級結(jié)構(gòu)展示信息,可展開或折疊。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-04-04
  • Vue非父子組件通信詳解

    Vue非父子組件通信詳解

    這篇文章主要為大家詳細(xì)介紹了Vue非父子組件通信的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • Vue?生命周期和數(shù)據(jù)共享詳解

    Vue?生命周期和數(shù)據(jù)共享詳解

    這篇文章主要為大家詳細(xì)介紹了Vue生命周期和數(shù)據(jù)共享,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • vue3中使用VueParticles實(shí)現(xiàn)粒子動(dòng)態(tài)背景效果

    vue3中使用VueParticles實(shí)現(xiàn)粒子動(dòng)態(tài)背景效果

    為了提高頁面展示效果,特別類似于登錄界面內(nèi)容比較單一的,粒子效果作為背景經(jīng)常使用到,vue工程中利用vue-particles可以很簡單的實(shí)現(xiàn)頁面的粒子背景效果,本文給大家分享vue粒子動(dòng)態(tài)背景效果實(shí)現(xiàn)代碼,需要的朋友參考下吧
    2022-05-05
  • vue 二維碼長按保存和復(fù)制內(nèi)容操作

    vue 二維碼長按保存和復(fù)制內(nèi)容操作

    這篇文章主要介紹了vue 二維碼長按保存和復(fù)制內(nèi)容操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹

    vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹

    vue如何簡單的實(shí)現(xiàn)彈框,遮罩,點(diǎn)擊其他區(qū)域關(guān)閉彈框, 簡單的思路是以一個(gè)div作為遮罩,這篇文章給大家詳細(xì)介紹了vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹,感興趣的朋友一起看看吧
    2018-09-09
  • vue之computed的緩存特性

    vue之computed的緩存特性

    這篇文章主要介紹了vue之computed的緩存特性,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11

最新評論