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)
});

Answer 1

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);            
    });
});

Answer 2

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.