Synchronous Ajax Call in Angular

Question

In my angular application, I have a scenario where i need to make looping over ajax calls. Scenario is as follows:

Based upon response from first request i need to initiate 2nd request, response from 2nd request would trigger 3rd request and so on. Wherever response does not meet certain criteria, loop needs to be broken. Loop can go several times 10 or 20 based upon configured value. Just want to make it synchronous. Anyone who can suggest approach to implement it ?

someList.forEach(async (value,index,arr)=> {
  if(!isPrintingError)
  {
    let out = await this.someService.Print(someBuffer);
    if(!out)
    {
       isPrintingError = true;
    }
    else {
      console.log("Print successful");
    }
  }
}

Added an answer

the-juju
– the-juju

2019-12-06 09:24:31 +00:00
Commented Dec 6, 2019 at 9:24 — the-juju
– the-juju, Commented Dec 6, 2019 at 9:24

the-juju · Accepted Answer · 2019-12-05 10:40:35Z

1

Just have a look at Promises or async/await. I'm not sure about how you want to do your ajax calls, and it would be great to have a small chunk of code.

But the idea is to do something like that

try {
   const response1 = await this.apiCall1();
   if (!response1) {
      throw new Error('error1');
   }

   const response2 = await this.apiCall2();
   if (!response2) {
      throw new Error('error2');
   }

   // etc...
} catch (e) {
   // logic in case of error
}

Also you can do it in a loop. But in order to give better help, i'll need some code

answered Dec 5, 2019 at 10:40

the-juju

17611 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

CoronaVirus Over a year ago

i dont have code snippet as of now. will share soon. this is just what i was struggling with my thoughts to implement. By the way.. to be more precise, every call is conditioned with response from previous response. so if current request fails it should not send next request and breaks the loop. Say it kind of recursive one.

CoronaVirus Over a year ago

so here, apiCall2() should be called only when we get success response from apiCall1().

the-juju Over a year ago

Exactly "await" will make the second call wait. But see my example as an small algorithm. Does it help you ?

CoronaVirus Over a year ago

Yeah. then it could be useful. let me implement and check how it behaves, Thanks a bunch.

CoronaVirus Over a year ago

It is NOT working as expected. Let me explain. I have 10 records in current loop, for each record i want to send a print command. If print gets failed for any of record then it should not process next record. e.g. while printing 2nd record print failed so 3rd iteration should not execute.

|

Pedro Bezanilla · Accepted Answer · 2019-12-05 10:58:58Z

1

Try using RxJS Library, it will help you also in other different async stuff issues.

Using RxJS operators I'd take advantage of the Merge Operator.

More info here: RxJS Merge Operator

answered Dec 5, 2019 at 10:58

Pedro Bezanilla

1,38518 silver badges24 bronze badges

1 Comment

CoronaVirus Over a year ago

I appreciate. But every request would be async in nature itself in this case also, and merge method would club all the observables into a single output observables.

the-juju · Accepted Answer · 2019-12-06 09:19:04Z

0

Thanks for your snippet. Here is how to break the loop in case of bad output

try {
   someList.forEach(async (value, index, arr) => {
      let output = await this.someService.Print(someBuffer);

      if(!output) {
         // break the loop
         throw new Error('error');
      } else {
         console.log("Print successful");
      }
   }
} catch (e) {
   // what to do if failed ?
}

answered Dec 6, 2019 at 9:19

the-juju

17611 bronze badges

Collectives™ on Stack Overflow

Synchronous Ajax Call in Angular

3 Answers 3

6 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Related