在 get 调用中设置后变量仍未定义

Question

大家好，我正在尝试学习如何使用 AngularJS 和 MEAN 堆栈进行开发。我是一个初学者开发者，所以这可能是缺乏知识的问题。

所以在下面的代码中，我预设了我的变量 $rootScope.sprintStart 和 $rootScope.taskPopAgain，在运行之后通过 get 调用我尝试向它存储一个值。如果我在 get 调用中执行 console.log ，值会按预期返回，get 调用后的下一行值消失了。我在这里做错了什么？

来自 api/tasks 的值是一个包含对象的数组，api/sprint 模型应该发送单个对象。

我知道我可以清理和简化我的变量，我现在拥有它们的原因是因为它可以帮助我想象正在发生的事情。再一次，我是初学者哈哈。

感谢大家的帮助！

'use strict';

angular.module('inBucktApp')
  .service('VariableService', function () {
    // AngularJS will instantiate a singleton by calling "new" on this function
        var ticketId = 'noTicketYet';
        var ticketAssigneeName  = 'noTicketNameYet';

        return {
            getPropertyId: function () {
                return ticketId;

            },
            getPropertyName: function () {
                return ticketAssigneeName;

            }
            ,
            setProperty: function(value, valueName) {
                ticketId = value;
                ticketAssigneeName  = valueName;
            }
        };
      })
    .run(['$rootScope', '$http', 'socket', 'VariableService', function($rootScope, $http, socket, VariableService) {


        $rootScope.sprintStart;
        $rootScope.taskPopAgain;

        $http.get('/api/sprints').success(function(sprints) {

          $rootScope.sprints = sprints.pop();

          $rootScope.sprintStart = new Date($rootScope.sprints.start);
          $rootScope.sprintEnd = new Date($rootScope.sprints.end);

          console.log($rootScope.sprintStart)

          socket.syncUpdates('sprints', $rootScope.sprints);
        });

        $http.get('/api/tasks').success(function(task) {
          $rootScope.task = task;
          $rootScope.taskPop = _.flatten($rootScope.task);
          $rootScope.taskPopAgain = $rootScope.taskPop.pop();
          console.log($rootScope.task);
          // console.log($rootScope.taskPop);
          console.log($rootScope.taskPopAgain.start);
          console.log($rootScope.taskPopAgain);
          socket.syncUpdates('task', $rootScope.task);
        });

        //coming up as undefined now, so function below doesnt work.
        console.log($rootScope.taskPopAgain);
        console.log($rootScope.sprintStart);

Answer 1

这是初学者的通病。您错过了 $http 方法是异步的想法。您对 console.log 的调用发生在 $http 方法完成执行之前。在您的 success 方法中，您所做的一切都是正确的，但到那时，您的 console.log 消息已经执行。运行你的应用程序在调试器中，你会发现这是真的。

    // step 1: this code executes
    $http.get('/api/tasks').success(function(task) {
      //step 3: finally this, when the api responds
      $rootScope.task = task;
      $rootScope.taskPop = _.flatten($rootScope.task);
      $rootScope.taskPopAgain = $rootScope.taskPop.pop();
      console.log($rootScope.task);
      // console.log($rootScope.taskPop);
      console.log($rootScope.taskPopAgain.start);
      console.log($rootScope.taskPopAgain);
      socket.syncUpdates('task', $rootScope.task);
    });

    //step 2: then this
    //coming up as undefined now, so function below doesnt work.
    console.log($rootScope.taskPopAgain);
    console.log($rootScope.sprintStart);

如果您在 $http 调用、底部的 console.log 调用和成功方法中放置一个断点，您将看到执行顺序与您预期的不同。

所以，基本上，任何您想对 $http 调用返回的数据执行的操作，都需要在 INSIDE 成功调用中执行。

要解决您的问题，您可以这样做：

$http.get('/api/tasks').success(function(task) {
  $rootScope.task = task;
  $rootScope.taskPop = _.flatten($rootScope.task);
  $rootScope.taskPopAgain = $rootScope.taskPop.pop();
  myFunction();
});

function myFunction() {
  // do something with here
  console.log($rootScope.taskPropAgain); // this will not be undefined
}

在 get 调用中设置后变量仍未定义

Variable remaining undefined after being set in a get call

javascript

angularjs

mean-stack