API集成：如何使用JS提取对象数组值并获取SWAPI居民属性

问题描述 #

开展JavaScript API集成开发时，需要从SWAPI开放接口拉取3个行星的名称，以及对应行星下的人物属性同步到自有系统。
已完成行星基础信息拉取，代码如下：

(async () => {

  let Name = [];
  let Diameter = [];
  let Resident = [];

  for (i = 1; i < 4; i++) {

    const PlanetDetails = await api.makeRequest({
      method: 'GET',
      url: `https://swapi.dev/api/planets/${[i]}`,
    });

    Name[i] = PlanetDetails.data.name;
    Resident[i] = PlanetDetails.data.residents;

    api.setVariable('Name1', Name[1]);
    api.setVariable('Name2', Name[2]);
    api.setVariable('Name3', Name[3]);
    api.setVariable('R1', Resident[1]);

  }
})();

当前行星接口返回的residents字段为人物资源链接列表，而非直接的人物属性值，接口返回效果如下：

需要通过JavaScript实现批量请求这些人物链接，获取肤色、身高、姓名等人物属性数据。

实现方案 #

核心逻辑：拿到行星返回的residents链接数组后，复用已有的api.makeRequest方法请求所有链接，解析返回结果即可拿到完整人物属性。

• 无接口限流场景下用Promise.all并发请求，拉取速度更快
• 有限流场景下改用串行循环请求，稳定性更高

完整可运行代码（并发版） #

(async () => {
  const PlanetData = [];
  // 要拉取的行星数量，当前需求为3个
  const PLANET_TOTAL = 3;

  for (let i = 1; i <= PLANET_TOTAL; i++) {
    // 拉取行星基础信息
    const planetResp = await api.makeRequest({
      method: 'GET',
      url: `https://swapi.dev/api/planets/${i}`,
    });
    const planetInfo = planetResp.data;

    // 批量并发拉取当前行星下所有人物数据
    const residentRequestList = planetInfo.residents.map(url => 
      api.makeRequest({ method: 'GET', url: url })
    );
    const residentRespList = await Promise.all(residentRequestList);
    
    // 按需提取需要的人物属性，字段可根据业务需求增删
    const residentInfoList = residentRespList.map(item => ({
      name: item.data.name,
      height: item.data.height,
      skin_color: item.data.skin_color,
      gender: item.data.gender,
      birth_year: item.data.birth_year
    }));

    // 组装行星+人物的结构化数据
    PlanetData[i] = {
      name: planetInfo.name,
      diameter: planetInfo.diameter,
      residents: residentInfoList
    };

    // 保留原有变量设置逻辑
    api.setVariable(`Name${i}`, PlanetData[i].name);
  }
  // 设置第一个行星的人物数据变量
  api.setVariable('R1', PlanetData[1].residents);

  // 后续同步自有系统逻辑直接读取PlanetData即可
  console.log('数据拉取完成', PlanetData);
})();

串行请求适配（防接口限流） #

如果请求过程中出现频率限制报错，把并发拉取人物的部分替换为如下串行逻辑即可：

const residentInfoList = [];
for (const url of planetInfo.residents) {
  const resp = await api.makeRequest({ method: 'GET', url: url });
  residentInfoList.push({
    name: resp.data.name,
    height: resp.data.height,
    skin_color: resp.data.skin_color
  });
}

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