vue插件vue-resource的使用笔记(小结)


Posted in Javascript onAugust 04, 2017

最近手头有个小项目,打算用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~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
Vue表单实例代码
Sep 05 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 #Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 #Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
vue修改vue项目运行端口号的方法
Aug 04 #Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 #Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 #Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 #Javascript
You might like
php 随机生成10位字符代码
2009/03/26 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
PHP7新特性
2021/03/09 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python读取二进制mnist实例详解
2017/05/31 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python绘制3D图形
2018/05/03 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
后勤岗位职责
2013/11/26 职场文书
物流合作计划书
2014/01/10 职场文书
精彩的广告词
2014/03/19 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
爱护公物演讲稿
2014/09/09 职场文书
银行员工考核评语
2014/12/31 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
python实现三阶魔方还原的示例代码
2021/04/28 Python