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

时间:2019-03-31
本文章向大家介绍vue插件vue-resource的使用笔记(小结),主要包括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~

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