Javascript 生成$http请求会以两种不同的方式返回未定义的结果

我刚从Node.js开始，我正在尝试用pokeAPI制作pokedex，我在使用$q和$http请求时遇到了一个问题。当我尝试进行api调用时，它返回“ReferenceError:getPokes未定义”。在试图找出原因时，我发现在变量上放置getpoke会导致错误转到“ReferenceError:response未定义”。也许我不需要它，我误解了逻辑。不管怎样，我知道我遗漏了一些重要的逻辑，也许是控制器中的某些东西？非常感谢您的帮助

编辑：我发现如果我从这个.willCollectTheAll中删除pokeName，它会返回$http请求，其中pokeName位于请求中，并显示未定义（+pokeName.这很有意义，因为它没有通过，但它显示了$http正在完成，不像我在这里输入pokeName.willCollectThemAll，它说函数getPokes是未定义的，这就是我被难倒的地方

服务：

// 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;
        })
}

---

}))

我可以看出您的代码有几个问题，第一个问题是您必须返回丢失的$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;
}

---

这东西看起来像是和一个查里扎德发生了冲突

我再次认为@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]);
        }
    });
}

---

请注意，有大量错误路径需要正确解释。

我已经按照您的建议尝试了，但遗憾的是，它带回了此错误引用错误：响应未在ChildScope的Object.willCollectThemAll（pokeService.js:50）中定义。$scope.willCollectThemAll（poketrl.js:12）