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 相关文章推荐
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 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基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
python实现拓扑排序的基本教程
2018/03/11 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
六十大寿答谢词
2014/01/12 职场文书
承认错误的检讨书
2014/01/30 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
应届毕业生求职信
2014/05/26 职场文书
运动会口号16字
2014/06/07 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
优秀高中学生评语
2014/12/30 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server