解决vue请求接口第一次成功,第二次失败问题
使用vue去请求接口发现问题来了:
我请求只能请求一次,然后在按按钮去请求的时候发现
502(这个是接口定义的)502就是传了空的值过来 这个是其中一种情况,还有别的情况 你看了 大可试试我这样的办法
然后发现我前端代码没有问题,接口代码也没有问题
data() { return { form: { old_password: '', new_password: '', confirm_password: '' } } },
就是把值在重新赋值回去就可以解决了
this.$http.post('/api/users/modifyPassword', this.form, (res) => { this.form = { old_password: this.form.old_password, new_password: this.form.new_password, confirm_password: this.form.confirm_password } if (is.object(res)) { console.log(res) if (res.code === '0') { this.$router.push({ path: '/my/' }) this.$toast.show(res.msg) } else { this.$toast.show(res.msg) } } })
补充知识:vue中使用axios请求接口,请求会发送两次
vue中使用axios请求接口,请求会发送两次的问题
浏览器分为简单请求以及非简单请求:
解决方案:
跨域请求需要先发一次Option预请求,OPTIONS是检验是否允许跨域的,如果不希望OPTIONS请求, 直接让后端遇到option直接返回就可以了,前端可不做处理。
以上这篇解决vue请求接口第一次成功,第二次失败问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue mounted 调用两次的完美解决办法
在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题: 情况:在这个页面中出现了mounted 加载了两次的情况: 方法:排除法 首先把 this.$store.commit() 方法注释掉,发现就好了,只加载一次 初步判断是commit 方法导致的 二 验证判断是否正确,不使用commit 方法,该用直接改变变量状态的方法,发现又加载了两次: 再次判断,不是由于commit引起的 三 猜
-
详解vue配置后台接口方式
在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } }, 在工程目录下 > src > api > user.js - 接口写法 import axios from 'axios' export
-
VUE UPLOAD 通过ACTION返回上传结果操作
通过Upload 的action方法 返回不了结果,可以通过on-success方法中获取返回结果 <Upload accept=".xls, .xlsx" :action="uploadUrl" :on-success="onSuccess" :on-error="handleError" :before-upload="beforeUpload" style="float:right&q
-
vue等两个接口都返回结果再执行下一步的实例
next 只能調用一次,這邊可以用 Promise.all 解決,等待兩個異步操作都返回結果後再 next: beforeRouteEnter (to, from, next) { // Promise.all 會等到數組內的 Promise 都 resolve 後才會繼續跑(then) Promise.all([ main._base({ methodName: 'QueryProductInfo', productId: to.params.id }), main._base({ metho
-
解决vue请求接口第一次成功,第二次失败问题
使用vue去请求接口发现问题来了: 我请求只能请求一次,然后在按按钮去请求的时候发现 502(这个是接口定义的)502就是传了空的值过来 这个是其中一种情况,还有别的情况 你看了 大可试试我这样的办法 然后发现我前端代码没有问题,接口代码也没有问题 data() { return { form: { old_password: '', new_password: '', confirm_password: '' } } }, 就是把值在重新赋值回去就可以解决了 this.$http.post('
-
解决vue.js 数据渲染成功仍报错的问题
最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级
-
vue请求接口并且携带token的实现
目录 一.处理跨域问题 二.登录获取token 三.开发登录页面存储token 四.通过token进行路由的拦截 一.处理跨域问题 1.在vue2.0的config文件夹下面的index.js文件里面或者在vue3.0中新建vue.config.js文件,写入以下代码: module.exports = { devServer: { open: true, port: 8080, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: { //配置跨域 '/apis': { targe
-
SpringBoot接口路径重复,启动服务器失败的解决
目录 SpringBoot接口路径重复,启动服务器失败 问题 原因 解决方法 启动服务器失败报错 spring-boot Failed to start component [StandardServer[-1]] 问题 解决办法 SpringBoot接口路径重复,启动服务器失败 问题 WARN [localhost-startStop-1] o.a.c.loader.WebappClassLoaderBase:180- The web application [ROOT] appears to
-
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据.检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!! 我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据.因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码: //页面1 beforeCreate () {
-
vue中循环请求接口参数问题及解决
目录 vue 循环请求接口参数问题 vue for循环请求同一url参数不同但参数覆盖 vue 循环请求接口参数问题 今天遇到一个循环请求问题 先上代码 function(){ var num = this.eventType.length; for (var i = 0; i < num; i++) { arr.eventType = this.eventType[i]; console.log(arr.eventType, i, "
-
vue关于接口请求数据过大导致浏览器崩溃的问题
目录 关于接口请求数据过大导致浏览器崩溃 解决的方法也很简单 一行代码解决vue数据量大卡顿问题 关于接口请求数据过大导致浏览器崩溃 做vue后台的时候,有一个导出所有用户数据的需求,我这里是前端导出,用的是iview的exportCsv方法,在这里说说遇到的问题吧. 首先看这里,查询的时候,Size有155MB,最开始在谷歌.火狐之类的上面测试,一切正常,后来被提出在360浏览器里页面直接崩溃. 解决的方法也很简单 因为拿到后端传过来的数组后,赋值给了data里面的一个数组,即this.xxx
-
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢? 这是因为CORS跨域分为 简单跨域请求和复杂跨域请求: 简单跨域不会发送options请求,复杂跨域会发送一个预检请求options. 1.简单跨域满足的条件 1.请求方式是以下三种之一: HEAD GET POST 2.HTTP的头信息不超出以下几种字段 Accept Accept-Lan
-
vue proxyTable 接口跨域请求调试的示例
在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', //proxyTable: {}, proxyTable: proxyConfig.pro
-
解决vue中使用proxy配置不同端口和ip接口问题
问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081 或者 http://192.168.10.30:9999等 解决问题: 在vue.config.js中配置不同的端口号 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devSe
随机推荐
- jstl EL表达式遍历Map的方法
- asp.net 请求输入到输出的全过程及httpHandler和httpModuler详细介绍
- Yii2分页的使用及其扩展方法详解
- ThinkPHP令牌验证实例
- 跟老齐学Python之做一个小游戏
- Docker 教程之镜像创建及修改详细介绍
- 查杀rundllfromwin2000病毒的方法
- MySQL中基本的用户和权限管理方法小结
- C++中发声函数Beep用法
- jquery.zclip轻量级复制失效问题
- CentOS 7.2下安装部署邮件服务器(Postfix)的步骤详解
- 解决MySQL忘记密码问题的方法
- Android 关于ExpandableListView刷新问题的解决方法
- Java实现Andriod带看括弧的计算器代码
- Node.js静态服务器的实现方法
- jQuery中元素选择器(element)简单用法示例
- PHP文件类型检查及fileinfo模块安装使用详解
- 易语言解析音悦台MV提供超清下载地址的代码
- python实现串口自动触发工作的示例
- Python 可变类型和不可变类型及引用过程解析