如何在地图函数内部进行 api 调用，并在该 api 上的每次调用之间有延迟？答案

【问题标题】：How to make an api call inside of a map function with delay between each call on that api?如何在地图函数内部进行 api 调用，并在该 api 上的每次调用之间有延迟？
【发布时间】：2020-11-12 15:09:56
【问题描述】：

map函数内部的第二个api调用需要在一段时间内调用，因为这个api不允许同时调用多个。因此，数组中每个项目的映射将需要两秒钟来调用 api，然后再转到下一个项目。我该如何解决？它不返回任何东西。

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

【问题讨论】：

停止使用 .map() 并使用普通的 for 循环。 .map() 不支持异步，但常规的 for 循环是。

标签： javascript reactjs asynchronous promise async-await

【解决方案1】：

您可以遵循这个概念（未经测试）：

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

【讨论】：

【解决方案2】：

我建议你单独创建一个 sleep 函数，然后在你想暂停 API 调用时调用它

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

【讨论】：