如何在承諾中呼叫fetch？

我正在使用 pokeapi 并且我正在為每個 pokemon 的 promise 中創建一個物件，但我必須獲取 .species 和另一個 URL 中的資訊，所以我正在呼叫另一個 fetch 但沒有給我資料。

const fetchPokemon = () => {
  const promises = [];
  for (let index = 1; index <= 150; index  ) {
    const url = `https://pokeapi.co/api/v2/pokemon/${index}`;
    promises.push(fetch(url).then((res) => res.json()));
  }
  Promise.all(promises).then((results) => {
    const pokemon = results.map((data) => ({
      name: data.name,
        egg_groups:  getEgg(data)
    }));

我在 egg_groups 中呼叫的方法是這樣的：

return fetch(data.species.url).then((response) => response.json()).then(
    (res)=> res.egg_groups.map((egg_group) => egg_group.name).join(" and "));

egg_groups() 的結果

我怎樣才能得到“怪物和植物”而不是整個承諾？

uj5u.com熱心網友回復：

getEgg您可以為陣列中的每個結果呼叫該函式results，然后將其鏈接.then并使用Promise.all.

const fetchPokemon = () => {
  const promises = [];
  for (let index = 1; index <= 2; index  ) {
    const url = `https://pokeapi.co/api/v2/pokemon/${index}`;
    promises.push(fetch(url).then((res) => res.json()));
  }
  return Promise.all(promises).then((results) =>
    Promise.all(results.map((data) =>
      getEgg(data).then((egg) => ({
        name: data.name,
        egg_groups: egg,
      }))
    ))
  );
};

function getEgg(data) {
  return fetch(data.species.url)
    .then((response) => response.json())
    .then((res) =>
      res.egg_groups.map((egg_group) => egg_group.name).join(" and ")
    );
}

fetchPokemon().then((pokemons) => pokemons.map(poke => {
  document.body.innerHTML  = `<p>${poke.name} - ${poke.egg_groups}</p>`
}));

您還可以在getEgg函式內為每個 pokemon 生成資料（重命名為getData），如下所示：

const fetchPokemon = () => {
  const promises = [];
  for (let index = 1; index <= 2; index  ) {
    const url = `https://pokeapi.co/api/v2/pokemon/${index}`;
    promises.push(fetch(url).then((res) => res.json()));
  }
  return Promise.all(promises).then((results) =>
    Promise.all(results.map(getData))
  );
};

function getData(data) {
  return fetch(data.species.url)
    .then((response) => response.json())
    .then((res) => ({
      name: data.name,
      egg_groups: res.egg_groups
        .map((egg_group) => egg_group.name)
        .join(" and "),
    }));
}

fetchPokemon().then((pokemons) =>
  pokemons.map((poke) => {
    document.body.innerHTML  = `<p>${poke.name} - ${poke.egg_groups}</p>`;
  })
);

uj5u.com熱心網友回復：

我建議使用async 和 await 語法，這允許您以更易讀的方式構建異步代碼。

我們將創建一個getPokemon()接受索引引數的函式。一旦我們檢索到 pokemon 物件 using fetch()，我們就可以eggs使用相同的函式來獲取 pokemon 物件。

然后我們可以回傳一個包含 pokemon 名稱、egg_groups 等的物件。

然后我們還可以創建一個getPokemonArray()函式來獲取一個口袋妖怪陣列，將開始和結束索引作為引數：

async function getPokemon(index) {
    const url = `https://pokeapi.co/api/v2/pokemon/${index}`;
    const pokemon = await fetch(url).then((res) => res.json());
    const eggs = await fetch(pokemon.species.url).then((response) => response.json());
    const egg_groups = eggs.egg_groups.map((egg_group) => egg_group.name).join(" and ");
    return { index, name: pokemon.name, egg_groups };
}

async function getPokemonArray(startIndex, endIndex) {
    let promises = [];
    for (let index = startIndex; index <= endIndex; index  ) {
        promises.push(getPokemon(index));
    }
    let pokemonArray = await Promise.all(promises);
    console.log('Pokemon array:', pokemonArray);
    return pokemonArray;
}

getPokemonArray(1,3);

getPokemonArray(40,42);

.as-console-wrapper { max-height: 100% !important; }

uj5u.com熱心網友回復：

您應該為 map 函式插入 async 關鍵字，以便在此處使用 await。由于您需要“等待”承諾解決以獲得結果。

Promise.all(promises).then((results) => {
  const pokemon = results.map(async (data) => ({
    name: data.name,
    egg_groups: await getEgg(data)
  }));
  return pokemon;
});

標籤：javascript 承诺 拿来 pokeapi

上一篇：Pyspark根據row_number值增加時間戳列

下一篇：正確的正則運算式使用javascript匹配不包括特定字符的字母