带有 Axios 的 Vue.js 使用来自其他方法的数据答案

【问题标题】：Vue.js with Axios use data from other method带有 Axios 的 Vue.js 使用来自其他方法的数据
【发布时间】：2020-02-11 04:32:18
【问题描述】：

我有一个外部 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>

我尝试了return response.data 或data: this.getUser() 等的一些变体。使用{{ user }} 在模板中获取用户工作正常，但没有帮助。我没有来自 vue/electron-vue 的任何语法或运行时错误

有什么想法吗？

【问题讨论】：

.subscribe(response => { this.user response.data.username }) 你在这里缺少= 吗？（在getUser 函数中）
@JamesWhiteley 是的，但只是在 stackoverflow 代码中。复制和粘贴错误。
可以在浏览器中直接访问链接127.0.0.1:5000/users/get_user吗？如果是这样，它是否显示了您的预期？
@TaulantGeci 明白了。而且我以前从未见过Axios.get().subscribe() - 这是从哪里来的？ .subscribe() 是一个有效的函数吗？
@user6854465 是的，并且还通过 vue.js。使用<p> {{ user }} </p>，我在呈现的页面上看到了用户名。但我的 fetchData() 方法中需要这些信息。

标签： vue.js axios observable electron-vue

【解决方案1】：

终于有办法了！

<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>

解决方案是更改getUser() 的调用并在箭头功能块.then(data =>) 中检索日期。本期@loan的回答给了我提示：How to set variable outside axios get。

非常感谢大家。

【讨论】：

【解决方案2】：

<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>

所以似乎 url 被缓存并且一旦创建就不会更新。所以我添加了新函数来确保返回最新的值。不是很理想。

将 URL 添加到计算属性。如果这不起作用，那么我也会迷路:(

【讨论】：

记录的网址是：http://127.0.0.1:5000/appointments/get_appointments?user=undefined
好的，您能否确认在您能够在模板中看到{{user}} 的更改之前或之后将其记录在控制台中？
可以通过console.log和Request URL：在HTTP Header中确认。
ok 现在在data() 部分使用户使用默认值，例如 hello。所以它应该是user: 'hello'，这样我们就可以根据现在输出的 url 来确定 bug 发生在哪里。如果它包含 hello 则使用原始缓存值。我记得遇到过类似的事情。如果仍然未定义，则问题出在其他地方。
按假设工作：Request URL:http://127.0.0.1:5000/appointments/get_appointments?user=test