Angularjs: How to write $http as promise for controller

Question

Currently I am using $http.success().error() in my controllers. However, angular has deprecated success/error support and as per style guides the best place to write server $http calls is service.

Given this I would like to know if the following code is the correct way to go forward.

Controller:

var funcWithPromise = function() {
            // This service's function returns a promise, but we'll deal with that shortly
            TestService.getWeather()
                .then(function(data) {
                    if (data.forecast==='good') {
                        prepareFishingTrip();
                    } else {
                        prepareSundayRoastDinner();
                    }
                }, function(response) {
                    // promise rejected, could log the error with: 
                        $scope.errorDiv = response.data;
                        console.log('error', response);
                        //Manipulate DOM
                    });
            };

Service:

app.factory('TestService', function ($http, $q) {
        return {
            getWeather: function() {
                // the $http API is based on the deferred/promise APIs exposed by the $q service
                // so it returns a promise for us by default
                return $http.get('http://weather')
                    .then(function(response) {
                        return response.data;
                    }, function(response) {
                        // something went wrong
                        return $q.reject(response);  //Not sure is it must be response or reponse.data here. With reponse I can utilize response.status.
                    });
            }
        };
    });

Answer 1

I wouldn't blindly do this

 $http(..).then(function(response) {
        return response.data;
 });

The above assumes that all valid HTTP responses mutate into data, but that isn't the same as when you do this.

 $http(..).success(function(data) {
        return data;
 });

The success callback in $http is only fired when the response status is a 200 series code, when you switch to then all successful HTTP responses (200, 300, 400, etc.) are handled as a resolved response.

Therefore, you want do something like this.

 return $q(function(resolve,reject){
     $http(..).then(function(response) {
        if(response.status == 200) {
            resolve(response.data);
        } else {
            reject(response);
        }
     });
 });

This will resolve successful 200 responses to just the data in the response. Now the promise returned by your service will only resolve to that data or be rejected.

For error handling, I recommend you use an interceptor and not implement error handling in the directive (unless there is a special case).

Answer 2

Following the 'official' documentation, you are in the correct way, so go on.

I would have done something like you. Here the link of the official documentation: https://docs.angularjs.org/api/ng/service/$http