javascript - 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

I want to splice or remove the values that are submitted successfully from the object and keep the ones that aren't. I also want to set some type of delay or timeout between each iteration to the API calls to I'm not hitting the API with each call all at one time.

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

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

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