如何使用 promise.all 获取多个 api？答案

【问题标题】：how to fetch multiple api's with promise.all?如何使用 promise.all 获取多个 api？
【发布时间】：2021-10-17 15:11:40
【问题描述】：

我一直在处理这个编码挑战，但现在我有点卡住了。我不确定我是否理解挑战。

这是挑战您的目标是创建一个显示酒店及其房间列表的页面。

查询以下 API：

https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG

这将返回带有 ID 的酒店列表。 Id 可用于查询此查询的房间类型：

https://obmng.dbm.guestline.net/api/roomRates/OBMNG/[hotelId] 例如https://obmng.dbm.guestline.net/api/roomRates/OBMNG/OBMNG1

我会怎么做呢？我读了一些关于 Promise.all 的东西——这是我需要的吗？

我有这样的事情，但不确定下一步

async componentDidMount () {

const url = "https://obmng.dbm.guestline.net/api/roomRates/OBMNG/OBMNG1";
const urlSecond = "https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG";
const response = await fetch(url);
const response = await fetch (urlSecond);
const data = await  response.json();
const data = await response.json();
this.setState({hotel:data.rooms[0], loading: false});
this.setState({hotel:data, loading:false});
console.log(data.rooms[0]);
console.log(data);

让我知道我应该做什么 - 谢谢

【问题讨论】：

为什么会有 const 变量的欺骗？它会抛出一个错误
忽略它，它可以作为我想要通过多个 api 实现的参考。
啊好吧明白了
如果您需要初始渲染的所有价格，您需要遍历酒店集合并为每家酒店提出二次请求
什么意思，能给我举个例子吗？ - 抱歉，我是视觉学习者。

标签： javascript reactjs api

【解决方案1】：

您要做的是首先获取酒店，然后为每个酒店发送一个房间信息请求。你会看到我们最终会得到一个最终的对象数组。数组中的每个索引都有一个包含酒店信息的 hotel 键，然后是一个包含该酒店所有房间信息的 rooms 键。

这是working codesandbox。

import { useEffect, useState } from 'react'

export default function App() {
  const [hotelRooms, setHotelRooms] = useState([])

  const fetchHotels = async () => {
    const res = await fetch('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG')
    const hotels = await res.json()
    
    const hotelRooms = []

    for(const hotel of hotels) {
      const res = await fetch(`https://obmng.dbm.guestline.net/api/roomRates/OBMNG/${hotel.id}`)
      const info = await res.json()
      hotelRooms.push({ hotel, rooms: info.rooms })
    }

    setHotelRooms(hotelRooms)
  }

  useEffect(() => {
    fetchHotels()
  }, [])

  return (
    <div className="App">
      {
        hotelRooms.map(h => (
          <div>
            <h2>{h.hotel.name}</h2>
            <p>{h.hotel.description}</p>

            <p style={{ fontWeight: 'bold' }}>Rooms:</p>

            {
             h.rooms.map(room => (
               <div>
                 <div>- {room.name}</div>
               </div>
             ))
            }
          </div>
        ))
      }
    </div>
  );
}

【讨论】：