使用 AngularJs Promise 检索和存储实体

Question

在向 AngularJS 控制器方法提交表单后，我需要获取 select 菜单的值（在本例中为实体 ID）并从我的REST 端点。我知道当我使用 $http.get 时，数据是异步检索的，因此存储这些数据可能很棘手。

我一直在尝试关注一些涵盖承诺和延期的文章，但我还没有完全理解。

在下面的示例中，我想带走一个 Room 对象。现在，我只是得到一个空对象，如下所示：

{"room":{},"user":{"userId":1,"userName":"tom","links":[{"rel":"self","href":"http://localhost:8080/libroomreserve/api/user/1"}]},"startTime":"2011-01-10 00:00:00","endTime":"2011-01-10 00:00:00","note":"weewwe"}

这是我的控制器方法：

$scope.newReservation = function(){
        var packagedUser = reservationService.fetchRoomObj($scope.reservation.room).then(function(roomObj){
            return roomObj;
        });
        var finalReservation = {
            room: packagedUser,
            user: $scope.reservation.user,
            startTime: $scope.reservation.startTime,
            endTime: $scope.reservation.endTime,
            note: $scope.reservation.note
        };
        reservationService.addReservation(
            finalReservation,
            function(data){
                console.log("Success!");
                $state.go("home");
            },
            function(data){
                console.log("Failure!");
            }
        );
    };

如您所见，我正在尝试使用工厂服务方法（如下）中的承诺来检索对象。

reservations.fetchRoomObj = function(room){
    return $http.get("/libroomreserve/api/room/" + room).then(function(response){
            console.log("success http!");
            console.log(response);
            return response;
    });
};

我的 console.log() 调用 return 对象很好所以我知道我唯一的错误是将我的响应数据正确存储到变量。

如果有帮助的话，这是实际的 HTML 表格...

    <form ng-submit="newReservation()">
        <div class="form-group">
            <label>Start </label>
            <input type="text" ng-model="reservation.startTime" class="form-control">
        </div>
        <div class="form-group">
            <label>End </label>
            <input type="text" ng-model="reservation.endTime" class="form-control">
        </div>
        <!--<div class="form-group">
            <label>User </label>
            <input type="number" ng-model="reservation.user" class="form-control">
        </div>-->
        <div class="form-group">
            <label>Room </label>
            <select ng-model="reservation.room" class="form-control">
                <option ng-repeat="room in roomsList" value="{{ room.roomId }}">{{ room.roomNumber }}</option>
            </select>
        </div>
        <div class="form-group">
            <label>Note</label>
            <textarea ng-model="reservation.note" class="form-control"></textarea>
        </div>
        <button class="btn btn-success" type="submit">Reserve</button>
    </form>

JSFiddle Here

Answer 1

$http 遗留承诺方法 "success" 已被弃用。请改用标准 "then" 方法。

 return $http.get("/libroomreserve/api/room/" + room).then(function(response){
        console.log("success http!");
        console.log(response.data);
        return response.data;
});

Answer 2

你只需要在调用 then() 方法后继续你的代码：

$scope.newReservation = function() {
    reservationService.fetchRoomObj($scope.reservation.room).then(function(roomObj) {
        var finalReservation = {
            room: roomObj,
            user: $scope.reservation.user,
            startTime: $scope.reservation.startTime,
            endTime: $scope.reservation.endTime,
            note: $scope.reservation.note
        };
        reservationService.addReservation(
            finalReservation,
            function(data){
                console.log("Success!");
                $state.go("home");
            },
            function(data){
                console.log("Failure!");
            }
        );
    });
};

我直接使用 roomObj 来制作 finalReservation 对象，然后调用 addReservation() 函数。

使用 AngularJs Promise 检索和存储实体

Using AngularJs Promise to Retrieve and Store an Entity

angularjs

angular-promise