javascript - 我基于浏览器的 JS API 客户端可以工作，但处理请求似乎很慢。可能是什么问题？

Question

您可以看到每个请求花费的时间都不到一秒，当我在 Chrome 控制台中查看“瀑布”详细信息时，没有任何显示的时间超过几分之一秒，所以我不明白为什么请求处理得这么慢？我不太确定如何读取经过的总时间，但如果我正在阅读右上角的图表，我认为处理 41 个请求大约需要 3000 秒，所以每个请求大约需要 75 秒!!

谁能指导我看看到底是什么导致了这么大的延迟？ TIA。

编辑 - 这是我设置延迟的代码:

let lastRequest = 0;
const accessInterval = 1000 // delay between requests in ms

//some code

function delayFunction() {
    return new Promise((resolve,reject) => {
        setInterval(() => {
           let current = new Date().getTime();
           if (lastRequest < (current - accessInterval)) {
                lastRequest = current;
                resolve();
            }
        },10)
    })
}

Edit2:更多信息。 - 我正在访问的 API 是 https://api.discogs.com/ .

查看https://www.discogs.com/developers/我看到它说“服务器通过源 IP 将请求限制为每分钟 60 个经过身份验证的请求，每分钟 25 个未经身份验证的请求，但有一些异常(exception)。”。

响应 header 显示:

X-Discogs-Media-Type: discogs.v2
X-Discogs-Ratelimit: 25
X-Discogs-Ratelimit-Remaining: 25

...所以我想我的应用一定是未经身份验证的，对吧？我将尝试相应地增加请求之间的延迟。

Edit3:我刚刚注意到其他事情......

在“请求 header ”下显示...

Provisional headers are shown
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36              (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

...根据 https://www.discogs.com/developers/ 这是不好的

我想我会尝试使用 Firefox 进行测试，看看它是否似乎在 header 中使用了我的自定义 user-agent。

编辑:实际调用 API 的代码是:

function getRelease(id) {
  return delayFunction()
    .then(() => fetch(`https://api.discogs.com/releases/${id}`,
    {
      headers: {
        'User-Agent': 'CSVforDiscogs/0.1',
      }
    }))
    .then(response => response.json())
    .then(parseReleaseData)
  }

Answer 1

您的方法存在一些问题。

问题一:

每次调用 delayFunction 都会启动另一个间隔，这意味着如果多次调用 getRelease，您将同时进行多个间隔轮询，而实际上您只需要最多一个间隔或计时器来实现您的目标。

问题2:

getRelease 在 delayFunction Promise 解析后调用 fetch 异步:

delayFunction()
  .then(() => fetch(`https://api.discogs.com/releases/${id}`

这意味着您可以在调用 fetch 之前对 delayFunction 进行多次调用。完全违背 delayFunction 的目的。

问题三:

您永远不会在创建间隔后清除它，因此即使在 Promise 解决之后，您的间隔仍在轮询。这意味着每次调用 delayFunction 时，都会创建一个每 10 毫秒运行一次的间隔。如果您调用 getRelease 1000 次，您会创建 1000 个间隔，并且它们都不会停止。

解决方案

首先，您应该将并发控制移到getRelease 之外。 getRelease 有一个单一的目的并让调用者控制调用它的频率更有用。因此，首先，删除您的 delayFunction 并更改 getRelease，使其看起来像这样:

function getRelease(id) {
  return fetch(`https://api.discogs.com/releases/${id}`,
    {
      headers: {
        'User-Agent': 'CSVforDiscogs/0.1',
      }
    }
  )
  .then(response => response.json())
  .then(parseReleaseData)
}

然后让调用者处理对 getRelease 调用的限制。您可以为此找到许多库或片段。要搜索的关键字是 asynchronous 和 throttle。使用 async/await 你可以很容易地做到这一点。当然，您也可以在不使用 async/await 的情况下执行此操作，但它的代码并不干净，因此如果您不想使用 async/await，您可能只想为其使用一个库。

这是一个使用 async/await 的示例(假设您的 ID 在名为 releaseIds 的数组中):

;(async function ( ) { 

  const accessInterval = 1000;
  let lastRequest = new Date - accessInterval;

  for ( const id of releaseIds ) {

    // Wait until one has passed since the previous request was initiated
    await new Promise( resolve => setTimeout( resolve, lastRequest + accessInterval - new Date() ) );

    try { 
      lastRequest = new Date;
      const release = await getRelease( id );
    } catch ( err ) {
      // Handle request failure here, 
      //   Depending on the error, perhaps add another delay and retry 
      //     or loop up to some limit retrying on each iteration, increasing the delay each time you get a 429 error
      //   At a minimum just log the skipped release id with console.log( id );
    }
  }

} )();

这只是一个示例，而不是您应该使用的确切代码。您可能需要调整许多选项。也许你想要请求之间的最小延迟而不是(或除了)请求开始之间的延迟，或者你可能想要一次允许最多 5 个调用而不是一次一个(你可能会看到通过这样做可以显着提高性能)。您可以通过我提到的关键字搜索找到许多其他示例，请记住将并发控制保持在 getRelease 之外。