$ httpリクエストをいくつかの方法で未定義に返します

Question

私はNode.jsから始めてpokeAPIを使ってpokedexを作成しようとしていますが、$ qと$ http要求を使用している問題があります。私がAPIコールを作成しようとすると、 "ReferenceError：getPokesが定義されていません"が返されます。原因を突き止めようとしている間に、変数にgetPokesを置くと、エラーが "ReferenceError：response is not defined"に行きます。たぶん私はそれを必要としないと私はロジックを誤解しています。いずれにしても、私は重要なロジックが欠けているのを知っています。すべての助けが大いに評価されます！

編集：私は以来、私はthis.willCollectThemAllからpokeNameを削除した場合、それはpokeNameが要求していると（http://pokeapi.co/api/v2/pokemon/ + pokeName未定義を示し、ここでの$ HTTP要求を持ち帰ることがわかってきました、それは渡さなっていないと意味があります。で、それは、私はそれが機能getPokesは、私は困惑どこでどの未定義であると言うthis.willCollectThemAllにpokeNameに入れた場合にどことは異なり、$ HTTP完成を見せて

サービス：。

// INITIALIZE SERVICE 
// ============================================================ 
angular.module("app").service("pokeService", function($http, $q, $timeout) { 
// ============================================================ 
this.willCollectThemAll = function(pokeName) { 
    var deferred = $q.defer(); 
    var pokemon = false; 
    var morePokemon = false; 
    var pokemonCaught = false; 
    var allPokemonCaught = false; 


    getPokes = function(pokeName) { 
     $http({ 
      url: 'http://pokeapi.co/api/v2/pokemon/' + pokeName, 
      method: 'GET' 
     }).then(function(response) { 
      console.log('service:', response); 
      pokemon = response.data; 
      pokemonCaught = True; 
      checkAllPokemon(); 

     }) 
    } 
    getMorePokes = function(pokeName) { 
     $http({ 
      url: 'http://pokeapi.co/api/v2/pokemon-species/' + pokeName, 
      method: 'GET' 
     }).then(function(response) { 
      console.log('service:', response); 
      morePokemon = response.data; 
      allPokemonCaught = true; 
      checkAllPokemon(); 

     }) 
    } 

    function checkAllPokemon() { 
     if (pokemonCaught && allPokemonCaught) { 
      if (pokemon && morePokemon) { 
       deferred.resolve(true); 
      } else { 
       deferred.reject(true) 
      } 
     } 
    } 
    console.log('service', response) 
    getPokes(); 
    getMorePokes(); 
    return deferred.promise; 

} 

を} ）;

コントローラー：

// INITILIZE CONTROLLER 
// ============================================================ 
angular.module("app").controller("pokeCtrl", function($scope, $q, pokeService) { 

// VARIABLES 
// ============================================================ 


// FUNCTIONS 
// ============================================================ 
$scope.willCollectThemAll = function() { 

    pokeService.willCollectThemAll($scope.pokeName.toLowerCase()) 
     .then(function(response) { 
      console.log(pokeService, response); 
      $scope.pokeData = response; 
     }) 
} 

}）。

Answer 1

私はあなたのコードといくつかの問題を見ることができました。数字の1つは、あなたが不足している$ http呼び出しを返さなければならないということです。

this.willCollectThemAll = function(pokeName) { 
    var deferred = $q.defer(); 
    var pokemon = false; 
    var morePokemon = false; 
    var pokemonCaught = false; 
    var allPokemonCaught = false; 


    getPokes = function(pokeName) { 
     return $http({ 
      url: 'http://pokeapi.co/api/v2/pokemon/' + pokeName, 
      method: 'GET' 
     }).then(function(response) { 
      return response.data; 
     }) 
    } 
    getMorePokes = function(pokeName) { 
     return $http({ 
      url: 'http://pokeapi.co/api/v2/pokemon-species/' + pokeName, 
      method: 'GET' 
     }).then(function(response) { 
      return response.data; 
     }) 
    } 

    function checkAllPokemon() { 
     if (pokemonCaught && allPokemonCaught) { 
      if (pokemon && morePokemon) { 
       deferred.resolve(true); 
      } else { 
       deferred.reject(true) 
      } 
     } 
    } 

    getPokes().then(function (data){ 
     pokemon = data; 
     pokemonCaught = true; 
     checkAllPokemon(); 
    }); 

    getMorePokes().then(function (data){ 
     morePokemon = response.data; 
     allPokemonCaught = true; 
     checkAllPokemon(); 
    }); 
    return deferred.promise; 
} 

Answer 2

このことは、Charizardで実行されているように見えます。

もう一度@AliBaigには権利があると思うが、アプリケーションロジック自体には問題がある。私はあなたが最初にすべてを得ることができなければ、あなたがより多くのポケモンを得るように約束を繋ぐことを望んでいると思う。

ここにあなたのコードで素早く飾ってあります。

this.willCollectThemAll = function(pokeName) { 
    // $q.when() is a nice shortcut for this logic and creates a new promise each time. 
    //var deferred = $q.defer(); 
    var pokemon; // prolly better to make these empty arrays then check for length instead of checking for boolean value. 
    var morePokemon; 
    var pokemonCaught = false; 
    var allPokemonCaught = false; 

    // getPokes returns a promise. 
    var getPokes = function(pokeName) { 
     return $http({ 
      url: 'http://pokeapi.co/api/v2/pokemon/' + pokeName, 
      method: 'GET' 
     }).then(function(response) { 
      return response.data; 
     }) 
    } 
    // getMorePokes also returns a promise. 
    var getMorePokes = function(pokeName) { 
     return $http({ 
      url: 'http://pokeapi.co/api/v2/pokemon-species/' + pokeName, 
      method: 'GET' 
     }).then(function(response) { 
      return response.data; 
     }) 
    } 

    // If you resolve the promise here you will be trying to resolve the same promise multiple times. 
    function checkAllPokemon() { 
     if (pokemonCaught && allPokemonCaught) { 
      if (pokemon && morePokemon) { 
       //deferred.resolve(true); 
       return true; 
      } else { 
       //deferred.reject(true); 
       return false; 
      } 
     } 
    } 

    // Have getPokes() return a promise and give this promis back to the controller. 
    return getPokes().then(function (data){ 
     pokemon = data; 
     pokemonCaught = true; 
     // In either case here we're gonna return a promise. 
     if (!checkAllPokemon()) { 
      return getMorePokes().then(function(data) { 
       morePokemon = response.data; 
       allPokemonCaught = true; 
       //returning pokemon with ES6 syntax cuz I'm lazy. 
       return checkAllPokemon() ? $q.when([...pokeman, ...morePokemon]) : $q.reject('Did not getem all. :('); 

      }); 
     } else { 
      // If we already have the pokemon don't bother chaining again. 
      return $q.when([...pokeman, ...morePokemon]); 
     } 
    }); 
} 

注意すべきは、適切に考慮されるべきエラー経路のスルーです。あなたが示唆したように、私が試した