'make a fetch make only one call per second

I want to make a web that searches for movies in an input and that with each search in the input I get a Card on screen with the information of the movie, cover, year and title, but as the Api only allows six calls per second as soon as I search for a movie with many results the Cards start to paint badly and I get the message in the console that I have exceeded the limit of calls per second. to be able to paint a card, I have to make first a call to the Api with the title of the movie, that I have recovered from the input , in which I obtain the ID, and then, with that ID I make a second call to the API, so that it brings me the complete information of the movie. I have to do this because searching only by name brings little information.

//here I retrieve by params the value of the input, the search engine where you enter the movie name 
    const [searchParams] = useSearchParams();
    const filmSearch = searchParams.get('name')
   console.log(filmSearch)


    const [id, setID] = useState([])
    useEffect(() => {
       const fethMovies = async () => {
            try {
                 const res = await fetch(`https://mdblist.p.rapidapi.com/?s=${filmSearch}`, {
                     "method": "GET",
                     "headers": {
                         "x-rapidapi-host": "mdblist.p.rapidapi.com",
                         'X-RapidAPI-Key': ''
                     }
                 })
                 const dat = await res.json()
                 if (dat.search.length !== 0) {
                     dat.search.map(a => a.id).map(a => {
                         setTimeout(() => {
                             const fetchMov2 = async () => {
                                try {
                                     const res = await fetch(`https://mdblist.p.rapidapi.com/?i=${a}`, {
                                         "method": "GET",
                                         "headers": {
                                             "x-rapidapi-host": "mdblist.p.rapidapi.com",
                                             'X-RapidAPI-Key': ''
                                         }
                                     })
                                     const dat = await res.json()
                                     setFilmsName((filmsName) => [...filmsName, dat])
                                     console.log(dat)
                                 } catch (err) {
                                     console.log(err)
                                 }
                             }
                             fetchMov2()
                         }, 2000)
                     })
                 }
             } catch (err) {
                 console.log(err)
             }
         }
         fethMovies()
     }, [filmSearch])

I have tried in several ways to limit the fetch calls to the api, to make them one by one and with a separation of one second in between, but I have not succeeded, I keep getting the message that I exceed the limit of calls per second and I keep painting cards in white and piled up.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source