API和循环迭代值不匹配

时间:2018-10-26 14:50:01

标签: javascript angular loops http promise

所以我有一个复杂的问题,可能很容易评估,但是我在使它起作用方面遇到问题。

我有一个全局对象,该对象存储不同的表单提交,并且当按下按钮时,它会根据内部值的键遍历值及其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 [{…}]

我的价值被完全抛弃了,我不确定为什么会这样。任何帮助,将不胜感激。

1 个答案:

答案 0 :(得分:1)

  

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

您是否需要剪接并删除值?如果您将表单项保留在数组中并使用包含表单状态的数据结构怎么办?

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

如果遵循此设计,则可以以不同的方式和多次遍历表单而不会导致错误。