async and await in angular api response

Question

I am trying to do task step by step.

I have a for loop in a method:

async changeTimeStep3() {
  for (let i = 1; i < 10; i++) {
    await this.do(i)
  }
}

for each step must do() task.

do(i) {
  this.http
    .getDataFromServer(
      "api/example?id=" +i
    )
    .subscribe((response) => {
     console.log(i);
    });
}

I want to wait to get response and after response coming go to next i

But not work console.log print:

Note time to receive response from api is not fix.

Any help?

I don't know why it doesn't return a promise, you presumably wrote it like that, or why you're awaiting it even though it doesn't. And if you want to await it, try actually returning a promise that resolves when the work is done (or rejects if it fails). — jonrsharpe
– jonrsharpe, Commented Dec 13, 2021 at 13:57
I realize that this doesn't answer your question, but making calls like that is an anti-pattern. If you need to await multiple calls in a loop, you need to pass a collection to the query. — VSO
– VSO, Commented Dec 13, 2021 at 13:57

jonrsharpe · Accepted Answer · 2021-12-13 14:15:45Z

8

To get your loop print out the values in the correct order you could transform your observables into promises, so your await will block the for-loop as long as the HTTP call hasn't resolved.

import { firstValueFrom } from 'rxjs';

...

async do(i: number) {
  await firstValueFrom(
    this.http
      .getDataFromServer(
        "api/example?id=" +i
      )
  );
  console.log(i);
}

Using firstValueFrom or lastValueFrom are the RxJS ways to get a promise as return value from an observable (since toPromise got deprecated, you can read more about that here).

edited Dec 13, 2021 at 14:15

jonrsharpe

123k31 gold badges277 silver badges488 bronze badges

answered Dec 13, 2021 at 14:01

Batajus

6,3453 gold badges28 silver badges39 bronze badges

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

Comments

Mahdi Zarei · Accepted Answer · 2021-12-13 14:54:54Z

3

You can return a Promise and use resolve() in response part of your ajax. Like:

do(i) {
  return new Promise((resolve, reject) => {
    this.http.getDataFromServer("api/example?id=" +i).subscribe((response) => {
      resolve(response);
    }, (error) => {
      console.error(error);
      reject();
    });
  });
}

edited Dec 13, 2021 at 14:54

answered Dec 13, 2021 at 13:57

Mahdi Zarei

7,7538 gold badges36 silver badges67 bronze badges

12 Comments

Mahdi Zarei Over a year ago

I was editing. yes it is parallel. I put the sequential model too. @jonrsharpe

Mahdi Zarei Over a year ago

loops in for (let i = 0; i < x; i++) {} are different from for (const i of arr) {} model. @jonrsharpe

Mahdi Zarei Over a year ago

and just now I came up with a better answer...

jack ros Over a year ago

work like a sharme, thank you !!

Jeremy Thille Over a year ago

This clumsy new Promise wrapping an Observable really isn't the way to go. I don't know why OP marked it as accepted. @Batajus's answer above is far better.

|

JeffryHouser · Accepted Answer · 2021-12-13 14:12:02Z

2

The problem here is that do is not an asynchronous method; it is a synchronous method that triggers an asynchronous one. As such, the await completes immediately.

You may be able to do this:

do(i) {
  return firstValueFrom(this.http
    .getDataFromServer(
      "api/example?id=" +i
    ))
}

It converts the observable into a promise and returns it. So, now the do() method returns an async object. To output from the do method; you can use a pipe:

  return firstValueFrom(this.http
    .getDataFromServer(
      "api/example?id=" +i
    ).pipe(tap((result) => {console.log(i);}))

All that said, using async/await in Angular is unusual. An RXJS operator is usually considered the right approach. Possibly with concat

edited Dec 13, 2021 at 14:12

answered Dec 13, 2021 at 13:58

JeffryHouser

39.4k4 gold badges41 silver badges60 bronze badges

4 Comments

jonrsharpe Over a year ago

Subscribing returns a subscription, not a promise - that has the same problem the OP currently does.

JeffryHouser Over a year ago

I think this has a completely different problem, but good call on the promise/subscribe issue.

jonrsharpe Over a year ago

It has the same problem insofar as you're awaiting something that's not a promise, therefore awaiting it is pointless because it doesn't synchronise the behaviour.

JeffryHouser Over a year ago

@jonrsharpe I edited the answer; so it should be more accurate now.

Collectives™ on Stack Overflow

async and await in angular api response

3 Answers 3

Comments

12 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

12 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related