google.charts.setOnLoadCallbackを承認する

Question

私はGoogleのチャートAPIを使用しており、行き詰まっています。 APIを使用してスプレッドシートにクエリを行い、データを返します。視覚化のために、Google Chartsではなく、JSダッシュボードフレームワークであるRazorflowを使用しています。データはかなり単純このようなコードを使用して取得する（動作する必要があり、このコードを - スプレッドシートは公開されている）：

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

の列ラベルを保持する配列を作成します

データが取得されたら、私は自分のグラフにデータを使いたいと思っています。問題は、グラフを作成する前にデータを準備しておく必要があることです。私がこれを行った1つの方法は、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); 
}); 

これは機能しますが、チャート機能とデータ読み込みを分離したいと思います。最高の解決策は約束をすることだと思います。そうすれば、私は次のようなことをすることができます：

私は約束をどのように使用するのか完全には分かりません。上記は機能しませんが、私は多くの異なる方法を試しましたが、私は解決策に近づくようには思われません。私は約束を使って正しい道を歩いていますか？もしそうなら、私はこれについてどうやって行くべきですか？

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