在 Angular 中正确使用 Promise答案

【问题标题】：Correct use of Promises in Angular在 Angular 中正确使用 Promise
【发布时间】：2013-10-27 20:34:07
【问题描述】：

我正在努力理解 AngularJS 中的 Promise 概念。

以下代码是否在正确的轨道上？有人可以解释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;
}]);

}());

【问题讨论】：

标签： javascript angularjs promise

【解决方案1】：

是的，这是因为链式承诺。请记住，对 then 的调用将在调用它所包含的函数之前返回一个 Promise。

因此，您在此处调用：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;
    });

如果您想向服务中的 Promise 链添加功能，则包装后的 Promise 函数也需要返回一个 Promise。

我发现最简单的方法是使用$q.when。如果对象不是 Promise，$q.when 会将对象包装在 Promise 中。如果一个对象已经可用（就像您的情况一样），那么$q.when 将立即解决。 $q.when 的文档是 here。

因此，您应该能够通过在服务中使用它来让您的代码工作：

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

【讨论】：