将多个AJAX调用的结果连接到单个变量中

Question

我想调用2个递归API调用来生成JQuery数据表页面日期范围2016-2021。下面这些API调用上的年份过滤器拆分API响应，以克服Sharepoint Online建立的5000项列表限制阈值。

我无法将所有结果连接到var allResults中。使用下面的代码，我只得到2021年生成的结果。然而，我可以看到，在2016-2021年期间，通过Chrome XHR进行了12次成功的API调用，但结果并没有连接到var中。

var results;
var allResults = [];
$(document).ready(function () {
load();
});
function load() {
for (let year = 2016; year < 2022; year++) {
var yearh1 = $.ajax({    
url: "SPO_Site/_api/web/lists/getbytitle('List_Name')/items?$top=5000&$select=*&$filter=(Col_Date%20ge%20datetime'"+(year-1)+"-12-31T20:00:00.000Z')%20and%20(Col_Date%20lt%20datetime'"+year+"-06-01T00:00:00.000Z')",    
type: "GET", dataType: "json", headers: {"accept": "application/json;odata=verbose"},    
success: mySuccHandler, error: myErrHandler}); 
var yearh2 = $.ajax({    
url: "SPO_Site/_api/web/lists/getbytitle('List_Name')/items?$top=5000&$select=*&$filter=(Col_Date%20ge%20datetime'"+year+"-06-01T00:00:00.000Z')%20and%20(Col_Date%20le%20datetime'"+year+"-12-31T00:00:00.000Z')",    
type: "GET", dataType: "json", headers: {"accept": "application/json;odata=verbose"},    
success: mySuccHandler, error: myErrHandler}); 
}
function mySuccHandler(a) {
results = a.d.results;
if (allResults.length > 0)
allResults = allResults.concat(results);
else
allResults = results;        
}
function myErrHandler(data, errorCode, errorMessage) {
console.log("Could not complete call: " + errorMessage);        
};
$.when(yearh1, yearh2).done(function(a1, a2){
// console.log(allResults);
$('#table_id').DataTable({
data:allResults,
dom: 'Bfrtip',
columns: [
{ data: "Title" },
{ data: "Reg_x0020_No" },
]
});
});  
};

附录

在阅读了一些答案后，我添加了一个var allRequests。这现在允许我存储来自所有API调用的结果，但不连接结果并将其传递给数据表以进行表呈现。

var results;
var allResults = [];
var allRequests = [];
$(document).ready(function () {
load();
});
function load() {
for (let year = 2016; year < 2022; year++) {
var yearh1 = $.ajax({    
url: "SPO_Site/_api/web/lists/getbytitle('List_Name')/items?$top=5000&$select=*&$filter=(Incident_x0020_Date%20ge%20datetime%27"+(year-1)+"-12-31T20:00:00.000Z%27)%20and%20(Incident_x0020_Date%20lt%20datetime%27"+year+"-06-01T00:00:00.000Z%27)",    
type: "GET", dataType: "json", headers: {"accept": "application/json;odata=verbose"},    
success: mySuccHandler, error: myErrHandler}); 
var yearh2 = $.ajax({    
url: "SPO_Site/_api/web/lists/getbytitle('List_Name')/items?$top=5000&$select=*&$filter=(Incident_x0020_Date%20ge%20datetime%27"+year+"-06-01T00:00:00.000Z%27)%20and%20(Incident_x0020_Date%20le%20datetime%27"+year+"-12-31T00:00:00.000Z%27)",    
type: "GET", dataType: "json", headers: {"accept": "application/json;odata=verbose"},    
success: mySuccHandler, error: myErrHandler}); 
allRequests.push(yearh1);
allRequests.push(yearh2); 
}       
function mySuccHandler(a) {
results = a.d.results;
if (allResults.length > 0)
allResults = allResults.concat(results);
else
allResults = results;
}
function myErrHandler(data, errorCode, errorMessage) {
console.log("Could not complete call: " + errorMessage);        
};
$.when($, allRequests).done(function(a1, a2){
$('#table_id').DataTable({
data:allResults,
dom: 'Bfrtip',
columns:[
{ data: "Title" },
{ data: "Reg_x0020_No" }
]
});
});  
};

Answer 1

循环在每次迭代中覆盖yearh1和yearh2的值，所以这就是为什么$.when()调用将只处理最后两个请求的结果。

您可以将响应收集到一个数组中，而不是分配给yearh1和yearh2，然后将该数组扩展到$.when()。

另外，我建议不要使用success处理程序，而只在执行$.when()调用时处理数据。

是这样的:

function load() {
const promises = [];
for (let year = 2016; year < 2022; year++) {
promises.push($.ajax({
url: "SPO_Site/_api/web/lists/getbytitle('List_Name')/items?$top=5000&$select=*&$filter=(Col_Date%20ge%20datetime'"+(year-1)+"-12-31T20:00:00.000Z')%20and%20(Col_Date%20lt%20datetime'"+year+"-06-01T00:00:00.000Z')",
type: "GET", dataType: "json", headers: {"accept": "application/json;odata=verbose"}
}), $.ajax({    
url: "SPO_Site/_api/web/lists/getbytitle('List_Name')/items?$top=5000&$select=*&$filter=(Col_Date%20ge%20datetime'"+year+"-06-01T00:00:00.000Z')%20and%20(Col_Date%20le%20datetime'"+year+"-12-31T00:00:00.000Z')",   
type: "GET", dataType: "json", headers: {"accept": "application/json;odata=verbose"}
})); 
}
function myErrHandler(data, errorCode, errorMessage) {
console.log("Could not complete call: " + errorMessage);        
}
$.when(...promises).then(function(...responses){
const allResults = responses.map(x => x[0].d.results);
console.log(allResults);
$('#table_id').DataTable({
data:allResults,
dom: 'Bfrtip',
columns: [
{ data: "Title" },
{ data: "Reg_x0020_No" },
]
});
}).catch(myErrHandler);  
}

最后，考虑使用本地Web API处理HTTP请求和承诺:用fetch代替$.ajax，用Promise.all代替$.when。界面略有不同，但值得转换到这些标准。