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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
CSS常用网站布局实例
Apr 03 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
分享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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python入门篇之条件、循环
2014/10/17 Python
python字典get()方法用法分析
2015/04/17 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python实现二维数组输出为图片
2018/04/03 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
Python将字典转换为XML的方法
2020/08/01 Python
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
大学生活动总结怎么写
2014/04/29 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
Python 中 Shutil 模块详情
2021/11/11 Python
nginx容器方式反向代理实战
2022/04/18 Servers