如何处理AngularJS中相互依赖的API调用?

时间:2016-02-09 12:36:26

标签: angularjs

所以我有一个API调用来收集有关电子商务Order的信息。 JSON响应如下所示:

{
    "id": 1, 
    "cart": {
        "cartitem_set": [
            {
                "product": 1, 
                "amount": 10, 
                ...
            }
        ], 
        ...
    },
    ...
}

product是放入购物车的商品的ID。

我想获取该产品的产品信息,例如名称,图片等。因此,我需要进行第二次API调用以获取该信息。

处理此问题的最佳方法是什么?

我做了以下事情:

.controller('orderSingleCtrl', function($scope, $http, $location, $routeParams){
    // Initiate Controller by setting values
    $scope.order;
    $scope.products = [];

    // Get the order data
    $http.get('/api/orders/'+$routeParams['id']+'?callback=JSON_CALLBACK').then(function(response){
        $scope.order = response.data;

        // Foreach CartItem that is fetched, also get the product details
        angular.forEach($scope.order.cart.cartitem_set, function(value) {
            $http.get('/api/products/'+value.product+'?callback=JSON_CALLBACK').then(function(product_response){
                // When each product data is fetched, push it to scope.
                $scope.products.push(product_response.data);
            });
        });
    });
});

我是AngularJS的新手,所以我不确定这是否是你“假设”这样做的方式。我不喜欢嵌套这样的东西。

有更好的做事方式吗?

2 个答案:

答案 0 :(得分:0)

你可以在这里使用承诺:

var promise1 = $http.get('url1');
var promise2 = promise1.then(function(data){
   return $http.get('url2', data);
});
var promise3 = promise1.then(function(data2){
   return $http.get('url3', data2);
});

答案 1 :(得分:0)

如果您可以更改序列化服务器端,则可以发送整个产品的一部分而不仅仅是其ID。或者使用另一个URL的新方法。

否则你可能有一个会从ID列表中获取产品的网址,因此你只需要一个请求。