Question

我试图让我的脑袋围绕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;
}]);

}());

Answer 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'
       });

在Angular中正确使用Promises

1 个答案: