Загрузите данные в chartjs, используя обещания в vue.js

Question

Я работаю с vuejs, и у меня есть функция, которая возвращает обещание с данными, полученными из API.Как я могу загрузить данные в настройках диаграммы?

apiData.js

API возвращает массив с метками

export default {
    getData : function() {
        var request = require('request-promise');
        return request({
            "method" : "GET",
            "uri" : 'http://localhost:3030/api/historial',
            "json" : true,
            "headers" : { 
                Accept: 'application/json',
                'Content-Type': 'application/json'
            }
        })
    }
}

chartConfig.js

Но когда я возвращаю результат в ключе меток, диаграмма не загружается.Если я перехожу на статический массив работает

import apiData from 'apiData.js';

export const contaminacion = {
    type: 'bar',
    data: {
      labels : apiData.getData()
      .then(function(result){
        return result;
      }),
      datasets: [
        {
          label: 'Test',
          data: [100, 123, 98, 180,],
          backgroundColor: ['#3B52F0'],
          borderColor: ['#36495d'],
          borderWidth: 3
        }
      ]
    },
    options: {
      responsive: true,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            padding: 25,
          }
        }]
      },
      legend: {
        display : false
      },
      maintainAspectRatio: false
    }
  }

  export default contaminacion;

Answer 1

Не работает, потому что это выражение возвращает Promise:

apiData.getData()
      .then(function(result){
        return result;
      })

, и вы присваиваете его свойству label, которое ожидает массив (не Promise).В обратном вызове then, то, что вы должны сделать (вместо простого возврата результата), это присвоить результат соответствующему источнику данных (в данном случае: contaminacion.data.labels) и заставить пользовательский интерфейс отображать новые данные (в соответствии с API-интерфейсом Vue.js и жизненным циклом).