javascript - 关于 Javascript 'then' 行为的困惑

Question

我在 Angular Controller 中有以下代码...

function doWork() {
  // show the loading modal
  $scope.modal = $ionicLoading.show({
    content: 'Fetching current location...',
    showBackdrop: false
  });

  console.log("get orig pos");

  // get the position
  PositionService.getPosition(posOptions)
    .then(function(positionArr) {
      // got 1st location // this doesn't execute!
      console.log("got original pos: " + positionArr.length);          
      $scope.locationArray = positionArr;
      $scope.dataReceived = true;
      $scope.modal.hide();
    }, function(err) {
      // something went wrong
      console.log("something wrong in getPos");
      $timeout(function() {
        $scope.modal.hide();
      }, 3000);          
    });

    console.log("get next pos");

  PositionService.getPosition(posOptions)
    .then(function(positionArr) {
      // got 2nd location // this does execute!
      console.log("got new pos: " + positionArr.length);          
      $scope.locationArray = positionArr;
      $scope.dataReceived = true;
    }, function(err) {
      // something went wrong
      console.log("something wrong in getPos");
    });
 }

当我运行程序时，正如我所期望的，PositionService.getPosition 函数被调用两次，但只执行了 then 部分之一。难道两个 then block 都不应该被执行吗？还是我误解了它在 Javascript 中的工作原理？这是getPosition函数的内容...

   getPosition : function(posOptions) {
      return $cordovaGeolocation
        .getCurrentPosition(posOptions)
        .then(function(position) {
          positionArr = positionArr.concat({
            position: position,
            status: 'new'
          });
          return positionArr;
        }, function(err) {
          console.log("PositionService: error getting position");
          return err;
        });
    },

编辑:

这是按要求的控制台输出...

Answer 1

您应该将您的调用链接到位置服务:

var p1 =  PositionService.getPosition(posOptions)
    .then(function(positionArr) {
      // got 1st location
      console.log("got original pos: " + positionArr.length);          
      $scope.locationArray = positionArr;
      $scope.dataReceived = true;
      $scope.modal.hide();
    }, function(err) {
      // something went wrong
      console.log("something wrong in getPos");
      $timeout(function() {
        $scope.modal.hide();
      }, 3000);          
    });

var p2 = p1.then (function() {
     return PositionService.getPosition(posOptions);
   }).then(function(positionArr) {
      // got 2nd location
      console.log("got new pos: " + positionArr.length);          
      $scope.locationArray = positionArr;
      $scope.dataReceived = true;
    }, function(err) {
      // something went wrong
      console.log("something wrong in getPos");
    });