VueJS - axios: вызов "get" не работает

Question

Мы используем VueJS для создания приложения, вызов axios "get" для извлечения вывода JSON, похоже, не вызывается.Пытался поместить переменные, чтобы перехватить любую ошибку, но они тоже ничего не показывают.«me.resp» дает значение TBD в компоненте Vue, поэтому мы знаем, что выполнение достигает этой точки.

Пожалуйста, дайте нам знать, что мы можем делать неправильно, оцените вашу помощь.

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

Проблема оказалась в CORS (Cross Origin Resource Sharing).Он обнаружился в выходных данных консоли браузера и из-за того, что вызов достиг сервера, но ответ не был передан методу axios get.Я добавил соответствующий заголовок в файл PHP, и теперь он получает данные.Спасибо тем, кто приложил усилия, чтобы помочь.

Answer 2

Трудно сказать по вашему коду, почему вы не видите, что значение обновляется.Я, однако, вижу кучу лишнего кода, который не делает никакой работы для вас.Иногда приведение в порядок может привести к фокусу ошибок.

Во-первых, вы используете var me = this как способ преодоления проблем с областями видимости в обратных вызовах axios.Я вижу, что вы используете функции es6 fat arrow в этих обратных вызовах.Что интересно в них, так это то, что они не связывают свой собственный 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.

Надеюсь, это решит вашу проблему!В противном случае попробуйте поместить некоторые операторы print в обратные вызовы, чтобы увидеть, вызваны ли они!