javascript - 在 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 调用以及 success 方法中放置一个断点，您将看到执行顺序不是您所期望的。

因此，基本上，您想要对 $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
}