JavaScript代碼設計異步/回調

Question

這是一種令人尷尬的問題，但我卡住了。 我的背景是託管代碼，我從來沒有學過JavaScript，但我想實現一個小小的項目。 該腳本正在SharePoint 2010上運行，使用JavaScript對象模型從自定義列表中查詢項目，並分別填充Google圖表或表格。 在MSDN和Google Developer的幫助下，我能夠從一個列表中查詢數據並將其可視化。

但是，我無法將概念傳輸到查詢多個列表，合併結果集並最終傳遞給Google API。 在我的代碼中，我創建了一個回調鏈，如showChart-> loadListData-> drawChart。這證明是不好的設計，因爲它不靈活，不能擴展。所有API方法都是異步的，並且沒有返回值，但期望方法名稱在完成後調用。這就是我的堅持和我缺乏知識的地方。

我很滿意每一條評論和答案，如果需要，我也可以提供實際的源代碼。謝謝你在前進，託比

UPDATE如要求通過@Utkanos：

var listItems; 
$(document).ready(function() {  
    ExecuteOrDelayUntilScriptLoaded(loadChartData, "sp.js"); 
}); 
function loadChartData() { 
    var camlQuery = SP.CamlQuery.createAllItemsQuery(); 
    camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name='Year'/><Value Type='Text'>2015</Value></Eq></Where></Query></View>"); 
    loadListData('CustomList', camlQuery, drawChart, readListItemFailed); 
} 
function loadListData(listTitle, camlQuery, onSuccess, onFail) { 
    context = SP.ClientContext.get_current(); 
    var list = context.get_web().get_lists().getByTitle(listTitle); 
    var listItems = list.getItems(camlQuery); 
    context.load(listItems); 
    context.executeQueryAsync(function(sender, args){onSuccess(listItems);}, onFail); 
} 
function drawDpOverviewChart(listItems) { 
    var data; 
    var enumerator = listItems.getEnumerator(); 
    data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Column1'); 
    data.addColumn('number', 'Column2'); 
    var listItem; 
    while (enumerator.moveNext()) { 
      listItem = enumerator.get_current(); 
      data.addRow([listItem.get_item('Title'), Math.round(listItem.get_item('Balance')/10000)/100]); 
    } 
    var options = {'title':'Pretty Chart'}; 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 
function readListItemFailed(sender, args) { 
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
} 

Answer 1

如果使用的是典型的.aspx頁面上SP 2010，你有一些可用的工具，

如MicrosoftAjax.js和使用REST API_spPageContextInfo

，您可以加入在查找字段列表，其中包括兩份名單的領域在一個查詢

下面是一個例子網址爲呼叫休息...

'/_vti_bin/ListData.svc/MI_Projects?$expand=ModifiedBy&$filter=ModifiedBy/Id eq 738'

這個調用實際上「連接」列表中MI_Projects到UserInformationList通過「擴大」 ModifiedBy

所以數據恢復時，您可以訪問任何用戶信息字段，即
row.ModifiedBy.Name

這可以用查找字段的自定義列表來完成，以及

撥打電話，您可以使用Sys.Net.WebRequest類從MicrosoftAjax
這個類還允許您將變量傳遞給回調

看到下面的代碼片段...

function makeCall() { 

    // Sys.Net.WebRequest is from MicrosoftAjax.js 
    var webRequest = new Sys.Net.WebRequest(); 
    webRequest.get_headers()['Cache-Control'] = 'no-cache'; 
    webRequest.get_headers()['Accept'] = 'application/json'; 
    webRequest.get_headers()['Content-Type'] = 'application/json'; 
    webRequest.set_url(_spPageContextInfo.webServerRelativeUrl + '/_vti_bin/ListData.svc/MI_Projects?$expand=ModifiedBy&$filter=ModifiedBy/Id%20eq%20738'); 

    // use the 'user context' to pass variables you want available in the callback 
    webRequest.set_userContext({ 
    Title: 'variable to pass to completed callback' 
    }); 
    webRequest.add_completed(restComplete); 
    webRequest.invoke(); 

} 

// the first argument of callback is the Sys.Net.WebRequestExecutor class 
function restComplete(executor, eventArgs) { 
    if (executor.get_responseAvailable()) { 
    if (executor.get_statusCode() === 200) { 

     // get variable passed via user context 
     var variablePassed = executor.get_webRequest().get_userContext().Title; 

     // i.e. -- build google table 
     // add rows received from rest (forEach is from MicrosoftAjax.js) 
     // list results array = executor.get_object().d.results 

     Array.forEach(executor.get_object().d.results, function (row) { 

     data.addRow(row.Title, row.Id, row.ModifiedBy.Name); 

     }, this); 
    } 
    } 
}