Vue.js与Axios一起使用来自其他方法的数据

我有一个外部api，它返回一个用户的json，带有一些属性，比如用户名。我想在vue方法中使用此用户名作为url参数，并定义函数getUser（）。我的问题是参数保持未定义

这是我的密码

<script>
import Axios from 'axios-observable'
export default {
  data () {
    return {
      appointments: {},
      event_counter: 0,
      user: ''
  },
  methods: {
    getUser: function () {
      Axios
        .get('http://127.0.0.1:5000/users/get_user')
        .subscribe(response => { this.user = response.data.username })
    },
    getAppointments: function () {
      Axios
        .get('http://127.0.0.1:5000/appointments/get_appointments?user=' + this.user)
        .subscribe(response => { this.appointments = response.data })
    },
    fetchData: function () {
      setInterval(() => {
        this.getAppointments()
      }, 150000)
    }
  },
  mounted () {
    //this.user = this.getUser()
    this.getUser()
    this.fetchData()
  },
  created () {
    //this.user = this.getUser()
    this.getUser()
    this.getAppointments()
  }
}
</script>

从“Axios observable”导入Axios
导出默认值{
数据（）{
返回{
任命：{}，
事件计数器：0，
用户：“”
},
方法：{
getUser:函数（）{
Axios
.get（'http://127.0.0.1:5000/users/get_user')
.subscribe（response=>{this.user=response.data.username}）
},
获取约会：函数（）{
Axios
.get（'http://127.0.0.1:5000/appointments/get_appointments?user=“+this.user）
.subscribe（response=>{this.appoinces=response.data}）
},
fetchData:函数（）{
设置间隔（（）=>{
这是
}, 150000)
}
},
挂载（）{
//this.user=this.getUser（）
this.getUser（）
this.fetchData（）
},
创建（）{
//this.user=this.getUser（）
this.getUser（）
这是
}
}

我使用

返回响应.data

或

数据：this.getUser（）

等尝试了一些变体。使用

{{user}}

在模板中获取用户可以正常工作，但没有帮助。我没有vue/electron vue的任何语法或运行时错误

有什么想法吗？

<script>
import Axios from 'axios-observable'
export default {
  data () {
    return {
      appointments: {},
      event_counter: 0,
      user: ''
  },
  computed: {
    updatedUrl: {
       return `http://127.0.0.1:5000/appointments/get_appointments?user=${this.user}`
    }

  },
  methods: {
    forceGetUsername() {
        return this.user
    },
    getUser: function () {
      Axios
        .get('http://127.0.0.1:5000/users/get_user')
        .subscribe(response => { this.user = response.data.username })
    },
    getAppointments: function () {
      console.log(updatedUrl)
      Axios
        .get(updatedUrl)
        .subscribe(response => { this.appointments = response.data })
    },
 // Below can remain the same
}
</script>

从“Axios observable”导入Axios
导出默认值{
数据（）{
返回{
任命：{}，
事件计数器：0，
用户：“”
},
计算：{
更新URL:{
返回`http://127.0.0.1:5000/appointments/get_appointments?user=${this.user}`
}
},
方法：{
forceGetUsername（）{
返回此.user
},
getUser:函数（）{
Axios
.get（'http://127.0.0.1:5000/users/get_user')
.subscribe（response=>{this.user=response.data.username}）
},
获取约会：函数（）{
console.log（updateUrl）
Axios
.get（updateUrl）
.subscribe（response=>{this.appoinces=response.data}）
},
//下面可以保持不变
}

因此，url似乎正在缓存中，创建后不会更新。因此，我添加了新函数以确保返回最新的值。这不是很理想

---

已将URL添加到computed属性。如果此操作不起作用，则我也会丢失：（

终于找到了解决方案

<script>
import Axios from 'axios'
export default {
  data () {
    return {
      appointments: {},
      event_counter: 0,
      user: 'test'
    }
  },
  methods: {
    getUser: function () {
      return Axios
        .get('http://127.0.0.1:5000/users/get_user')
        .then(response => {
          this.user = response.data.username
          return this.user
        })
    },
    getAppointments: function () {
      this.getUser()
        .then(data => {
          let url = 'http://127.0.0.1:5000/appointments/get_appointments?user=' + data
          Axios
            .get(url)
            .then(response => { this.appointments = response.data })
        })
    },
    fetchData: function () {
      setInterval(() => {
        this.getAppointments()
      }, 150000)
    }
  },
  mounted () {
    this.fetchData()
  },
  created () {
    this.getAppointments()
  }
}
</script>

从“Axios”导入Axios
导出默认值{
数据（）{
返回{
任命：{}，
事件计数器：0，
用户：“测试”
}
},
方法：{
getUser:函数（）{
返回轴
.get（'http://127.0.0.1:5000/users/get_user')
。然后（响应=>{
this.user=response.data.username
返回此.user
})
},
获取约会：函数（）{
this.getUser（）
。然后（数据=>{
让url为空http://127.0.0.1:5000/appointments/get_appointments?user=“+数据
Axios
.get（url）
.then（response=>{this.appoinces=response.data}）
})
},
fetchData:函数（）{
设置间隔（（）=>{
这是
}, 150000)
}
},
挂载（）{
this.fetchData（）
},
创建（）{
这是
}
}

解决方案是更改

getUser（）

的调用，并在arrow函数块

中检索日期。然后（data=>）

。 这个问题中@loan的答案给了我一个提示：

---

非常感谢大家。

.subscribe（response=>{this.user response.data.username}）

这里缺少

=

吗？（在

getUser

函数中）@JamesWhiteley是的，但只是在stackoverflow代码中。一个复制粘贴错误。你能直接在浏览器中访问链接吗？如果是，它会显示你期望的内容吗？@Taulangeci gotcha。我以前从未见过

Axios.get（）.subscribe（）

这是从哪里来的？是

.subscribe（）

a valid function？@user6854465 Yes，也可以通过vue.js。通过

{{user}}

我在呈现的页面上看到用户名。但我需要在fetchData（）中包含此信息方法。记录的url为：

http://127.0.0.1:5000/appointments/get_appointments?user=undefined

OK，在您能够在模板中看到

{{user}}

中的更改之前或之后，您是否可以确认这是在控制台中记录的？可以通过console.log和HTTP头中的请求URL进行确认。OK now in

data（）

part使用类似hello的默认值创建用户。因此，它应该是

user:“hello”

，这样我们可以根据输出的url来确定错误发生的位置。如果它包含hello，则使用原始缓存值。我记得我遇到过类似的问题。如果它仍然未定义，问题就在别处。与sumed:

请求URL:http://127.0.0.1:5000/appointments/get_appointments?user=test