VisaSpark
Sign in
intermediate15 min

The $http Service

AngularJS's built-in $http service for API calls, and how it compares to modern fetch.

What you'll learn

  • Read an $http call and identify its method, URL, and response handling
  • Explain that $http returns a promise-like object with .then()
  • Contrast $http with the modern fetch API conceptually

Explanation

$http is AngularJS's built-in service for making HTTP requests: $http.get("/api/users").then((response) => { $scope.users = response.data; }) -- it returns a promise-like object with .then()/.catch(), predating (and inspiring some conventions found in) the standardized JavaScript Promise, which AngularJS's promise implementation ($q) is closely related to under the hood.

Unlike a modern fetch() call, $http's response object already has the parsed body available as response.data -- no separate .json() call is needed, since $http handles that parsing step itself for a JSON response.

A genuinely important detail for reading legacy code correctly: because $http calls happen through AngularJS's own machinery, its .then() callback runs inside an AngularJS digest cycle automatically -- unlike a raw fetch() or a third-party library's callback, you generally don't need to manually call $scope.$apply() after an $http response, since AngularJS already knows about it.

Guided lab

Predict: An $http-style response handler

AngularJSNot 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 $http.get(...).then(...) with a simple promise, since a live HTTP call can't run here. Predict what's logged.

function simulateHttpGet(url) {
  return Promise.resolve({
    status: 200,
    data: { users: ["Ada", "Grace"] },
  });
}

simulateHttpGet("/api/users").then((response) => {
  console.log("Status:", response.status);
  console.log("Users:", response.data.users);
});

Stuck? Get a hint.

Common mistakes

  • Calling response.json() on an $http response like you would with fetch -- $http already provides the parsed body as response.data.
  • Manually calling $scope.$apply() inside an $http .then() callback, which is usually unnecessary since $http already runs inside AngularJS's digest cycle.
  • Assuming $http and modern fetch have identical error-handling shapes -- always check the specific method/property names in the actual code being read, not assumptions from a different API.

Knowledge check

Knowledge check

1. How do you access an $http response's parsed body?
2. Do you generally need to manually call $scope.$apply() inside an $http .then() callback?
3. What does $http return?

Takeaway

$http exposes the parsed response body as response.data (no separate .json() call), and its .then() callback already runs inside AngularJS's digest cycle.

Summary

$http makes HTTP requests, returning a promise-like object; response.data is already parsed; its callbacks integrate automatically with the digest cycle.

References

Your notes

Notes save automatically.

Finished this lesson?

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

Next: Common Performance Pitfalls →