VueJS - axios：“get”调用似乎不起作用答案

【问题标题】：VueJS - axios : "get" call does not seem to workVueJS - axios：“get”调用似乎不起作用
【发布时间】：2019-11-01 00:31:09
【问题描述】：

我们正在使用 VueJS 构建应用程序，似乎没有调用 axios “get” 来获取 JSON 输出的调用。试图放置变量以捕获任何错误，但它们也没有显示任何内容。 "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";
            }
        }
    }
});

【问题讨论】：

您在浏览器的网络面板中看到网络调用了吗？
是的，我在每次拨打电话时都会在服务器日志中看到一个新条目。所以它正在访问服务器，但响应没有被设置到对象中。 “me.resp”将“TBD”显示为值，而不是来自调用的响应字符串。

标签： vue.js axios

【解决方案1】：

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

首先是您使用var me = this 来克服axios 回调中的范围问题。我看到您在这些回调中使用 es6 胖箭头函数。这些的有趣之处在于它们不绑定自己的this 上下文。

因此，您应该能够取消 var me = this 并将回调写为 response => this.resp = response。当你在它的时候，我会删除多余的try catch，因为你已经在承诺链中了。结果如下：

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

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

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

【讨论】：

谢谢。我进行了更改，但仍然只将“TBD”分配给“this.resp”对象。我在服务器日志中看到了一个新条目，因此我们知道呼叫已通过。问题似乎与收集响应有关。
方法：{ getAllMembers: function () { this.resp = "TBD"; axios.get("xxxx.com/services/api.php") .then(response => this.resp = response) .catch(error => (this.error = error)); }

【解决方案2】：

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

【讨论】：

啊，好老的 CORS 会让你发疯。很高兴您找到了解决方案！