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~

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

(0)

相关推荐

  • vue-resource调用promise取数据方式详解

    用了好久的vue-resource,好像每一次使用的时候,都要去看一下上一次是怎么写的,具体的语法过不了多久又忘记了,甚至不知道其中的原理,只知道一些简单的使用,一会儿用ES6的语法,一会儿又用传统的语法,为了改变这种不良的习惯,并理清vue-resource使用promise取数据的原理,今天把这一块整理一下. 先来说说 vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的

  • Vue2.0利用vue-resource上传文件到七牛的实例代码

    本文介绍了Vue2.0利用vue-resource上传文件到七牛,分享给大家,希望对大家有帮助 关于上传,总是有很多可以说道的. 16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构.但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化.为什么呢?因为兼容性.没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器.否则,上传部分完全可以利用Vue-Resource以及Form

  • 谈谈Vue.js——vue-resource全攻略

    概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-re

  • 详解vue-Resource(与后端数据交互)

    单来说,vue-resource就像jQuery里的$.ajax,用来和后端交互数据的.可以放在created或者ready里面运行来获取或者更新数据... vue-resource文档:https://github.com/vuejs/vue-resource/blob/master/docs/http.md 结合vue-router data(){ return{ toplist:[], alllist:[] } }, //vue-router route:{ data({to}){ //并

  • Vue-resource实现ajax请求和跨域请求示例

    vue-resource是Vue提供的体格http请求插件,如同jQuery里的$.ajax,用来和后端交互数据的. 在使用时,首先需要安装vue-resource插件 1.在项目跟目录上安装: npm install vue-resource 2.引入resource插件 import VueResource from 'vue-resource'; Vue.use(VueResource) 3.发送请求: this.$http.get("http://www.vrserver.applinz

  • VUE中使用Vue-resource完成交互

    本文介绍了VUE中使用Vue-resource完成交互,分享给大家,具体如下 使用vue-resource 引入vue-resource vue-resource就像jQuery里的$.ajax,是用来跟后端交互数据的,vue-resource是vue的一个插件,所以我们在开始使用vue之前,需要先引入vue-resource.js这个文件 <script src='js/vue.js'></script> <script src='js/vue-resource.js'&g

  • Vue resource中的GET与POST请求的实例代码

    前言:vue-resource 使用比 jQuery 更加简洁的方式实现了异步请求功能,还提供了比如 interceptors 这样处理请求过程中行为的功能.下面介绍下vue-resource中常用的GET与POST请求使用与封装方法. 访问 Github获取最新的开发文件与文档 特征: 支持 Promise API 和 URI Templates 支持请求过程中使用拦截器(interceptoers) 支持 Firefox,Chrome,Safari,Opera 和 IE9+ 非常的小(压缩后

  • Vue2学习笔记之请求数据交互vue-resource

    基本语法 必须引入一个库:vue-resource github地址 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get('/so

  • 详解vue与后端数据交互(ajax):vue-resource

    本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: welcomet to vue!!! <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <sc

  • Vue插件报错:Vue.js is detected on this page.问题解决

    Vue插件报错:Vue.js is detected on this pag 下载Vue插件 下载地址:https://chrome.pictureknow.com/ 将下载好的crx文件拖进拓展程序 首先去https://www.bilibili.com/  验证一下Vue.js.devtools是否安装好(看插件的颜色).因为B站是基于Vue开发的. 解决:Vue.js not detected 打开"允许访问文件网址","收集各项错误". 解决:Vue.js

  • Vue中Vue.extend()的使用及解析

    目录 Vue Vue.extend()的使用 应用场景 简单实用 使用Vue.extend()编写vue插件 Vue.extend() 如何编程式使用组件呢 具体使用 Vue Vue.extend()的使用 Vue.extend 属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些.但是在一些独立组件开发场景中,Vue.extend + $mount 这对组合是我们需要去关注的. 应用场景 在 vue

  • vue插件tab选项卡使用小结

    本文实例为大家分享了vue插件tab选项卡的使用方法,供大家参考,具体内容如下 基本用法 <template> <tab :options="tabOpt" :state.sync="stateIndex"></tab> </template> <script type="text/babel"> import tab from 'components/tab_touch'; expor

  • 使用vue-cli编写vue插件的方法

    利用vue组件创建模板,使用webpack打包生成插件再全局使用 1.vue init webpack-simple 生成项目目录 2.调整目录结构 3.修改webpack.config.js var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, './dist')

  • 基于Vue插入视频的2种方法小结

    屏幕快照 2019-04-01 下午8.06.02.png 方法一:iframe插入视频链接 1.1 ##### 当前播放的视频 <div class="video-wrap" style="width:80%;float:left;oveflow:hidden;"> <iframe :src="this.activeVideo.youtobeURL" frameborder='0' allow='autoplay;encryp

  • Vue插件写、用详解(附demo)

    Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一段代码等 2.使用方法 总体流程应该是: [声明插件]--[写插件]--[注册插件]--[使用插件] 写插件和声明插件是同步的,然后注册到Vue对象中(不用担心重复注册),最后在写Vue组件的时候使用写的插件 声明插件 先写一个js文件,这个js文件就是插件文件,里面的基本内容如下: /* 说明: * 插件文件:service

  • 实例教学如何写vue插件

    在学习之前,先问问自己,为什么要编写vue的插件. 在一个项目中,尤其是大型项目,有很多部分需要复用,比如加载的loading动画,弹出框.如果一个一个的引用也稍显麻烦,而且在一个vue文件中引用的组件多了,会显得代码臃肿,所以才有了封装vue插件的需求. 说完需求,就来看看具体实现.目前我尝试了两种不一样的插件编写的方法,逐个介绍. 这是我的项目目录,大致的结构解释这样,尽量简单,容易理解. 一个是loading插件,一个是toast插件,不同的地方在于:loading插件是作为组件引入使用,

  • 第一个Vue插件从封装到发布

    前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue-area-select     欢迎指正 准备 Vue官网插件部分的介绍虽然很简单,但是还是好好刷一遍的.由于此插件较为简单,主要用到以下两个点: 1 . Vue的插件需要有一个公开方法install 2 . 通过全局方法 Vue.use() 使用插件,在下文有栗子 创建工程 初始化工程 vue

  • Vue 创建组件的两种方法小结(必看)

    创建组件的两种方法小结 1.全局注册 2.局部注册 var child=Vue.extend({}) var parent=Vue.extend({}) Vue.extend() 全局方法 生成构造器,创建子类 使用基础 Vue 构造器,创建一个"子类". 这样写非常繁琐.于是vue进行了简化 使用Vue.component()直接创建和注册组件: Vue.component(id,options) 全局方法 用来注册全局组件 id 是string类型,即是注册组件的名称 option

  • Vue.js 表单控件操作小结

    概念说明 v-model指令:在表单控件元素上创建双向数据绑定.v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</tit

随机推荐