asynchronous call in angular js

Question

Hi all I am new to angular js,here I want to fetch the json from server to the controller so that I can handle the data,but whats happening here is the first alert -11 is called then alert 2 is called and in the end alert 1 is being called ,I read about promise so I tried it but still not working,I want it to happen one after another please help me .Thanks in advance

sampleApp.controller('firstpage', function ($scope, $q, $http, $templateCache, onlinedata, offlinedata) {
    $scope.message = 'This is Add new order screen';
    var defer = $q.defer();
    defer.promise.then(function () {
        $scope.method = 'POST';
        $scope.url = 'http://ncrts.com/ncrtssales_compadmin/webservices/user_login';
        $scope.fetch = function () {
            $scope.code = null;
            $scope.response = null;
            alert($scope.response + 11) //alert11
            $http({
                method: $scope.method,
                url: $scope.url,
                cache: $templateCache
            }).
            success(function (data, status) {
                $scope.status = status;
                $scope.message = data;
                alert($scope.message + 1) //alert1
            }).
            error(function (data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
        };
        $scope.fetch();
    })
        .then(function () {
        alert($scope.message + 2); //alert 2
    })
    defer.resolve();
    //alert($scope.remember)
});

sorry alert 1, edited it

kavinhuh
– kavinhuh

2014-03-13 19:37:58 +00:00
Commented Mar 13, 2014 at 19:37 — kavinhuh
– kavinhuh, Commented Mar 13, 2014 at 19:37

Michael · Accepted Answer · 2014-03-13 21:01:19Z

You have to use the resolve and reject functions to handle the response with the promise. You can find more information about promise in the AngularJS documentation. I made a little change in your code to show you how you can achieve what you want.

sampleApp.controller('firstpage', function ($scope, $q, $http, $templateCache, onlinedata, offlinedata) {
$scope.message = 'This is Add new order screen';
var defer = $q.defer();

    $scope.method = 'POST';
    $scope.url = 'http://ncrts.com/ncrtssales_compadmin/webservices/user_login';

    $scope.fetch = function () {
        $scope.code = null;
        $scope.response = null;
        alert($scope.response + 11) //alert11

        var defer = $q.defer();
        $http({
            method: $scope.method,
            url: $scope.url,
            cache: $templateCache
        }).
        success(function (data, status) {
            //$scope.status = status;
            $scope.message = data;
            alert($scope.message + 1) //alert1
            defer.resolve({
               status: status,
               message: data
            });                
        }).
        error(function (data, status) {
            var data = data || "Request failed";
            //$scope.status = status;
            defer.reject({
               status: status,
               message: data
            });                             
        });
        return defer.promise;
    };

    $scope.fetch().then(function (data) {
        alert('Status: ' + data.status);
        alert('Message: ' + data.message);            
    });
});

sighrobot · Accepted Answer · 2014-03-13 20:34:03Z

3

I am very confused by the formatting of your code. It may help you to write the asynchronous call in a service and then inject the service into your controller. Keeping that in mind, here is some general advice that I've learned regarding asynchronous calls and promises in AngularJS:

Your service should initially return a deferred promise. This promise should then be resolved on success() of the asynchronous call.
After $http() returns, but before success() returns, you have an unresolved promise. If you have code that you want to run after the promise is resolved, you need to use then() to indicate that you want to execute the code within the then() block once you've received data (and resolved the promise).
Not using then() for this situation will cause errors because you will be attempting to access data that doesn't yet exist.

It seems from your code that you are aware of the necessary coding strategy for what you need, but it will always help to isolate asynchronous calls into services so that the framework can make your life easier. Good luck.

answered Mar 13, 2014 at 20:34

sighrobot

4583 silver badges16 bronze badges

1 Comment

kavinhuh Over a year ago

actually I wanted to keep the ajax call seperately in service but to post here I mixed it up ,thank u for ur guidelines very useful thank u

Collectives™ on Stack Overflow

asynchronous call in angular js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related