API 和循环迭代值不匹配

Question

所以我有一个可能很容易评估的复杂问题，但我在让它发挥作用时遇到了问题。

我有一个存储不同表单提交的全局对象，当按下按钮时，它会根据内部值的键迭代值和他的 API。该函数有效，但循环完全迭代，然后 API 被命中。

我想拼接或删除对象中成功提交的值，并保留未提交的值。我还想在 API 调用的每次迭代之间设置某种类型的延迟或超时，因为我不会一次调用 API。

我的代码可能比应有的复杂，但我一直在尝试使用不同的来源。我还阅读了有关循环的闭包并了解为什么循环在 API 完成之前完成，但我只是想知道是否有更好的方法或基本上想让我的代码正常运行。

任何帮助我进一步教育我这个主题或替代方法将不胜感激。

编辑：所以我从调用中删除了 setTimeout() 并且迭代正常工作，但是由于某种原因，数组将拼接到最后两个值并且它卡住了。我还注意到 i 变量的工作原理是当 API 调用被删除时应该，但当我添加它时它会被抛出。

我的提供商调用 API：

submitBatchData(data,authToken){
   //console.log(data,authToken);
   const httpOptions = {
       headers: new HttpHeaders({
           'Accept': 'application/json, text/plain',
           'Content-Type':  'application/json',
           'Authorization': authToken
            })
         };
      return this.http.post(this.apisubmitTreatUrl, JSON.stringify(data), httpOptions).retry(3).timeout(10000).delay(2000);

 }

主while循环迭代：

  submitOfflineForm(data){
  var data = data;
  var length:number = data.length;
  var secondLength = data.length;
  var testLength = data.length;
  var count=0;

  while(secondLength--){//I have another loop that runs before checking for another value. Hance the multiple variables
    //console.log(secondLength);
    //console.log(count);
      this.callAPI(testLength,secondLength,data[secondLength],data);
  }
}
callAPI(testLength,i,data,allData) {
//where code is being run
}

当我只运行控制台日志和拼接数组时，它应该正常工作（数组中的 3 个值）：

case "Batch": {
 console.log(i);
 console.log('Before: ' + allData);
 allData.splice(i,1);
 console.log('After: ' + allData);
break;
 }

日志：

2
dataservice.ts:279 Before: [object Object],[object Object],[object Object]
dataservice.ts:281 After: [object Object],[object Object]
1
dataservice.ts:279 Before: [object Object],[object Object]
dataservice.ts:281 After: [object Object]
dataservice.ts:278
0
dataservice.ts:279 Before: [object Object]
dataservice.ts:281 After: 

但是当我添加 API 调用时：

case "Batch": {
    // console.log("Here in Batch");
     submit.submitBatchData(data["Info"],token).subscribe((result)=>{
       //console.log(result["Status"]);
         if(result["Status"]==true){
            console.log(i);
            console.log('Before: ' + allData);
            allData.splice(i,1);
            console.log('After: ' + allData);
          // isEmpty(i,allData,storage,offline,loading);
         }
         else{
            this.presentToast('Batch Treatment not submitted with location!');
         }

     }, (err)=>{
        this.presentToast('Could not submit Batch Location!');
    });
    break;
 }    

日志：

1
dataservice.ts:279 Before: [object Object],[object Object],[object Object]
dataservice.ts:281 After: [object Object],[object Object]
dataservice.ts:413 Current length of array after splicing: 2
dataservice.ts:414 (2) [{…}, {…}]
dataservice.ts:416 (2) [{…}, {…}]
2
dataservice.ts:279 Before: [object Object],[object Object]
dataservice.ts:281 After: [object Object],[object Object]
dataservice.ts:413 Current length of array after splicing: 2
dataservice.ts:414 (2) [{…}, {…}]
dataservice.ts:416 (2) [{…}, {…}]
0
dataservice.ts:279 Before: [object Object],[object Object]
dataservice.ts:281 After: [object Object]
dataservice.ts:413 Current length of array after splicing: 1
dataservice.ts:414 [{…}]
dataservice.ts:416 [{…}]

i 的价值被完全抛弃了，我不确定为什么会发生这种情况。任何帮助，将不胜感激。

Answer 1

我想拼接或删除对象中成功提交的值，并保留未提交的值。我还想在每次迭代到 API 调用之间设置某种类型的延迟或超时，因为我不会一次调用 API。

您是否需要拼接和删除值？如果将表单项保留在数组中并使用包含表单状态的数据结构会怎样？

[
    {
        form: {...},
        status: "pending" // or "invalid" or "submitted" etc
    },
    ...
]

如果您遵循此设计，您可以以不同的方式多次迭代表单而不会导致错误。