Question

我正在使用vuejs，我有一个函数可以返回从api获得的数据的promise。如何在图表设置中加载数据？

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

但是当我在'labels'键中返回结果时，图表不会加载。如果我更改为静态数组，则可以使用

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;
      })

，然后将其分配给labels属性，该属性需要一个数组（而不是Promise）。在“ then”回调中，您应该做的（而不是简单地返回结果）是将结果分配给相关的数据源（在本例中为contaminacion.data.labels），并使UI呈现新数据（与Vue.js API和生命周期相关联。

使用vue.js中的promise将数据加载到chartjs中

1 个答案: