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 相关文章推荐
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
javascript实现简易计算器的代码
May 31 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
进一步了解Python中的XML 工具
2015/04/13 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python登录注册验证功能实现
2018/06/18 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
python利用opencv实现颜色检测
2021/02/23 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
结婚典礼证婚词
2014/01/08 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis