Javscript function 运行缓慢

Question

我正在从带有异步 function 的 API 收集大量数据，通过循环循环大量数据，我发出大约 100 个请求，大约需要 8 秒。

有什么我可以尝试使用的方法来加速我的脚本吗？

async function getplayerdata1() {
  // Get current room
  const response = await fetch(url)
  let teams = await response.json()
  let players = teams.players
  let playerarray = players.length
  for (var i = 0; i < playerarray; i++) {
    // console.log(players[i]);
    let username = players[i].username
    let userid = players[i].id
      // read user matches
    const usermatch = await fetch(`https://api.site.com/user_profile/get_latest_matches?_=&id=${userid}&page=1`)
    let matchlist = await usermatch.json()
    let matchlistarray = matchlist.length
    for (var ii = 0; ii < matchlistarray; ii++) {
      // console.log(matchlist[ii])
      // Read match stats
      const matchlistResponse = await fetch(`https://api.site.com/match/get?_=&id=${matchlist[ii].id}`)
      let matchlistResponsestats = await matchlistResponse.json()
        // get 1st match stats
      async function matchdata() {
        if (matchlistResponsestats.players === null) {
          const kills = 0
          const deaths = 0
          const headshot = 0
          const headshotproc = 0
          return [kills, deaths, headshotproc, headshotproc]
        } else {
          const filterArray = matchlistResponsestats.players[i]
          console.log(filterArray)
          console.log(filterArray.kills)
          console.log(filterArray.deaths)
          console.log(filterArray.headshots)
        }
      }
      matchdata()
    }
  }
}
getplayerdata1()
}

Answer 1

Instead of for loops with await inside, which runs in serial (each request must finish before the next beings), use Promise.all instead, with .map to map each item in an array to a Promise, which runs in parallel (every request尽快运行，无需等待其他类似请求先完成）：

async function getplayerdata1() {
  // Get current room
  const response = await fetch(url);
  const { players } = await response.json();
  return Promise.all(players.map(async (player, playerIndex) => {
    const { username, id } = player;
    // read user matches
    const response = await fetch(`https://api.site.com/user_profile/get_latest_matches?_=&id=${id}&page=1`);
    const matchlist = await response.json();
    return Promise.all(matchlist.map(async ({ id }) => {
      // Read match stats
      const matchlistResponse = await fetch(`https://api.site.com/match/get?_=&id=${id}`);
      const matchlistResponsestats = await matchlistResponse.json();
      // get 1st match stats
      if (matchlistResponsestats.players === null) {
        return [0, 0, 0, 0];
      } else {
        const filterArray = matchlistResponsestats.players[playerIndex];
        console.log(filterArray)
        console.log(filterArray.kills)
        console.log(filterArray.deaths)
        console.log(filterArray.headshots)
      }
    }));
  }));
}

这将导致所有可能的请求立即发出。 如果 API / 您的连接可以处理它，很好 - 但如果他们不能，您可能需要限制请求。

请注意，在大多数浏览器中，一次只有大约 6 个请求会 go； 如果您一次发出 100 个请求，那么一次可能只有大约 6 个请求处于活动状态。 但是，如果底层协议是 http2，则请求可以在单个 go 中进行多路复用和发送。