Question

基本上我有一个从 pokeAPI 获取数据的异步函数。我浏览数据并提取我需要的内容，然后我想将该数据存储在一个变量中以备将来使用。我的问题是，一旦我退出函数，似乎所有数据都未定义，但是在函数内部，数据清楚地表明它正在按照我想要的方式存储。我已经用尽了我能想到的解决或理解问题的所有可能的想法，但我的智慧就到此为止了。

const getAllPokemon = async () => {
  try {
    const arr = [];
    const response = await fetch("https://pokeapi.co/api/v2/pokemon?limit=5");
    const data = await response.json();
    const pokeResults = data.results;
    for (let pokemon of pokeResults) {
      arr.push(getPokemonData(pokemon));
    }
    return arr;
  } catch (e) {
    return "Unable to find pokemon";
  }
};

const getPokemonData = async (pokemon) => {
  let url = pokemon.url;
  const response = await fetch(url);
  const data = await response.json();
  let pokeObj = new Object();
  pokeObj.name = data.forms[0].name;
  pokeObj.id = data.id;
  return pokeObj;
};


const pokemon = getAllPokemon();
console.log(pokemon);

Answer 1

您试图以同步方式在全局上下文中运行异步函数。所以，它还没有返回结果，所以控制台显示 'undefined'

尝试将所有代码包装在一个全局异步函数中（包括 console.log()）并调用它。并且不要忘记为所有异步函数调用添加“await”。它会帮助你。

const getAllPokemon = async() => {
  try {
    const arr = [];
    const response = await fetch("https://pokeapi.co/api/v2/pokemon?limit=5");
    const data = await response.json();
    const pokeResults = data.results;
    for (let pokemon of pokeResults) {
      arr.push(await getPokemonData(pokemon));
    }
    return arr;
  } catch (e) {
    return "Unable to find pokemon";
  }
};

const getPokemonData = async(pokemon) => {
  let url = pokemon.url;
  const response = await fetch(url);
  const data = await response.json();
  let pokeObj = new Object();
  pokeObj.name = data.forms[0].name;
  pokeObj.id = data.id;
  return pokeObj;
};

(async function() {
  const pokemon = await getAllPokemon();
  console.log(pokemon);
})()

Answer 2

您正在返回一系列承诺；您可以等待 Promise.all() 将其解析为一组值。

这是编写代码的一种更简单的方法，最后进行了更改。

async function getAllPokemon() {
  const response = await fetch("https://pokeapi.co/api/v2/pokemon?limit=5");
  const data = await response.json();
  return data.results.map(getPokemonData); // an array of promises
}

async function getPokemonData(pokemon) {
  const response = await fetch(pokemon.url);
  const data = await response.json();
  return { name: data.forms[0].name, id: data.id };
}

(async function() {
  const pokemonPromises = await getAllPokemon();
  const pokemon = await Promise.all(pokemonPromises); // Wait for all promises to resolve
  console.log(pokemon);
})()

Answer 3

您正在使用异步函数，函数调用应以 await 为前缀：

const pokemon = await getAllPokemon();
console.log(pokemon);

Answer 4

const getAllPokemon = async () => {
    try {
        const arr = [];
        const response = await fetch("https://pokeapi.co/api/v2/pokemon?limit=5");
        const data = await response.json();
        const pokeResults = data.results;
        for (let pokemon of pokeResults) {
            arr.push(await getPokemonData(pokemon));
        }
        return arr;
    } catch (e) {
        return arr;
    }
};

const getPokemonData = async (pokemon) => {
    let url = pokemon.url;
    const response = await fetch(url);
    const data = await response.json();
    let pokeObj = new Object();
    pokeObj.name = data.forms[0].name;
    pokeObj.id = data.id;
    return pokeObj;
};
const test = async () => {
    const pokemonPromises = getAllPokemon();
    const pokemon = await pokemonPromises;  // Wait for all promises to resolve
    console.log(pokemon);
}

test()

您需要等待对 getPokemonData 的承诺。该函数返回一个承诺而不是一个对象。 :

然后你可以创建另一个全局函数，在这种情况下我称之为test，然后调用它

为什么异步函数返回 undefined？

4 个答案: