在做东钿贷后系统的时候,我选择了vue-resource这个插件作为与服务器沟通工具,但是听说前端同行说vuejs2.0已经不在维护vue-resource了,vuejs2.0 已经使用了axios了。因为我刚好用的vux这个ui组件。而且vux的ajaxplugin的插件使用的就是axios。不用觉得特别浪费axios,而且以后肯定也是要用axios的。于是我就决定把现用的vue-resource换成vux自带的ajaxplugin。

vux官方文档也说了很清楚并且使用起来很简单,已经整合和vue-resource的写法一样 如下图

直接在main.js做如下修改

然后出现了json数据不接受的问题,于是我就去问人,看看别人是怎么解决的。

有个前端的朋友叫我使用箭头函数,我一开始不太明白怎么改,后来才知道他说的箭头函数就是vue http的另外一种写法,就是把传统写法改成lambda的写法 如下图,对比一下下图红色标注。就知道了。照着这样改,我把所有的都改成这样,确实有效,好使

接下来就是axios的拦截器问题,一直报连接失败,然后也确实没有ajax成功。没ajax成功就别说拦截了,于是又去问人了,一开始就有人说是this指向问题,因为axios并不是Vuejs的插件,而是第三方ajax插件,其实也不算是axios的拦截器问题,确确的说应该还是 自己vuejs的功底不扎实。最后就是this指向不对。代码如下

后面还是问了那位朋友,说把this改成Vue试试,果然好使,如下图:

问题饶了一大圈 很多时候就是方向不对,一直转转转啊,百度还说了要用axios的原始用法。于是我研究了一下,还是有问题。其实根源没解决怎么换都是错的,没有直中要害处。最近发现现在要不就没有问题,要不就是一个问题要半天甚至要一天。但总归还好,算是解决了,应该也会有点收获,唯一要记住的就是以后解决问题一定要直中关键点。要不然 方向越走越远,问题还没解决。一定要好好学习,扎实功底。

关于vue-resource 转变成axios的过程的更多相关文章

  1. 02 Vue之vue对象属性功能&axios数据请求实现

    1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...

  2. vue 组件开发、vue自动化工具、axios使用与router的使用(3)

    一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...

  3. vue实例讲解之axios的使用

    本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...

  4. vue中的ajax - axios

    vue中的ajax - axios axios - 简书 使用 axios 实现 ajax 方案 VUE 更好的 ajax 上传处理 axios.js vue.js 自2.0版本已经不对 vue-re ...

  5. vue中局部封装axios

    Vue中局部配置axios 'use strict' import axios from 'axios'; import { Loading } from 'element-ui'; export c ...

  6. day 84 Vue学习六之axios、vuex、脚手架中组件传值

    Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...

  7. Vue. 之 npm安装 axios

    Vue. 之 npm安装 axios 使用指令: cnpm install axios 

  8. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

  9. 创建Vue项目及封装axios

    1. 始vue化项目 https://www.cnblogs.com/xiaonq/p/11027880.html vue init webpack deaxios # 使用脚手架创建项目 deaxi ...

  10. Vue 中使用 TypeScript axios 使用方式

    Vue 中使用 TypeScript axios 使用方式 方式一 import axios from 'axios'; Vue.prototype.$axios = axios; // 在 .vue ...

随机推荐

  1. Jasper-template

    ylbtech-Jasper: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech. ...

  2. echo命令的简单用法和实例

    在CentOS 6.8版本下,通过实例的形式,展现选项和参数的灵活运用,可以简明的了解echo的用法. 一.语法:echo [SHORT-OPTION]… [STRING]… :echo [选项]…[ ...

  3. 二十五种网页加速方法和seo优化技巧

    一.使用良好的结构 可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显.XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 <start> 和 <e ...

  4. C/C++ Sleep(0)

    Sleep(0) 的意义是放弃当前线程执行的时间片,把自身放到等待队列之中.这时其它的线程就会得到时间片进行程序的程序.Sleep(0)能够降低当前线程的执行速 度,比如:现在系统中有100个线程(先 ...

  5. Redis在windows实现将数据缓存起来定时更新读取

    实现接口的读取存放在内存中,实现了Web网站直接读取内存数据,大大的减少了访问接口带来的等待时间,这个功能是比较实用的 需要下载一下‘类库’及‘Redis-x64-3.2.100程序包’ 百度云材料下 ...

  6. iptable学习

    参考文档 朱双印个人日志 netfilter/iptables架构 位置 钩子函数/规则链 说明 数据包刚刚进入网络层的位置 PREROUTING 在这里处理目标地址转换 经过路由判断,数据包从内核流 ...

  7. es学习(二):elasticsearch 数据存储

    当服务器上 es安装好后,第一步就是数据的增删改查. 有一些概念: 索引:  索引是集群用来存放数据的地方,可以理解为一个数据库. index_type:索引类型,数据在索引中按照type存放.可以理 ...

  8. JS中的MOD运算

    最近研究汉诺塔非递归的时候,看到书上写了个MOD,久违啊,感觉好久没看到过了,都忘了怎么用了. 某人:我知道,这不就是取余嘛,直接%就行了. 嗯......,如果是python语言,你说的很对,但是我 ...

  9. Glassfish Cannot run program "/usr/libexec/StartupItemContext; error=2 , No such file or directory

    临时处理办法 http://sohu.io/questions/3833214/jvm-failed-to-start-java-io-ioexception-cannot-run-program-u ...

  10. 前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享

    前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享 http://codeguide.bootcss.com/#html-doctype HTML 语法 HTML5 doctype ...