then（函数）没有在angularjs中用返回的promise值更新

Question

I am trying to to get some data from API with the help of promises in angularjs. I have one service which is getting a value from API and returning the promise to controller.

***Service***
this.forgotPasswordLink = function(email){
    var deferred = $q.defer();
    $http.post('/forgotPassword',{
        email: email 
    }).success(function(response){
        console.log("the new response is: ",response);
        deferred.resolve(response);
    }).error(function(error){
        deferred.reject(error);
    });
    return deferred.promise;
};

**Controller**
authService.forgotPasswordLink($scope.forgotPasswordEmail).then(function(data){
        console.log(data);
        if(data.message === 'emailFound'){
            $scope.emailSent = true;
            $scope.emailNotSent = false;
        }
        else{
            $scope.emailNotSent = true;
            $scope.emailSent = false;
        }
    });

Here authservice is the name of the service . so this code is working fine but the problem is when I try to get data multiple times one after the other, for the first time promise is returning the correct data but when I try to post with different data, promise doesn't updates the then(function) even though promise gets proper response from server.

if you see there are two console statements, one in service and one in controller; so the console statement in controller is getting executed first as promise is returning the old value and when promise is resolving, second console statement which is in service is executed with the updated value.

So how do I get the updated value in then(function). do I need to refresh the service after posting the data once.

Answer 1

As @Terry suggested, you don't have to depend on $q at all, to achieve the result. I recommend one of the following two approaches:

#1:

***Service***
this.forgotPasswordLink = function(email){
    return $http.post('/forgotPassword',{
        email: email 
    }).then(function(response){
        console.log("the new response is: ",response);
        return response;
    }).catch(function(error){
        return error;
    });
};

In this case, the controller remains the same; only thing to note is that, even in error case, the controller's then function will be called with data being the error object returning from catch block of service.

#2:

***Service***
this.forgotPasswordLink = function(email){
    return $http.post('/forgotPassword',{
        email: email 
    });
};

***Controller***
authService.forgotPasswordLink().then(function(data){
    console.log(data);
    if(data.message === 'emailFound'){
        $scope.emailSent = true;
        $scope.emailNotSent = false;
    }
    else{
        $scope.emailNotSent = true;
        $scope.emailSent = false;
    }
}).catch(function(error){
    console.log(error); // Error handling like notifying user, etc...
});

In the second approach, the service just returns the promise returned by $http . The controller then takes actions based on the result of this promise.

One can argue that it's the service's duty to obtain the data and give it to controller to take actions. This is the first approach.

I personally prefer the first approach, since the service is simple and it's easy to test this way.

Answer 2

当您使用then方法时，您已将.data放在变量之后，将data.data放在后面。