如何在 AngularJS 的 for 循环中调用另一个 HTTP 调用中的一个 HTTP 调用？

问：

我正在开发一个 AngularJS 应用程序。 我有以下数组：

$scope.fruits = [
 {url1: 'appleColor', url2: 'appleDetail'},
 {url1: 'orangeColor', url2: 'orangeDetail'},
 {url1: 'grapesColor', url2: 'grapesDetail'},                 
];

现在，我像这样调用HTTP GET请求：

for(var i = 0; i < $scope.fruits.length; i++){
   var fruit = $scope.fruits[i];
   getFruitColor(fruit.url1).then(function(color){
      getFruitDetail(fruit.url2).then(function(detail){
         console.log("color is "+ color);
         console.log("detail is "+ detail);
      }):
   });
}

function getFruitColor(url){
   return $http({
        method: 'GET', url: url, params: {} }).then(getFruitComplete, getFruitFailed);
}

function getFruitDetail(url){
    return $http({ method: 'GET', url: url, params: {} }).then(getFruitDataComplete, getFruitDataFailed);
}

function getFruitDataComplete(response) {
    return response.data;
}
        
function getFruitDataFailed(error) {
    $log.error('Failed to get fruit data - '  + error.data);
}
        
function getFruitComplete(response) {
    return response.data;
}
        
function getFruitFailed(error) {
    $log.error('Failed to get fruit- '  + error.data);
}

现在，由于所有这些调用都是异步的，我预计 NETWORK 选项卡中的这些调用是这样的（由于异步性质，这些调用的顺序可能会有所不同）：

getFruitColor（'苹果色'）

getFruitColor（'橙色颜色'）

getFruitColor（'葡萄色'）

getFruitDetail（'appleDetail'）

getFruitDetail（'orangeDetail'）

getFruitDetail（'葡萄细节'）

但我实际上在 NETWORK 选项卡中看到的是：

getFruitColor（'苹果色'）

getFruitColor（'橙色颜色'）

getFruitColor（'葡萄色'）

getFruitDetail（'葡萄细节'）

getFruitDetail（'葡萄细节'）

getFruitDetail（'葡萄细节'）

我是 AngularJS 和 Javascript 的初学者，我不明白这里有什么问题，以及为什么在内部 HTTP 调用中，fruits 数组最后一个元素的 url2 对于循环中的每个元素都会发生。 谁能解释一下为什么这种行为会发生在这里？ 我应该怎么做才能达到预期的结果？