How to make an api call inside of a map function with delay between each call on that api?

Question

This second api call inside of the map function needs to be called in a space of time, because this api does not allow multiple calls at the time. So, the map for each item inside of the array will take two seconds to call the api and after it go to the next item.
How can i fix it?
It does not return anything.
async function HandleMatchList(){
                try{    
                    const responseMatches = await api.get('MatchListRankedGames', {
                        params: {
                            nickname
                        }
                    })  
                    
                    const matches = responseMatches.data
    
                    const Awaitfor2seconds = (x) => {
                       return new Promise (resolve => {
                           setTimeout(() => {
                               resolve(x)
                           }, 5000)
                       })
                    }
                    
                    const linking = async (matches) => {
                        matches.map(async item => {
                          const details = await Awaitfor2seconds(
                                api.get('MatchDetailRoute', {
                                    params: {
                                        gameId: item.gameId,
                                        nickname: nickname
                                    }
                                }).then(({data}) => {
                                    data
                                })
                            )
                            return details
                        })
                    }
                
                    linking(matches).then(results => {
                        setMatches(results)
                    })

}catch(e){
                    setError(e)
                }
            }

Sven.hig · Answer

I suggest you make a sleep function separate and then you call it whenever you want to pause your API call
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
    
try{    
  const responseMatches = await api.get('MatchListRankedGames', {
      params: {
          nickname
      }
  })  
  
  const matches = responseMatches.data
    await sleep(5000)

const linking = async (matches) => {
    results=[]
    for(let item of matches){
      var details= await api.get('MatchDetailRoute', {
        params: {
            gameId: item.gameId,
            nickname: nickname
        }
    })
    results.push(details)
        await sleep(5000)
    }
      return results
  }
  linking(matches).then(results => {
      setMatches(results)
  })

}catch(e){
  setError(e)
}

iKaio · Answer

You can follow this concept (no tested):


const matches = responseMatches.data
var count = 0 // create a counter

const Awaitfor2seconds = (x) => {
  return new Promise (resolve => {
     count++ // count++ is the same thing that: count = count + 1
     setTimeout(() => {
        resolve(x)
     }, 5000*count) // using this the request will be send like a queue
  })
}

How to make an api call inside of a map function with delay between each call on that api?

2 Answers

Add your own answers!

Ask a Question