控制台在块外返回空值，但在块内给出正确的值答案

【问题标题】：Console returning null value outside the block but gives correct value inside it控制台在块外返回空值，但在块内给出正确的值
【发布时间】：2018-02-25 17:24:16
【问题描述】：

第二个 console.log() 返回正确的值，但第一个不是。为什么会这样？有人可以帮帮我吗？

angular.module('resultsApp', ['ngCookies'])

    .config(['$qProvider', function ($qProvider) {
        $qProvider.errorOnUnhandledRejections(false);
    }])



      .controller('resultsController', function($scope) {
        var code = localStorage.getItem('code');
        $scope.data = "";

            var dataRef = firebase.database().ref("0/"+code);

            dataRef.on('value', function(snapshot){
                console.log(snapshot.val());
                $scope.data = snapshot.val();
            });
            console.log($scope.data)
      });

【问题讨论】：

这是处理异步代码时很常见的问题。您的第二个 console.log 在数据从 firebase 返回之前被调用。这就是异步代码的工作方式——第二个控制台日志不会等到 on value 事件触发。
那么，我如何让它们同步呢？但即便如此，我想知道为什么即使在从 firebase 完全检索数据之后，我的前端中的数据也没有加载？
由于它是异步的，我建议在您的on('value') 函数中处理$scope.data 操作。
medium.com/google-developers/…

标签： javascript angularjs firebase firebase-realtime-database

【解决方案1】：

在大多数情况下，您的代码将按以下顺序执行

exec 1--> $scope.data = "";

exec 2--> var dataRef = firebase.database().ref("0/"+code);

exec 3--> dataRef.on('value', function(snapshot) { //register event and wait for response asyncronousnly
exec 5-->     console.log(snapshot.val());
exec 6-->     $scope.data = snapshot.val();
});
exec 4--> console.log($scope.data) //at this moment value of $scope.data = ""

所以你可以做的就是将你的代码移动到一个函数(let processData) 中，你想要在获取数据后执行它，然后像这样调用它

angular.module('resultsApp', ['ngCookies'])

.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}])

.controller('resultsController', function($scope) {
    var code = localStorage.getItem('code');
    $scope.data = "";

        var dataRef = firebase.database().ref("0/"+code);

        dataRef.on('value', function(snapshot){
            console.log(snapshot.val());
            $scope.data = snapshot.val();
            console.log($scope.data)
            processData($scope); //call that function here
        });

});

【讨论】：