are lastValueFrom and firstValueFrom equivalent in Angular HTTP?

Question

In angular, we use HttpClient to make HTTP calls which return an observable, if we wanna use promises we can use lastValueFrom/firstValueFrom.

Let's say we have:

async getLast() {
   const get$ = this.http.get(url);
   const res1 = await lastValueFrom(get$);
}
async getFirst() {
   const get$ = this.http.get(url);
   const res2 = await firstValueFrom(get$);
}

are res1 and res2 always equivalent? what is the correct version to use?

Apposite

Answer 1

In Angular HTTP client, yes, they are. This is why:

observer.next(new HttpResponse({
  body,
  headers,
  status,
  statusText,
  url: url || undefined,
}));
// The full body has been received and delivered, no further events
// are possible. This request is complete.
observer.complete();

After observer.next(...), observer.complete() gets called synchronously. Since this a synchronous call, there is no difference in using lastValueFrom or firstValueFrom.

The only difference here is that firstValueFrom will resolve the Promise once next(...) gets called, while lastValueFrom will resolve the Promise once complete() gets called. Since next and complete get called synchronously, one after another, there is really no much difference here.

However, one thing to note here is: if you're using reportProgress = true, you will want to use lastValueFrom since you'd like to catch the last value emitted from the producer - that is, either the response or the error. You don't want to resolve the Promise with the progress status update. If you do, then you don't want to use Promises at all.

Whitleywhitlock

Answer 2

In the basic usage of HttpClient.get(url) - without any additional options like observe: events or reportProgress: true - both versions are equivalent and you can use whichever you like. The observable will emit only once or fail, therefore both lastValueFrom and firstValueFrom will behave the same.

Wryneck

Answer 3

As mentioned in a previous post, there is no difference IF you always expect the observable to complete immediately. However some observables never complete (or complete much later than you expect). You therefore can't use the two indiscriminately in all contexts (firstValueFrom will always complete immediately if an item is ready in the observable stream / source).

toPromise (like lastValueFrom) requires the source observable to complete prior to emission, which means a take(1) is required if one wants it to complete (in the case of e.g timer(x, n).

Strictly speaking then, lastValueFrom would be equivalent to source.pipe(take(1)).toPromise().

See StackBlitz - in console

Darmstadt