解决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请求接口第一次成功,第二次失败问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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 mounted 调用两次的完美解决办法

    在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题: 情况:在这个页面中出现了mounted 加载了两次的情况: 方法:排除法 首先把 this.$store.commit() 方法注释掉,发现就好了,只加载一次 初步判断是commit  方法导致的 二  验证判断是否正确,不使用commit 方法,该用直接改变变量状态的方法,发现又加载了两次: 再次判断,不是由于commit引起的 三   猜

  • 详解vue配置后台接口方式

    详解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请求接口第一次成功,第二次失败问题

    使用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数据量大卡顿问题 关于接口请求数据过大导致浏览器崩溃 做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 接口跨域请求调试的示例

    在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. 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

随机推荐