正確使用角落中的承諾

Question

我想讓我的腦袋纏繞AngularJS中的承諾概念。

以下代碼在正確的軌道上？有人可以解釋PlateCheckService.checkPlate方法，爲什麼如果我不返回承諾？ return $http.post().then爲什麼message和alertClass對象的內部返回不起作用？我認爲這是一個鏈接/內在的承諾？

/// <reference path="angular.js" /> 
(function() { 
"use strict" 

var app = angular.module('cs'); 

app.service('PlateCheckService', ['$http', function ($http) { 
    return { 
     checkPlate: function (plateNumber) { 
      return $http.post('PlateCheck/Index', { 
       plateNumber: plateNumber 
      }).then(function (response) { 
       return { 
        message: response.data.VehicleAtl === null ? 'Clean' : 'Hot', 
        alertClass: response.data.VehicleAtl === null ? 'alert-success' : 'alert-danger' 
       } 
      }); 
     } 
    } 
}]); 

app.controller('PlateCheckCtrl', ['$scope', 'PlateCheckService', function ($scope, PlateCheckService) { 
    var plateCheck = { 
     plateNumber: '', 
     message: '', 
     alertClass: '', 
     checkPlate: function (plateNumber) { 
      var _this = this; 

      PlateCheckService.checkPlate(plateNumber).then(function (response) { 
       _this.message = response.message; 
       _this.alertClass = response.alertClass; 
      }); 
     } 
    }; 

    $scope.plateCheck = plateCheck; 
}]); 

}()); 

Answer 1

是的，這是因爲鏈接的承諾。請記住，調用then將在封裝函數被調用之前返回一個承諾。

因此，您的電話：PlateCheckService.checkPlate(plateNumber)預計會返回一個鏈接的承諾。但是，您的服務的封閉功能then未返回承諾。因此，一旦解決了鏈接，將無法連接一個then函數。

您可以用下面的僞代碼想象：如果你想在服務功能添加到一個承諾鏈

$http.get('url') 
    .then(function(response) { 
     return aPromise; 
    }) 
    .then(function(aPromiseResponse) { 
     return bPromise; 
    }) 
    .then(function(bPromiseResponse) { 
     return cPromise; 
    }) 
    .then(function(cPromiseResponse) { 
     // when scope is available 
     $scope.bindToMe = cPromiseResponse.value; 
    }); 

，然後包裹承諾函數需要返回一個承諾爲好。

我找到的最簡單的方法是使用$q.when。 $q.when將把對象包裝在承諾中，如果對象不是承諾。如果一個對象已經可用（如你的情況），那麼$q.when將立即解決。 $q.when的文檔是here。

所以，你應該能夠得到您的代碼通過在服務中使用這個工作：

return $q.when({ 
      message: response.data.VehicleAtl === null ? 'Clean' : 'Hot', 
      alertClass: response.data.VehicleAtl === null ? 'alert-success' : 'alert-danger' 
     });