如何使用Promise.all调用多个接口获取酒店及对应房型数据？

现有代码问题 #

• 同作用域下重复用const声明response、data同名变量，存在语法错误
• 接口调用逻辑不符合需求：没有先获取全量酒店列表再动态请求对应房型，反而写死了单个酒店id的请求
• 多次执行setState赋值同一个hotel字段，会导致状态覆盖，无法存储全量酒店+房型的对应数据

正确实现逻辑 #

你需要先请求酒店列表接口拿到所有酒店id，再批量生成每个酒店的房型请求，通过Promise.all并行执行所有请求，最后合并数据存入状态即可，调整后代码如下：

async componentDidMount () {
  try {
    // 1. 先请求酒店列表接口
    const hotelListUrl = "https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG";
    const hotelListRes = await fetch(hotelListUrl);
    const hotelList = await hotelListRes.json();

    // 2. 生成所有酒店的房型请求promise数组
    const roomRequestPromises = hotelList.map(hotel => 
      fetch(`https://obmng.dbm.guestline.net/api/roomRates/OBMNG/${hotel.id}`)
      .then(res => res.json())
    );

    // 3. 批量执行所有房型请求，拿到返回结果
    const allRoomData = await Promise.all(roomRequestPromises);

    // 4. 合并酒店基础信息和对应房型数据，可按自己的渲染需求调整数据结构
    const hotelWithRooms = hotelList.map((hotel, index) => ({
      ...hotel,
      rooms: allRoomData[index]?.rooms || []
    }));

    // 5. 存入state
    this.setState({
      hotelList: hotelWithRooms,
      loading: false
    });
  } catch (err) {
    // 接口错误处理，可根据需求调整
    console.error('接口请求失败：', err);
    this.setState({
      loading: false,
      error: err.message
    });
  }
}

补充说明 #

• Promise.all会并行执行传入的所有promise，所有请求完成后才会返回结果数组，结果顺序和传入的promise顺序完全一致，所以可以直接用索引匹配酒店和对应的房型数据
• 代码里增加了try/catch错误捕获，避免接口报错导致页面崩溃，你可以根据自己的业务需求添加错误提示逻辑

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