React Native嵌套API调用：如何同时获取角色起源与位置维度数据

核心思路 #

要同时获取每个角色的origin和location维度数据，关键是对每个角色并行发起两个接口请求（分别对应origin和location的URL），用Promise.all等待两个请求完成后，再整合所需字段。

完整代码示例 #

const axios = require('axios');

async function fetchCharactersWithDimensions() {
  // 1. 获取角色列表
  const characterResponse = await axios.get('https://rickandmortyapi.com/api/character');
  const characters = characterResponse.data.results;

  // 2. 遍历每个角色，并行请求origin和location数据
  const charactersWithDimensions = await Promise.all(characters.map(async (character) => {
    // 处理可能的空URL（部分角色的origin/location URL为null）
    const originPromise = character.origin.url ? axios.get(character.origin.url) : Promise.resolve({ data: { name: 'Unknown', dimension: 'Unknown' } });
    const locationPromise = character.location.url ? axios.get(character.location.url) : Promise.resolve({ data: { name: 'Unknown', dimension: 'Unknown' } });

    // 等待两个请求完成
    const [originRes, locationRes] = await Promise.all([originPromise, locationPromise]);

    // 3. 整合所需字段
    return {
      name: character.name,
      Image: character.image,
      gender: character.gender,
      'origin name': originRes.data.name,
      'origin-Dimension': originRes.data.dimension,
      'location name': locationRes.data.name,
      'location dimension': locationRes.data.dimension
    };
  }));

  return charactersWithDimensions;
}

// 调用函数并打印结果
fetchCharactersWithDimensions()
  .then(result => console.log(result))
  .catch(err => console.error('请求出错:', err));

关键细节说明 #

• 并行请求：用Promise.all同时发起origin和location的请求，比串行请求效率更高，减少总等待时间。
• 容错处理：针对部分角色的origin.url或location.url为空的情况，提前返回默认数据，避免请求报错中断流程。
• 字段映射：严格按照需求提取并命名字段，确保输出结果符合预期结构。

内容的提问来源于stack exchange，提问作者Surbhi Davara