AngularJS console.log返回真实数据，然后返回空对象

Question

I have a factory:

app.factory("ExampleFactory", function() {
    return {
        map: {}
    }
});

And controller:

app.controller("appCtrl", function($scope, $http, ExampleFactory) {
    $scope.map = ExampleFactory.map;

    $scope.init = function() {
        $http.get("/api") //success
            .success(function(result) {
                $scope.map = exampleMethod(result);
                console.log($scope.map); //{ "1": Object, "2": Object }
            });
        console.log($scope.map); //Object {}
    };

    $scope.init();
});

Why in the first case it returns an array but then returns nothing?

UPDATE: Sorry, there was another problem and it was solved by me. I will not delete the answer because I received a correct solutions for this one.

Answer 1

The first case that returns an array is actually executed second. The program flow is as follows:

1. $scope.map is set to an empty object by the factory.
2. $scope.init is called
3. $http.get sends an http request to "/api" (but the request is not returned yet)
4. $scope.map is printed to console.log , still an empty object
5. At some point after this, the web server returns your http request, at which point the .success function is called.
6. exampleMethod sets $scope.map to an array
7. $scope.map is printed to console.log , at which point it is an array

Answer 2

I think it should be retuning empty first in the console and then the array.

This is because the callback that you are passing to the success method is executed asynchronously when the response from the GET /api is received. Let's explain it inside your code:

app.controller("appCtrl", function($scope, $http, ExampleFactory) {
    $scope.map = ExampleFactory.map;

    $scope.init = function() {
        // Get request to the /api
        $http.get("/api") //success
            // here we instruct it to use our function if success 
            // but it is not executed until the response is received.
            .success(
                // Callback that is executed on success HTTP 200
                function(result) {
                     $scope.map = exampleMethod(result);

                     // Second console.log displayed after receiving 
                     // the response to the $http.get call
                     console.log($scope.map); //{ "1": Object, "2": Object }
                }
                /////////////////////////////////////////////////
                );

        // First console.log will display empty object
        console.log($scope.map); //Object {}
    };

    $scope.init();
});

Does this makes sense to you?

Happy coding!