Angular Service Promises

Question

So, I've got an Angular app that makes restful calls to the server. There is a service that wraps up the calls to the server. I currently have a method on the service that simply returns the promise from the $http service. I'd like to add some additional processing on that method call, but I'm not sure how to do it because of the asynchronous nature of the promise.

Currently in typescript:

class BoardService {
    private $http;

    constructor($rootScope: IRootScope, $http: ng.IHttpService) {
          this.$http = $http;
    }

    fetchBoard(id: number) {
        return this.$http.get("/api/board/" + id);
    }
}

I'd like to get it to something like this:

fetchBoard2(id: number) {
    this.$http.get("/api/board/" + id).success(function(data)
    {
        // Manipulate the data

    });

    // return manipulated data; 
}

How would you do this?

Answer 1

Tricky sentence warning! Because promises are asynchronous, anything returning data based on data from a promise must itself return a promise. You want fetchBoard2 to return a promise that gets resolved once the $http promise has come back and you've manipulated the data. You do this with Angular's $q service.

fetchBoard2(id: number) {
  var deferred = $q.defer();

  $http.get("/api/board/" + id).success(function(data) {
    var newData = doSomething(data);
    deferred.resolve(newData);
  });

  return deferred.promise;
}

Managing extra deferred objects gets quickly fiddly, so you can use then to insert your own manipulation into the pipeline.

fetchBoard3(id: number) {
  return $http.get(...).then(function(data) {
    return doSomething(data);
  });
}

For more detail, here's a good article.