VisaSpark
Sign in
advanced15 min

HttpClient and API Calls

Making API calls with HttpClient, which returns Observables rather than Promises.

What you'll learn

  • Explain that HttpClient methods return Observables, not Promises
  • Subscribe to an HttpClient call to receive its response
  • Recognize why unsubscribing matters for long-lived HTTP Observables

Explanation

Angular's HttpClient service makes HTTP requests and returns the result as an Observable, not a Promise: this.http.get<User[]>("/api/users").subscribe((users) => { ... }) -- consistent with the RxJS-based patterns from the previous lesson, and letting you apply the same operators (retry, timeout, cancellation via unsubscribing) to network calls.

Because it's an Observable, nothing happens until you .subscribe() -- calling this.http.get(...) alone does not make the request; only subscribing to the returned Observable actually triggers it. This trips up developers coming from Promise-based fetch(), where the request starts immediately upon calling the function.

For a single HTTP request that completes and then finishes emitting (the common case), Angular's HttpClient Observable completes automatically after emitting its one response, so manual unsubscription usually isn't required for a simple one-off call -- but it becomes a real concern for long-lived or repeated subscriptions (e.g. polling), where an un-unsubscribed Observable can keep running after a component is destroyed.

Guided lab

Predict: A simulated HttpClient-style Observable

AngularNot executed
This lab does not run in your browser or on VisaSparkSchools's servers. Read the code, predict what it does, then reveal the real expected output.

This models HttpClient's 'nothing happens until subscribed' behavior with a simplified Observable-like class. Predict the order of the log statements.

class SimpleObservable<T> {
  constructor(private producer: (emit: (value: T) => void) => void) {}

  subscribe(callback: (value: T) => void): void {
    this.producer(callback);
  }
}

console.log("Before creating the request");
const request$ = new SimpleObservable<string>((emit) => {
  console.log("Request actually sent");
  emit("response data");
});
console.log("Request created, not yet subscribed");

request$.subscribe((data) => console.log("Received:", data));

Stuck? Get a hint.

Common mistakes

  • Calling this.http.get(...) without .subscribe() and expecting the request to fire -- Observables are lazy, so nothing happens until subscribed.
  • Treating an HttpClient call like a Promise (e.g. .then()) instead of an Observable (.subscribe()).
  • Assuming every Observable subscription needs manual unsubscription -- a single completing HTTP request's Observable completes on its own, though long-lived/repeated subscriptions do need explicit cleanup.

Knowledge check

Knowledge check

1. What type does an HttpClient method like .get() return?
2. When does calling this.http.get(url) actually send the HTTP request?
3. For a single, one-off HTTP GET request, does its Observable typically need manual unsubscription?

Takeaway

HttpClient calls are Observables, not Promises -- nothing happens until you subscribe, though a single completing request cleans up after itself.

Summary

HttpClient methods return Observables that must be subscribed to in order to actually fire the request; single completing requests clean up automatically, unlike long-lived subscriptions.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Reactive Forms →