Javascript 如何使forEach循环等待每个Ajax函数完成

我有一个

语句数组

，我想通过

ajax

调用循环每个语句并提交给

服务器

。我必须确保在发送下一个请求之前执行每个

ajax

请求，因为在

服务器

端代码上，我正在为这个

数组

语句创建一个

唯一键

。发生的事情是，在我提交第一个请求之前，第二个请求进入，我最终创建了两个单独的密钥，因为它将每个密钥都视为第一次请求。我不能完全依赖超时，到目前为止我的代码继续循环

function formPostSubmission(form){
    var parts = ['a', 'b', 'c'];
    var i = 0;
    parts.forEach(function(entry) {
        i++;
        datafield ={
            answer:entry,
            displayOrder:i,
            ajaxName:'statementPartialSubmit'
        };
        $.when(submitAjaxData(form, datafield)).then(function succesHandler(data){
            console.log("promise test "+data);
            console.log("Below request ");
        },
        function errorHandler(){
            console.log("Error occurred ");
        })
        console.log("Go for next ");
    });
}

function  submitAjaxData(form, datafield) {
    console.log(" called submitAjaxData  ");
    var loadurl = domainName + "/ajax-call-handler";
    return $.ajax({
        url: loadurl,
        method: "GET",
        data: datafield
    });
}

我希望检查响应数据是否成功，然后在循环中继续。但这就是我的

控制台的打印方式

called submitAjaxData
Go for next
called submitAjaxData 
Go for next
promise test  
Below request
promise test 
Below request 

使用承诺：

 var promises = [];
 for (var i = 0; i < $total_files; i++) {
 // jQuery returns a prom 
   promises.push($.ajax({
  /* your ajax config*/
  }))
 }

Promise.all(promises)
.then(responseList => {
 console.dir(responseList)
 })

var承诺=[]；
对于（变量i=0；i<$total_文件；i++）{
//jQuery返回一个prom
promises.push（$.ajax({
/*您的ajax配置*/
}))
}
所有（承诺）
。然后（响应列表=>{
控制台目录（响应列表）
})

是您的最佳选择
您可以使用此解决方案，方法是使用
等待
，例如：

for (let f of files) {
    await $.ajax({/* your ajax config*/ });
 }

我编写了这个函数，PromiseAllSeq，以按顺序执行一系列承诺

如果您愿意，可以将回调作为第二个参数传递，但鉴于您的问题，我已经根据您的代码准备了一个可用的演示


console.clear（）；
/**
*承诺将互相等待，并将返回任何[]。
*如果承诺被拒绝，它将停止。
*@param arr-（Promise |（）=>Promise）[]接受承诺或返回承诺的函数
*@param回调（响应，索引）-如果回调“返回”，它将覆盖当前响应。用于更改响应。
*@返回任何[]
*/
const PromiseAllSeq=（arr，callback）=>{
让结果=[]；
if（回调类型！==“函数”）{
回调=（）=>{}；
}
const rec=（arr）=>{
返回新承诺（（解决、拒绝）=>{
if（阵列长度）{
（类型arr[0]=“函数”？arr[0]（）：arr[0]）。然后（res=>{
设cb=callback（res，result.length）；
结果=结果.concat（cb的类型！=“未定义”？cb:res）；
阵列拼接（0,1）；
解析（arr.length？rec（arr）：结果）；
}).catch（错误=>{
拒绝（错误）；
})
}否则{
决心（结果）；
}
})
}
返回记录（arr）；
}
函数成功句柄（数据、索引）{
//在这里，我可以更改“数据”
数据['FinishedPromissenr']=索引；
日志（“承诺测试”、数据、索引）；
console.log（“转到下一步”）；
返回数据；
}
函数errorHandler（err）{
日志（“发生错误”，err）；
}
函数数据（表单，数据字段）{
log（“称为submitAjaxData”，数据字段）；
//var loadurl=domainName+“/ajax调用处理程序”；
//用延迟响应模拟某些请求
// https://reqres.in/#console
var loadurl=”https://reqres.in/api/users?delay=“+datafield.fakeDelay；
返回$.ajax({
url:loadurl，
方法：“获取”，
数据：数据字段
});
}
功能formPostSubmission（表格）{
变量部分=['a'，'b'，'c']；
var i=0；
让poll=[]；
零件。forEach（功能（条目）{
i++；
//“数据字段”未分配var或let
//在每个循环中重新分配它将允许“datafield”传入下面的匿名函数
让数据字段={
答:进入,，
显示顺序：我，
ajaxName:'statementPartialSubmit'，
伪造延迟：parts.length-i
};
//错误：调用submitAjaxData，这意味着请求会立即发送。
//push（$.when（submitAjaxData（表单，数据字段））；
//正确：将$包装并返回到函数中，否则“submitAjaxData”将触发请求
poll.push（（）=>$.when（submitAjaxData（表单，数据字段））；
});
PromiseAllSeq（投票，继任者）。然后（responseList=>{
console.log（“最终响应”）；
控制台日志（响应列表）；
}).catch（errorHandler）
}
formPostSubmission（空）；
感谢您回复Sari。我刚刚尝试了这个。您能解释一下这应该是如何工作的吗？我看到循环获取第一个元素，然后在ajax调用之后立即打印控制台消息。但是我在ajax请求中添加了一个时间参数，我看到为两个请求添加了相同的时间。这并不保证请求都是正确的按顺序重新发送！是的，我做了一些测试，但没有按顺序发送。
承诺。所有
只会一次返回所有已解决的承诺，或者在一个承诺被拒绝时失败。正如@Fitzi所说，这并不保证它们将按顺序解决。我发布了另一个解决方案。虽然此代码片段可能解决问题，但确实有助于提高你文章的质量。请记住，你是在为将来的读者回答这个问题，那些人可能不知道你的代码建议的原因。
async:false
多年前因为负面的用户体验而被弃用。
for (let f of files) {
    await $.ajax({/* your ajax config*/ });
 }