在get get

Question

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

所以在下面的代码中，我预设了我的变量$ rootScope.sprintStart＆amp; $ 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
}