时间戳

首页 > 解决方案 > VueJS - axios：“get”调用似乎不起作用

vue.js - VueJS - axios：“get”调用似乎不起作用

问题描述

我们正在使用 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";
            }
        }
    }
});

标签： vue.jsaxios

解决方案

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

其中最重要的是您将其 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 进行转译。

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

推荐阅读