Как вызвать один HTTP-вызов внутри другого HTTP-вызова в течение 1 oop в AngularJS? - PullRequest
Новая
       86

Как вызвать один HTTP-вызов внутри другого HTTP-вызова в течение 1 oop в AngularJS?

0 голосов
/ 02 мая 2020

Я работаю над приложением 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 ('orangeColor')

getFruitColor ('grapesColor')

getFruitDetail ('appleDetail')

getFruitDetail ('orangeDetail')

getFruitDetail ('grapesDetail')

Но то, что я на самом деле вижу во вкладке NETWORK, это:

getFruitColor ('appleColor')

getFruitColor ('orangeColor')

getFruitColor ( 'grapesColor')

getFruitDetail ('grapesDetail')

getFruitDetail ('grapesDetail')

getFruitDetail ('grapesDetail')

I Я новичок в AngularJS и Javascript, и я не понимаю, в чем здесь проблема и почему в гостинице er HTTP Call, url2 последнего элемента массива fruits происходит для каждого элемента в l oop. Может кто-нибудь объяснить, почему это происходит здесь? И что мне нужно сделать, чтобы добиться желаемого результата?

1 Ответ

0 голосов
/ 06 мая 2020

попробуйте использовать let (или 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 i для итерации (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 (или поиск в Google для разница между var / let / const)

...