从GET API提取restaurant_id复用及TypeError: response.map错误修复咨询

一、从GET API提取restaurant_id并复用的最优实现方式 #

核心思路是先请求第一个API获取数据，提取目标ID后，再传入第二个API发起请求，具体步骤如下：

1. 发起第一个API请求并解析响应
   确保将API返回的响应解析为JSON格式，拿到包含results数组的数据对象。
2. 提取restaurant_id
   从results数组中遍历提取每个对象的restaurant_id字段，推荐使用map方法快速生成ID列表。
3. 复用ID发起第二个API请求
   根据业务需求选择批量请求（如并发请求）或逐个请求，注意处理请求异常。

代码示例（基于JavaScript fetch API）：

// 第一个API请求获取餐厅列表
fetch('你的第一个API地址')
  .then(response => response.json())
  .then(data => {
    // 先校验results是否为有效数组
    if (!Array.isArray(data.results)) {
      console.error('API返回的results不是数组');
      return;
    }

    // 提取所有restaurant_id
    const restaurantIds = data.results.map(restaurant => restaurant.restaurant_id);
    
    // 示例：逐个发起第二个API请求
    restaurantIds.forEach(id => {
      fetch(`你的第二个API地址?restaurant_id=${id}`)
        .then(res => res.json())
        .then(detailData => {
          // 处理餐厅详情数据
          console.log(`餐厅ID ${id} 的详情：`, detailData);
        })
        .catch(err => console.error(`请求餐厅${id}详情失败：`, err));
    });
  })
  .catch(err => console.error('获取餐厅列表失败：', err));

如果需要并发请求优化，可以使用Promise.all提升效率：

// ... 前面步骤同上
const detailRequests = restaurantIds.map(id => 
  fetch(`你的第二个API地址?restaurant_id=${id}`).then(res => res.json())
);

Promise.all(detailRequests)
  .then(allDetailData => {
    // 处理所有餐厅详情数据
    console.log('所有餐厅详情：', allDetailData);
  })
  .catch(err => console.error('批量请求详情失败：', err));

二、修复TypeError: response.map is not a function错误 #

这个错误的本质是你调用map的对象不是数组，常见原因及解决方法：

常见原因 #

1. 直接对Response对象调用map，而非解析后的JSON数据中的results数组
2. API返回的results字段不是数组（比如是null、单个对象或未正确解析JSON）
3. 未处理API请求失败的情况，导致拿到错误的响应对象

解决步骤 #

1. 必须先解析JSON：调用response.json()将响应转为JSON对象后再处理，不要直接操作response对象
2. 校验数组有效性：在调用map前，用Array.isArray()判断data.results是否为数组
3. 添加错误捕获：确保捕获请求和解析过程中的异常

错误代码示例（导致报错）：

// 错误：直接对Response对象调用map
fetch('API地址')
  .then(response => response.map(item => item.restaurant_id))

修复后的代码：

fetch('API地址')
  .then(response => {
    // 先检查请求是否成功
    if (!response.ok) throw new Error(`请求失败：${response.status}`);
    return response.json();
  })
  .then(data => {
    // 校验results是数组
    if (Array.isArray(data.results)) {
      const ids = data.results.map(item => item.restaurant_id);
      console.log('提取的餐厅ID：', ids);
    } else {
      console.error('results字段不是数组，当前值：', data.results);
    }
  })
  .catch(err => console.error('处理过程出错：', err));

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