时间戳

首页 > 解决方案 > 如何使用 promise.all 获取多个 api？

javascript - 如何使用 promise.all 获取多个 api？

问题描述

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

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

查询以下 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);

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

标签： javascriptreactjsapi

解决方案

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

这是一个有效的代码框。

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>
  );
}

推荐阅读