0

我正在开发一个 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('appleColor')

getFruitColor('橙色颜色')

getFruitColor('葡萄颜色')

getFruitDetail('appleDetail')

getFruitDetail('orangeDetail')

getFruitDetail('grapesDetail')

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

getFruitColor('appleColor')

getFruitColor('橙色颜色')

getFruitColor('葡萄颜色')

getFruitDetail('grapesDetail')

getFruitDetail('grapesDetail')

getFruitDetail('grapesDetail')

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

4

1 回答 1

2

尝试使用let(or const) 而不是var这个作业：var fruit = $scope.fruits[i];. 像这样的东西应该可以解决问题：

for(var i = 0; i < $scope.fruits.length; i++) {
   const fruit = $scope.fruits[i];
   getFruitColor(fruit.url1).then(function(color) {
      getFruitDetail(fruit.url2).then(function(detail) {

还可以考虑使用let ifor 迭代 ( for(let i = ...).

请注意，var它将被提升到外部范围，并且每次迭代都会覆盖相同的变量。所有调用都getFruitDetail将仅使用最新值，fruit这就是为什么您会看到 3 个调用grapesDetail.

var和let/之间的主要区别const是var函数作用域，而let/const是块作用域。这个链接可能很有趣：https ://dev.to/sarah_chima/var-let-and-const--whats-the-difference-69e （或谷歌搜索var/let/const之间的区别）

于 2020-05-06T00:23:28.837 回答