关于vue-resource 转变成axios的过程

在做东钿贷后系统的时候,我选择了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的原始用法。于是我研究了一下,还是有问题。其实根源没解决怎么换都是错的,没有直中要害处。最近发现现在要不就没有问题,要不就是一个问题要半天甚至要一天。但总归还好,算是解决了,应该也会有点收获,唯一要记住的就是以后解决问题一定要直中关键点。要不然 方向越走越远,问题还没解决。一定要好好学习,扎实功底。

时间: 2024-11-08 12:07:59

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

vue实例讲解之axios的使用

本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm install axios --save-dev 2.页面中引入axios import axios from 'axios' 3.为了方便使用我们将axios挂到vue.prototype.$http这个原型上 Vue.prototype.$http = axios 4.在页面中直接调用axio

vue resource 携带cookie请求 vue cookie 跨域

vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push(function(request, next) {//拦截器 // 跨域携带cookie request.credentials = true; next() }) 以下是针对每个请

vue cli3.0用axios调用本地json数据一直报404

最近在基于vue做后台管理系统时,用了vue cli3.0用axios调用本地json数据一直报404,市面上所有的解决办法都没用,快崩溃了,结果最后发现原因是,vue cli3.0 public 文件夹才是静态资源文件,问题解决,记录一下,以后不再踩坑. 最近发现好多人都踩这个坑,索性把我的结构发出来. 参考地址:https://www.love85g.com/?p=1500 原文地址:https://www.cnblogs.com/dapengFly/p/11359456.html

vue 引入Element-ui和axios

vue create project_name npm install    sass-loader node-sass     sass fibers npm install element-ui npm install axios 完整引入 在 main.js 中写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vu

从vue resource到axios

Vue中如何使用axios发送jsonp跨域验证

https://cnodejs.org/topic/5930430f03dba3510d8a62c6 在使用axios发送请求时,服务器端设置 res.header("Access-Control-Allow-Origin", "*");可以正确得到结果 当服务器端不设置允许跨域时,使用jsonp方式发送就不行了,提示错误如下 XMLHttpRequest cannot load http://localhost:3000/axios?cb=cb. No 'Acce

vue.js中使用Axios

Axios为vue2.0官方推荐HTTP请求工具,之前的是vue-resource 在使用的过程中总结了两种使用方式: 1.和vue-resource使用类似 引入:import axios from 'axios'; Vue.prototype.$http = axios; 使用:this.$http.get(URL).then(response => { // success callback }, response => { // error callback }); 2.在你需要的组件

vue项目实践-添加axios封装api请求

安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安装)转换后提交格式为 application/x-www-form-urlencoded 通过设置 transformRequest 属性 data => qs.stringify(data) 可以正常表单形式提交 import axios from 'axios' const instance =

vue part3.3 ajax (axios) 及页面异步显示

App.vue <template> <div> <div v-if="!repoName">loading</div> <div v-else>most start repo is <a :href="repoUrl">{{repoName}}</a></div> </div> </template> <script> import