vue插件vue-resource的使用筆記(小結(jié))
最近手頭有個(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í)有所幫助,也希望大家多多支持腳本之家。
- Vue添加請(qǐng)求攔截器及vue-resource 攔截器使用
- vue resource post請(qǐng)求時(shí)遇到的坑
- vue-cli項(xiàng)目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回?cái)?shù)據(jù))
- Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼
- Vue resource中的GET與POST請(qǐng)求的實(shí)例代碼
- 詳解vue前后臺(tái)數(shù)據(jù)交互vue-resource文檔
- vue-resource 攔截器(interceptor)的使用詳解
- Vue中的vue-resource示例詳解
相關(guān)文章
基于ElementUI實(shí)現(xiàn)v-tooltip指令的示例代碼
文本溢出隱藏并使用tooltip 提示的需求,相信在平時(shí)的開發(fā)中會(huì)經(jīng)常遇到,常規(guī)做法一般是使用 elementui 的 el-tooltip 組件,在每次組件更新的時(shí)候去獲取元素的寬度/高度判斷是否被隱藏,本文給大家介紹了基于ElementUI實(shí)現(xiàn)v-tooltip指令,需要的朋友可以參考下2024-09-09vue3中使用VueParticles實(shí)現(xiàn)粒子動(dòng)態(tài)背景效果
為了提高頁(yè)面展示效果,特別類似于登錄界面內(nèi)容比較單一的,粒子效果作為背景經(jīng)常使用到,vue工程中利用vue-particles可以很簡(jiǎn)單的實(shí)現(xiàn)頁(yè)面的粒子背景效果,本文給大家分享vue粒子動(dòng)態(tài)背景效果實(shí)現(xiàn)代碼,需要的朋友參考下吧2022-05-05vue 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作
這篇文章主要介紹了vue 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
vue如何簡(jiǎn)單的實(shí)現(xiàn)彈框,遮罩,點(diǎn)擊其他區(qū)域關(guān)閉彈框, 簡(jiǎn)單的思路是以一個(gè)div作為遮罩,這篇文章給大家詳細(xì)介紹了vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹,感興趣的朋友一起看看吧2018-09-09