解决vue请求接口第一次成功,第二次失败问题

 更新时间:2020年09月08日 10:31:26   作者:An_s  
这篇文章主要介绍了解决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 实现滚动到底部翻页效果(pc端)

    vue 实现滚动到底部翻页效果(pc端)

    这篇文章主要介绍了pc端vue 滚动到底部翻页效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • 详解Electron中如何使用SQLite存储笔记

    详解Electron中如何使用SQLite存储笔记

    这篇文章主要为大家介绍了Electron中如何使用SQLite存储笔记示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue组件值变化但不刷新强制组件刷新的问题

    vue组件值变化但不刷新强制组件刷新的问题

    这篇文章主要介绍了vue组件值变化但不刷新强制组件刷新的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue3项目中ESLint配置和使用

    vue3项目中ESLint配置和使用

    在用vite创建vue3项目时已经选择了添加ESLint,本文就来介绍一下ESLint在项目中需要怎样配置和使用,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • 关于Vue3过渡动画的踩坑记录

    关于Vue3过渡动画的踩坑记录

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于Vue3过渡动画踩坑的相关资料,需要的朋友可以参考下
    2021-12-12
  • Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

    Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

    这篇文章主要介绍了Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表) ,需要的朋友可以参考下
    2017-05-05
  • VUE使用draggable实现组件拖拽

    VUE使用draggable实现组件拖拽

    这篇文章主要为大家详细介绍了VUE使用draggable实现组件拖拽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • WebStorm启动vue项目报错代码:1080 throw err解决办法

    WebStorm启动vue项目报错代码:1080 throw err解决办法

    在使用webstorm新建vue项目时常会遇到一些报错,下面这篇文章主要给大家介绍了关于WebStorm启动vue项目报错代码:1080 throw err的解决办法,文中将解决办法介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Vue 实现把表单form数据 转化成json格式的数据

    Vue 实现把表单form数据 转化成json格式的数据

    今天小编就为大家分享一篇Vue 实现把表单form数据 转化成json格式的数据,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue中前端与后端如何实现交互

    Vue中前端与后端如何实现交互

    这篇文章主要介绍了Vue中前端与后端如何实现交互,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论