欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在vuecli中使用axios请求发送成功,获取不到返回值的问题

程序员文章站 2022-07-02 15:34:20
...
首先我先描述一下我遇到的问题,以便读者对症下药:
在vuecli中使用axios,请求成功,network也能看见返回的值,但是进入.then(res)中时,res时undefined,原代码如下:
axios.post('http://localhost:12612/api/register', this.ruleForm)
    .then((res) => {  //res为undefined
    debugger
    console.log(res)
    })
    .catch((error) => {
       console.log(error)
    })

查资料说是异步的问题什么的,我现在也不确定,先分享一下解决方案

方案一:axios 改写为 Vue 的原型属性

在main.js中Vue.prototype.$http = axios
使用

this.$http.post('http://localhost:12612/api/register', this.ruleForm)
    .then((res) => {  //res为undefined
    debugger
    console.log(res)
    })
    .catch((error) => {
       console.log(error)
    })
方案二:结合vue-axios使用
npm install vue-axios --save

在main.js中引入

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios)

使用方法:register.vue

import axios from 'axios'
import vueAxios from 'vue-axios'
.
.
.
this.axios.post('http://localhost:12612/api/register', this.ruleForm)
then((res) => {
    console.log(res)
})
.catch((error) => {
     console.log(error)
 })
方案三:结合vuex使用

from