高效获取PokeAPI数据：3种方法减少请求次数，提升性能

2024-11-16 21:57:51

高效获取 PokeAPI 数据：减少请求次数

从 PokeAPI 获取多个宝可梦数据时，循环调用单个宝可梦 API 会导致大量请求，影响应用性能。如何减少请求次数，提升效率？本文将探讨几种解决方案。

方案一：Promise.all 并行请求

当前代码已使用 Promise.all 并行发起请求，这是不错的优化，比串行请求快很多。Promise.all 接收一个 Promise 数组，并等待所有 Promise 完成。这样，12 个请求几乎同时发出，显著减少了等待时间。

export async function fetchPokemons() {
  let pokemonIDs = [];
  for (let i = 0; i < 12; i++) {
    pokemonIDs.push(getRandomPokemonID());
  }

  const promises = pokemonIDs.map(async (id) => {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
    return response.json();
  });

  const pokemons = await Promise.all(promises);

  // ... 数据处理 ...
}

操作步骤:

生成需要获取的宝可梦 ID 数组。
使用 map 方法将 ID 数组转换成 Promise 数组。每个 Promise 发起一个 API 请求。
使用 Promise.all 等待所有 Promise 完成。
处理返回的数据。

方案二：利用 PokeAPI 的能力

PokeAPI 提供了根据逗号分隔的 ID 或名称字符串获取多个宝可梦数据的功能。这可以将 12 次请求合并成一次，大大提高效率。

示例:

export async function fetchPokemons() {
  let pokemonIDs = [];
  for (let i = 0; i < 12; i++) {
    pokemonIDs.push(getRandomPokemonID());
  }
  const commaSeparatedIds = pokemonIDs.join(',');

  const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${commaSeparatedIds}`);
  const data = await response.json();


  const pokemons = Object.values(data).map((pokemon) => ({ // Assuming data structure consistent
      id: pokemon.id,
      pokeName: pokemon.name,
      image: pokemon.sprites.other["official-artwork"].front_default,
      reactID: uuidv4(), 
  }));



  return pokemons;
}

操作步骤:

生成需要获取的宝可梦 ID 数组。
将 ID 数组用逗号拼接成字符串。
使用拼接后的字符串发起一次 API 请求。
解析返回的数据。 PokeAPI 返回的对象结构和单独查询略有不同，需要根据实际情况调整数据处理逻辑。

方案三: 批量请求（如果 PokeAPI 支持）

一些 API 提供批量请求接口，允许一次性获取多个资源。如果 PokeAPI 支持类似 /pokemon/bulk 的接口，这将是更高效的选择。可以查阅 PokeAPI 文档，确认是否有此功能。

安全性建议

错误处理: 添加 try...catch 块处理网络请求可能出现的错误，例如网络超时或 API 返回错误。
速率限制: PokeAPI 可能有速率限制。合理设置请求频率，避免被封禁。可以通过设置请求头 'X-Request-ID' 提高性能和绕开一些缓存问题。
数据验证: 对 API 返回的数据进行校验，确保数据结构符合预期，避免应用崩溃。

通过以上方案，我们可以有效减少对 PokeAPI 的请求次数，优化应用性能，提供更流畅的用户体验。选择哪种方案取决于具体需求和 PokeAPI 的功能支持。记住合理使用 API，尊重 API 提供方的规则。