Question

我们正在使用VueJS来构建应用程序，用于获取JSON输出的axios“ get”调用似乎没有被调用。试图放置变量以捕获任何错误，但它们也不显示任何内容。 “ me.resp”在Vue组件中给出了值TBD，因此我们知道执行已达到该点。

请让我们知道我们可能在做错什么，感谢您的帮助。

import Vue from 'vue';
import axios from 'axios';

export const MY_CONST = 'Vue.js';
export let memberList = new Vue({
    el: '#members',
    data: {
        members: null,
        resp: null,
        error: "No"
    },

    mounted: function () {
        this.getAllMembers();
    },

    methods: {
        getAllMembers: function () {
            var me = this;
            try {
                me.resp = "TBD";
                axios.get("https://xxxxx.com/services/api.php")
                            .then(response => (me.resp = response))
                            .catch(error => (me.error = error));
            } catch (error) {
                me.error = "Some error";
            }
        }
    }
});

Answer 1

很难从代码中看出为什么看不到值正在更新。但是，我确实看到了很多多余的代码，这些代码对您没有任何帮助。有时整理一下可以使错误成为焦点。

其中的iffrst是您使用var me = this作为克服axios回调中范围界定问题的一种方式。我看到您在这些回调中使用了es6粗箭头功能。这些有趣的是，它们不绑定自己的this上下文。

因此，您应该可以取消使用var me = this，而只需将回调写为response => this.resp = response。当您在使用它时，我将删除多余的try catch，因为您已经陷入了Promise链。结果如下：

methods: {
  getAllMembers() {
    this.resp = "TBD";
    axios.get("https://etc")
      .then(res => this.resp = res)
      .catch(err => this.error = err)
  }
}

请注意，并非所有浏览器都支持使用ES6功能，并且可能需要使用babel / webpack进行编译。

希望这可以解决您的问题！否则，请尝试在回调中放入一些打印语句，以查看是否被调用！

Answer 2

问题出在与CORS（跨源资源共享）有关。它显示在浏览器控制台的输出中，并且由于调用已到达服务器，但未将响应传递给axios get方法。我在PHP文件中添加了适当的标头，现在它正在获取数据。感谢那些努力的帮助。

VueJS-axios：“获取”调用似乎无效

2 个答案: