Javascript正在等待结果，然后再继续

Question

我是Javascript的新手，在走路之前尝试跑步，但我必须产生结果，所以我来了。

我以为我已经在另一个问题中找到了答案，但它并没有像预期的那样对我起作用，下面是我的脚本，它的功能是查看SharePoint列表并将一些值返回到3个数组中，然后我使用这些数组提供数据来完成一些图表数据。

<script>
// load all necessary sharepoint javascript libaries
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
// load the sharepoint list.
loadSharepointList();
});
var arrPlan = new Array()
var arrActual = new Array()
var arrMonth = new Array()

// loads the sharepoint list
function loadSharepointList() {
// create the sharepoint content.
var context = SP.ClientContext.get_current();
// get the list by the title.
var list = context.get_web().get_lists().getByTitle('Package');
// create the query.
var caml = new SP.CamlQuery();
caml.set_viewXml(''); 
// get the list items asynchronously
var listItems = list.getItems(caml);
context.load(listItems , 'Include(Title,Month,Plan,Actual)');
context.executeQueryAsync(
// success delegate
Function.createDelegate(this, function() {
// loop through the items.
var listEnumerator = listItems.getEnumerator();
while (listEnumerator.moveNext()) {
// get the current list item.
var listItem = listEnumerator.get_current();
// get the field value.
var titleValue = listItem.get_item('Month');
var monthValue = listItem.get_item('Month');
var planValue = listItem.get_item('Plan');
var actualValue = listItem.get_item('Actual');
//alert(monthValue);
arrPlan.push(planValue);
arrActual.push(actualValue);
arrMonth.push(monthValue);
//alert(arrMonth);
}
}),
// error delegate
Function.createDelegate(this, function() {
alert('Error fetching data from Sharepoint!');      
}));
}
//var labels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"];
var netpphcanvas = document.getElementById("pphchart");
var planData = {
label: 'Plan',
fill: false,
data: [1.06,1.58,1.74,1.62,1.50,1.37,1.36,1.44,1.84,1.76],
backgroundColor: 'rgba(133, 133, 133, 1)',
borderColor: 'rgba(133, 133, 133, 1)',
borderWidth: 3,
yAxisID: "y-axis-region"
};
var actualData = {
label: 'Actual',
fill: false,
data: [1.37,1.65,1.84, 1.78,1.55, 1.74,1.57, 1.74,1.90,1.63],
backgroundColor: 'rgba(99, 132, 0, 0.6)',
borderColor: 'rgba(99, 132, 0, 0.6)',
borderWidth: 3,
yAxisID: "y-axis-region"
};
//********This is the part I am using for testing
//***********
var netpphData = {
//labels: labels,
labels: arrMonth,
datasets: [planData,actualData]
};
var netdelOptions = {
scales: {
xAxes: [{
barPercentage: 1,
categoryPercentage: 0.6
}],
yAxes: [{
id: "y-axis-region"
}]
},
elements: {
line: {
tension: 0, // disables bezier curves
}
},
title: {
display: true,
text: 'Net-Delivered PPH',
fontSize: 12
},
legend: {
display: true,
labels: {
fontColor: '#000',
fontSize: 12
}
}

};
var lineChart = new Chart(netpphcanvas, {
type: 'line',
data: netpphData,
options: netdelOptions
});
</script>

我正试图使用返回的数组来完成图表的数据和标签部分，为了测试这一点，我从每月的数据开始，它在这部分代码中检索。。。

context.executeQueryAsync(
// success delegate
Function.createDelegate(this, function() {
// loop through the items.
var listEnumerator = listItems.getEnumerator();
while (listEnumerator.moveNext()) {
// get the current list item.
var listItem = listEnumerator.get_current();
// get the field value.
var titleValue = listItem.get_item('Month');
var monthValue = listItem.get_item('Month');
var planValue = listItem.get_item('Plan');
var actualValue = listItem.get_item('Actual');
//alert(monthValue);
arrPlan.push(planValue);
arrActual.push(actualValue);
arrMonth.push(monthValue);
//alert(arrMonth);
}
}),

我已经使用alert方法验证了这一点，它确实将月份返回到名为arrMonth 的数组中

然而，脚本的其余部分似乎是在访问该数据源并填充arrMonth之前运行的。

我还通过使用另一个名为labels的数组并手动归档来检查这一点，它可以正常工作。

我认为这是因为获取数据的函数被异步调用

context.executeQueryAsync(

然而，我将其更改为context.executeQuery(，仍然得到了与在检索数据之前加载页面相同的结果

很明显，我错过了一些东西，我将感谢的任何帮助

亲切问候Derek

Answer 1

您需要连锁承诺，以确保所有这些都按顺序运行。

这两个链接将帮助您：

一种同步Breeze ExecuteQuery

函数then((在JavaScript中是什么意思？

这是一个关于承诺链接的有用教程。https://javascript.info/promise-chaining