Question

在向AngularJS控制器方法提交表单之后，我需要获取选择菜单的值（在本例中是实体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（）调用返回对象就好了，所以我知道我唯一的错误是将响应数据正确存储到变量中。

如果有帮助，这是实际的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

只有在调用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（）函数。

Answer 2

$ http遗留承诺方法＆＃34;成功＆＃34;已被弃用。使用标准＆＃34;然后＆＃34;方法改为。

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

使用AngularJs Promise来检索和存储实体

2 个答案: