javascript - 如何多次调用 executeQueryAsync

Question

首先对糟糕的标题感到抱歉，只是想不出更好的。

我是 JavaScript 的新手，这可能是我不明白这个的唯一原因 - 请不要攻击我。

我想做的只是使用 JavaScript 客户端对象模型从 Sharepoint 站点查询多个 Sharepoint 列表(甚至可能多次)。我能够在网络上找到许多工作示例，了解如何从列表中检索数据并使用它。但是我对异步和回调概念非常陌生，无法将这些概念转移到我的需要中。我真的必须复制所有变量和函数 x 次吗？

这是我一次通话得到的结果:

var listAItems;

$(document).ready(function() {      
  ExecuteOrDelayUntilScriptLoaded(LoadChartData, "sp.js");
});

function LoadChartData() {
  context = SP.ClientContext.get_current();
  var listA = context.get_web().get_lists().getByTitle("ListA");
  var camlQuery = SP.CamlQuery.createAllItemsQuery();
  this.listAItems = listA.getItems(camlQuery);

  context.load(listAItems);
  context.executeQueryAsync(ReadListAItemSucceeded, ReadListItemFailed);
}

function ReadListAItemSucceeded(sender, args) {
  var listAItemsCollection = listAItems.getEnumerator();

  while (listAItemsCollection.moveNext()) {
    var listAItem = listAItemsCollection.get_current();
    //do something with each listItem
  }
}

function ReadListItemFailed(sender, args) {
  alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

我最终复制了所有代码以使其运行，但这不是可行的方法，因为它只是一团糟 - 必须有一个实际的设计。

var listAItems;
var listBItems;

$(document).ready(function() {      
  ExecuteOrDelayUntilScriptLoaded(LoadChartData, "sp.js");
});

function LoadChartData() {
  context = SP.ClientContext.get_current();
  var listA = context.get_web().get_lists().getByTitle("ListA");
  var camlQuery = SP.CamlQuery.createAllItemsQuery();
  this.listAItems = listA.getItems(camlQuery);

  context.load(listAItems);
  context.executeQueryAsync(ReadListAItemSucceeded, ReadListItemFailed);

  context2 = SP.ClientContext.get_current();
  var listB = context.get_web().get_lists().getByTitle("ListB");
  var camlQuery2 = SP.CamlQuery.createAllItemsQuery();
  this.listBItems = listB.getItems(camlQuery2);

  context2.load(listBItems);
  context2.executeQueryAsync(ReadListBItemSucceeded, ReadListItemFailed);
}

function ReadListAItemSucceeded(sender, args) {
  var listAItemsCollection = listAItems.getEnumerator();

  while (listAItemsCollection.moveNext()) {
    var listAItem = listAItemsCollection.get_current();
    //do something with each listItem
  }
}

function ReadListBItemSucceeded(sender, args) {
  var listBItemsCollection = listBItems.getEnumerator();

  while (listBItemsCollection.moveNext()) {
    var listBItem = listBItemsCollection.get_current();
    //do something with each listItem
  }
}

function ReadListItemFailed(sender, args) {
  alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

为什么我要查询多个列表很明显，查询同一个列表的原因是为了提供不同的 CAML 表达式，例如不同的 where 条件。

非常感谢您!

Answer 1

Async 概念并不难，你必须想:“执行此操作并在完成时调用此函数”，然后将概念应用于变量的可见性，在 javascript 中这称为 closure

在你的代码中你可以这样做(警告我没有测试下面的代码)

$(document).ready(function() {      
  ExecuteOrDelayUntilScriptLoaded(loadChartData, "sp.js");
});

function loadChartData() {
    loadListData("listA", listASuccess, globalError);
    loadListData("listB", listBSuccess, globalError);
}

function loadListData(listName, onSuccess, onFail) {
  context = SP.ClientContext.get_current();
  var list = context.get_web().get_lists().getByTitle(listName);
  var camlQuery = SP.CamlQuery.createAllItemsQuery();
  var listItems = list.getItems(camlQuery);

  context.load(listAItems);
  
  context.executeQueryAsync(
        function(sender, args) { 
            // listItem is defined on same closure, you do not need to declare globally
            onSuccess(listItems); 
        }, 
        onFail
  );
  
}

function listASuccess(data) {
  
  var listAItemsCollection = data.getEnumerator();

  while (listAItemsCollection.moveNext()) {
    var listAItem = listAItemsCollection.get_current();
    //do something with each listItem
  }
  
  // You can use also forEach like this
  // data.forEach(function(listItem) {
  //    //do something with each listItem
  // });
}

function listBSuccess(data) {
  
  var listBItemsCollection = data.getEnumerator();

  while (listBItemsCollection.moveNext()) {
    var listBItem = listBItemsCollection.get_current();
    //do something with each listItem
  }
  
  // You can use also forEach like this
  // data.forEach(function(listItem) {
  //    //do something with each listItem
  // });
}

function globalError(sender, args) {
  alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

见 closure见 forEach