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~

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

# vue # resource插件使用 # vueresource插件 # resource使用 # Vue添加请求拦截器及vue-resource 拦截器使用 # vue resource post请求时遇到的坑 # vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据） # Vue2.0利用vue-resource上传文件到七牛的实例代码 # Vue resource中的GET与POST请求的实例代码 # 详解vue前后台数据交互vue-resource文档 # vue-resource 拦截器（interceptor）的使用详解 # Vue中的vue-resource示例详解 # 看了 # 不吝赐教 # 如有 # 我去 # 大神 # 报了 # 使用这个 # 的是 # 我也 # 看着 # 上传 # 在这里 # 我在 # 才疏学浅 # 带着 # 有个 # 多个 # 在此 # 醍醐灌顶 # 和我

返回目录在线咨询

上一篇：方卡智能建站系统：郑州SEO优化与智能建站快速搭建指南
下一篇：KerasTuner中自定义指标（如F1、AUC）作为调优目标的实践指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

vue插件vue-resource的使用笔记（小结）

您的项目需求