将数据加载到使用承诺在vue.js chartjs

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

这是行不通的，因为这个表达式返回一个承诺：

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

而你将其分配给标签属性，它预计阵列（未许诺）。在“然后”回调，你应该做的（而不是简单地返回结果）来分配结果的相关数据源（在这种情况下：contaminacion.data.labels），使UI呈现新的数据（与Vue.js API和生命周期）的相关性。