Javascript 有序forEach循环

我有一个元素数组，我需要循环遍历它们，在每次传递时从服务器获取一个值。通过以下代码，我得到 由于forEach循环中的异步调用，所有结果混合在一起。我需要以与数组中相同的顺序显示结果

var en_devices= [
  ["72", "Device 1"],
  ["73", "Device 2"],
  ["74", "Device 3"],
  ["75", "Device 4"],
  ["76", "Device 5"],
  ["5158", "Device 6"]
];

en_devices.forEach(element => {
    $.get('/check-energy/'+element[0], function(data){
      content = "<div class='service'>"+element[1]+"</div> <div class='watt'>"+data+"</div><br/>";
      $('#description-en').append(content);
  });
 });

var en_设备=[
[“72”，“装置1”]，
[“73”，“装置2”]，
[“74”，“装置3”]，
[“75”，“装置4”]，
[“76”，“装置5”]，
[“5158”，“设备6”]
];
en_devices.forEach（元素=>{
$.get（'/check energy/'+元素[0]，函数（数据）{
content=“”+元素[1]+“+数据+”
”；
$（'#description en'）。追加（内容）；
});
});

如果

$.get

是，那么它将返回一个承诺，您可以使用异步编程

正如@CherryDT所说的，在

异步

函数中使用它。如果没有，请将其用作立即调用的函数表达式：

（异步（）=>{
用于（en_装置的let元件）{
const data=await$.get（'/check energy/'+元素[0]）；
const content=“”+元素[1]+“”+数据+“
”；
$（'#description en'）。追加（内容）；
}
})();

更新： 正如@huyts所指出的，上述方法一次调用一个API。要使其并行，请使用

Promise.all

：

（异步（）=>{
const promises=en_devices.map（元素=>
$.get（'/check energy/'+元素[0]）
.然后（数据=>[元素[1]，数据]）
);
const results=等待承诺。全部（承诺）；
for（让结果显示结果）{
const content=“”+结果[0]+“”+结果[1]+“
”；
$（'#description en'）。追加（内容）；
}
})();

如果

$.get

是，那么它将返回一个承诺，您可以使用异步编程

正如@CherryDT所说的，在

异步

函数中使用它。如果没有，请将其用作立即调用的函数表达式：

（异步（）=>{
用于（en_装置的let元件）{
const data=await$.get（'/check energy/'+元素[0]）；
const content=“”+元素[1]+“”+数据+“
”；
$（'#description en'）。追加（内容）；
}
})();

更新： 正如@huyts所指出的，上述方法一次调用一个API。要使其并行，请使用

Promise.all

：

（异步（）=>{
const promises=en_devices.map（元素=>
$.get（'/check energy/'+元素[0]）
.然后（数据=>[元素[1]，数据]）
);
const results=等待承诺。全部（承诺）；
for（让结果显示结果）{
const content=“”+结果[0]+“”+结果[1]+“
”；
$（'#description en'）。追加（内容）；
}
})();

请参阅

const en_设备=[
[“72”，“装置1”]，
[“73”，“装置2”]，
[“74”，“装置3”]，
[“75”，“装置4”]，
[“76”，“装置5”]，
[“5158”，“设备6”]
];
常量长度=en_设备长度；
常量承诺=[]；
常量结果=数组（长度）.fill（null）；
en_devices.forEach（（元素，索引）=>{
承诺，推动(
新承诺（（解决、拒绝）=>{
$.get（'/check energy/'+元素[0]，函数（数据）{
content=“”+元素[1]+“+数据+”
”；
结果[指标]=含量；
解决（）；
}
})
);
});
承诺。所有（承诺）。然后（（）=>{
for（const result of results）$（'#description en'）。追加（result）；
});

请参阅

const en_设备=[
[“72”，“装置1”]，
[“73”，“装置2”]，
[“74”，“装置3”]，
[“75”，“装置4”]，
[“76”，“装置5”]，
[“5158”，“设备6”]
];
常量长度=en_设备长度；
常量承诺=[]；
常量结果=数组（长度）.fill（null）；
en_devices.forEach（（元素，索引）=>{
承诺，推动(
新承诺（（解决、拒绝）=>{
$.get（'/check energy/'+元素[0]，函数（数据）{
content=“”+元素[1]+“+数据+”
”；
结果[指标]=含量；
解决（）；
}
})
);
});
承诺。所有（承诺）。然后（（）=>{
for（const result of results）$（'#description en'）。追加（result）；
});

能否编写expexted结果？？？然后预先创建必要的目标元素，给它们一些您可以识别它们的东西（比如在自定义数据属性中设置设备id），然后在AJAX回调中将接收到的数据放入相应的数据中…？您可以使用异步函数。（Google async/await。）然后为（en_设备的const元素）{const data=wait$.get（…）；content=…；}编写

您应该将所有结果保存到正确位置的数组中。获得所有结果后，逐个追加数组中的数据。是否可以编写expexted结果？？？然后预先创建必要的目标元素，为它们提供可以识别它们的内容（如在自定义数据属性中设置设备id），然后在AJAX回调中将接收到的数据放入相应的一个…？您可以使用异步函数（Google async/await。）然后为（en_设备的const元素）{const data=await$.get（…）；content=…；}编写

您应该将所有结果保存到正确位置的数组中。获取所有结果后，逐个追加数组中的数据。这种方法的问题是，一次只能执行一个请求，并且必须等待该请求完成，这不是很有效。确实如此：）这种方法的问题是，一次只能执行一个请求，并且必须等待该请求完成，这不是很有效

const en_devices= [
  ["72", "Device 1"],
  ["73", "Device 2"],
  ["74", "Device 3"],
  ["75", "Device 4"],
  ["76", "Device 5"],
  ["5158", "Device 6"]
];

const length = en_devices.length;
const promises = [];
const results = Array(length).fill(null);

en_devices.forEach((element, index) => {
    promises.push(
        new Promise((resolve, reject) => {
            $.get('/check-energy/'+element[0], function(data){
                content = "<div class='service'>"+element[1]+"</div> <div class='watt'>"+data+"</div><br/>";
                results[index] = content;
                resolve();
            }
        })
    );
});

Promise.all(promises).then(() => {
    for (const result of results) $('#description-en').append(result);
});