Processing $http response in service

javascript

promise-engineering

async-programming

javascript-best-practices

byAnton Shumikhin·Mar 3, 2025

To manage $http responses efficiently in a service, make use of AngularJS promises. The .then() function can be chained to the $http call to process the data within the service, returning only the necessary data. This data can then be manipulated within controllers, keeping your code clean and optimized.

// Service function: Data-fetching method, or "Data Bouncer"
function fetchData() {
  return $http.get('/api/data').then(response => response.data);
}

// Controller usage: Where data finally gets the "pass"
fetchData().then(processedData => $scope.data = processedData);

The fetchData() function serves as a data-wrapper by outsourcing the $http call and exposing only the required data. The .then() function in the controller acts as a promise waiter, awaiting the processed result – thereby ensuring a clear separation of concerns.

Comprehensive guide to managing `$http` response

Manipulating data in `.then()`

Data that needs additional manipulation can be handled directly inside the .then() function. This uses the magic of promise chaining:

function fetchData() {
  return $http.get('/api/data')
    .then(response => {  
      // "Data Surgeon" at work here!
      let processedData = modifyData(response.data);
      return processedData;
    });
}

function modifyData(data) {
  // Customize your own "Data Surgery" here
  return data;
}

Using caching for efficient calls

An efficient way to preclude redundant service calls is to use caching. You can store the data locally after the first retrieval:

let cache;
// Cache Fairy
function fetchData() {
  // If cache exists, it's like an early Christmas!
  if (cache) return $q.when(cache);
  return $http.get('/api/data').then(response => {
    cache = response.data;  // Congrats, cache just had a baby!
    return cache;
  });
}

Implementing $q for custom promises

For situations requiring custom promises, you can use the $q service. This is helpful for complex logic before resolving or rejecting the promise:

function fetchData() {
  let deferred = $q.defer();
  // Async Task: the mission impossible
  let asyncTask = () => {
    // ...some asynchronous operation...
    if (successful) {
      deferred.resolve('Mission accomplished!');  // Data:
    } else {
      deferred.reject('Mission failed! We'll get 'em next time.');  // Error message: 
    }
  }
  asyncTask();
  return deferred.promise;
}

Handling asynchronous data in controllers

Asynchronous data can be tackled in the controller itself using an async function to fetch and process data:

async function loadData() {
  try {
    // Place your bets!
    $scope.data = await fetchData();
  } catch (error) {
    // Well, life's a gamble!
    console.log('Something happened: ', error);
  }
}

Syncing view with $scope

JSON data can be bound to $scope in the controller to update the views:

fetchData().then(data => {
  $scope.data = data;
  if (!$scope.$$phase) $scope.$apply();  // Apply, rinse, repeat!
});

If you need to keep tabs on data changes, $watch() can help:

$scope.$watch('data', function (newValue) {
  // Learns gossip faster than your local news!
});

Debugging fun

Ultimately, the good ol' console.log() can help you trace data flow and resolve issues:

$http.get('/api/data').then(response => {
  console.log('Data received:', response.data);  // It's a bird! It's a plane! It's... your data!
  return response.data;
});