承诺 google.charts.setOnLoadCallback

Question

我一直在使用谷歌的图表 API 并且已经走到了尽头。 我使用 API 来查询电子表格并返回一些数据。 对于可视化，我使用 Razorflow——一个 JS 仪表板框架——而不是谷歌图表。 使用这样的代码获取数据非常简单（此代码应该可以工作 - 电子表格是公开的）：

function initialize() {
// The URL of the spreadsheet to source data from.
var myKey = "12E2fE8GWuPvXJoiRZgCZUCFhRKlW69uJAm7fch71jhA"
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/" + myKey + "/gviz/tq?sheet=Sheet1");
query.setQuery("SELECT A,B,C WHERE A>=1 LIMIT 1");
query.send(function processResponse(response) {

    var KPIData = response.getDataTable();
    var KPIName = [];
    myNumberOfDataColumns = KPIData.getNumberOfColumns(0) - 1;        

        for (var h = 0; h <= myNumberOfDataColumns ; h++) {
        KPIName[h] = KPIData.getColumnLabel(h);
    };  
});
};     
google.charts.setOnLoadCallback(initialize);

以上将创建一个数组，其中包含 A、B 和 C 列的列标签。

获取数据后，我想将数据用于我的图表。 问题是，我需要在创建图表之前准备好数据。 我这样做的一种方法是在调用google.charts.setOnLoadCallback(initialize)之前创建图表，然后使用回调内部的数据填充图表。 像这样：

//create dashboard
StandaloneDashboard(function (db) {
//create chart - or in this case a KPI
var firstKPI = new KPIComponent();
//add the empty component
db.addComponent(firstKPI);
//lock the component and wait for data
firstKPI.lock();


function initializeAndPopulateChart() {
// The URL of the spreadsheet to source data from.
var myKey = "12E2fE8GWuPvXJoiRZgCZUCFhRKlW69uJAm7fch71jhA"
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/" + myKey + "/gviz/tq?sheet=Sheet1");
query.setQuery("SELECT A,B,C WHERE A>=1 LIMIT 1");
query.send(function processResponse(response) {

    var KPIData = response.getDataTable();
    var KPIName = [];
    myNumberOfDataColumns = KPIData.getNumberOfColumns(0) - 1;        

        for (var h = 0; h <= myNumberOfDataColumns ; h++) {
        KPIName[h] = KPIData.getColumnLabel(h);
    };
    //use label for column A as header
    firstKPI.setCaption(KPIName[0]);
    //Set a value - this would be from the query too
    firstKPI.setValue(12);
    //unlock the chart
    firstKPI.unlock();  
});
};     
google.charts.setOnLoadCallback(initializeAndPopulateChart);
});

它有效，但是，我想将图表功能与数据加载分开。 我想最好的解决方案是创建一个承诺。 这样我就可以做这样的事情：

//create dashboard
StandaloneDashboard(function (db) {

function loadData() {
return new Promise (function (resolve,reject){
    //get the data, eg. google.charts.setOnLoadCallback(initialize);
})
}

loadData().then(function () {
    var firstKPI = new KPIComponent();
    firstKPI.setCaption(KPIName[0]);
    firstKPI.setValue(12);
    db.addComponent(firstKPI); 
    })
});

应该很明显，我不完全理解如何使用承诺。 以上不起作用，但是。 我尝试了很多不同的方法，但是，我似乎没有更接近解决方案。 我在使用 Promise 方面走在正确的轨道上吗？ 如果是这样，我应该怎么做？

Answer 1

在承诺中，您需要在异步作业完成时调用resolve或reject函数。

function loadData() {
  return new Promise (function (resolve,reject){
    query.send(function() {
      //...
      err ? reject(err) : resolve(someData);
    });
  })
}

然后你可以做

loadData().then(function (someData) {
    //here you can get async data
  }).catch(function(err){
    //here you can get an error
  });
});

Answer 2

new Promise(resolve => {
    google.charts.setOnLoadCallback(resolve);
}).then(getValues);