vue插件vue-resource的使用笔记(小结)
最近手头有个小项目,打算用vue练个手,期间用到了vue的插件:vue-resource。下面是我使用这个插件的一些经验,算是给自己写的一个笔记,分享出来也希望和我遇到同样坑的朋友可以借此踩坑而过~
在使用这个插件之前,当然是先安装啦:
npm i vue-resource --save
安装读条完毕,接下来便是在项目中引入:
import VueResource from 'vue-resource' Vue.use(VueResource);
如上所述,在入口文件中引入vue-resource即可。然后便是具体的使用了。vue-resource的使用和以前在JQ,ZEPTO等等中使用的$.ajax方式类似,当然,官方也提供了一系列的接口供小伙伴儿们使用,具体在此不做赘述,有兴趣的小伙伴儿请移步:
Git传送门:https://github.com/pagekit/vue-resource/blob/master/README.md
具体的使用方式个中均有详述。
最后,就是我自己遇到的一个坑,上代码!(不喜过程的小伙伴儿可以看波代码,然后直接跳到文章尾看结论。)
<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-resource时,需要留意最终获取的数据是否为JSON格式,如若不是,需要先进行JSON格式化才可以。vue-resource是否有设置dataType的入口,本人才疏学浅,还未得知,以后如果发现,定会告知。如有大神看到,希望不吝赐教OTZ~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- UVA 1030 - Image Is Everything【模拟+思维+迭代更新】
- C/C++中对链表操作的理解&&实例分析
- COGS 2482. Franky的胡子【二分,高精度】
- 【AlphaGo Zero 核心技术-深度强化学习教程代码实战02】理解gym的建模思想
- Kruscal(最小生成树)算法模版
- BZOJ 3680: 吊打XXX【模拟退火算法裸题学习,爬山算法学习】
- 区块链概况:什么是比特币
- 简化版桶排序操作模版
- BZOJ 3670: [Noi2014]动物园【KMP变形 】
- 【延迟注入】A5站长网某站存在SQL注入漏洞
- hihoCoder #1498 : Diligent Robots【数学】
- Codeforces Round #336 (Div. 2)【A.思维,暴力,B.字符串,暴搜,前缀和,C.暴力,D,区间dp,E,字符串,数学】
- 【防护】如何阻止SELECT * 语句
- COGS 862. 二进制数01串【dp+经典二分+字符串】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Linux】血泪教训 -- 动态链接库配置方法
- FTP文件管理项目(本地云)项目日报(八)
- FTP文件管理项目(本地云)项目日报(七)
- FTP文件管理项目(本地云)项目日报(六)
- Transformers Assemble(PART I)
- FTP文件管理项目(本地云)项目日报(五)
- 几个Python“小伎俩”
- FTP文件管理项目(本地云)项目日报(四)
- BERT源码分析(PART I)
- FTP文件管理项目(本地云)项目日报(二)
- FTP文件管理项目(本地云)项目日报(一)
- 【奇技淫巧】-- 朋友圈(并查集)
- 【奇技淫巧】-- 岛屿的最大面积
- LeetCode精选好题(三)
- 【LeetCode两题选手】算法类题目(7.29)