javascript - Angular 使用 $http.then() 和 $q.all() 组合并行和链式请求

Question

我要进行一组相当复杂的 API 调用，并且我正在尝试尽可能优雅且高性能地完成它。我了解如何使用$http的promise api链接请求的服务，以及如何使用 $q并行发出请求的服务。但对于这个特定的 API 工作流程，我需要同时执行这两项操作。

以下是高级 API 流程的示例:

• /dog/<dog_id>
  • /breed/<breed_id>
    • /food/<food_id>
• /cat/<cat_id>
• /turkey/<turkey_id>
• /fish/<fish_id>

第一层请求都有已知的 ID。然而<breed_id>需要制作 /breed必须从 /dog 解析调用响应，以及 <food_id>需要制作 /food必须从 /breed 解析调用回复。所以/dog , /breed ，和/food一切都需要被束缚。然而/cat , /turkey ，和/fish可以与整个并行/dog链。

我现在得到的(并且工作正常)是两组独立的请求。我该如何改进这个流程？有没有一种方法可以组合两个堆栈，从而导致 .then() 的单个 Promise 执行？

var dogId = '472053',
    catId = '840385',
    turkeyId = '240987',
    fishId = '510412';

var myData = {};

var firstSetComplete = false,
    secondSetComplete = false,
    returnData = function() {
        if (firstSetComplete && secondSetComplete) {
            console.log("myData.dog", myData.dog);
            console.log("myData.dog.breed", myData.dog.breed);
            console.log("myData.dog.food", myData.dog.food);
            console.log("myData.cat", myData.cat);
            console.log("myData.turkey", myData.turkey);
            console.log("myData.fish", myData.fish);
        }
    };

// first call set
$http.get('http://example.com/dog/' + dogId)
.then(function(response) {
    myData.dog = response.data;
    return $http.get('http://example.com/breed/' + response.data.breed_id);
})
.then(function(response) {
    myData.dog.breed = response.data;
    return $http.get('http://example.com/food/' + response.data.food_id);
})
.then(function(response) {
    myData.dog.food = response.data;

    firstSetComplete = true;
    returnData();
});

// second call set
$q.all([
    $http.get('http://example.com/cat/' + catId),
    $http.get('http://example.com/turkey/' + turkeyId),
    $http.get('http://example.com/fish/' + fishId)
])
.then(function(responses) {
    myData.cat = responses[0].data;
    myData.turkey = responses[1].data;
    myData.fish = responses[2].data;

    secondSetComplete = true;
    returnData();
});

Answer 1

您可以像这样传入第一个链:

$q.all([
    $http.get('http://example.com/cat/' + catId),
    $http.get('http://example.com/turkey/' + turkeyId),
    $http.get('http://example.com/fish/' + fishId),
    $http.get('http://example.com/dog/' + dogId)
    .then(function(response) {
         myData.dog = response.data;
         return $http.get('http://example.com/breed/' + response.data.breed_id);
     })
     .then(function(response) {
         myData.dog.breed = response.data;
         return $http.get('http://example.com/food/' + response.data.food_id);
     })
     .then(function(response) {
         myData.dog.food = response.data;
         return myData;
     })
])
.then(function(responses) {
    myData.cat = responses[0].data;
    myData.turkey = responses[1].data;
    myData.fish = responses[2].data;

    secondSetComplete = true;
    returnData();
});

狗的大 promise 链最终返回一个 promise ，当调用最后一个 then 时，该 promise 得到解决，并使用最终函数的结果解决。因此，您没有理由不能将其嵌套在 $q.all() 调用中。