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

编辑2:更多信息。 - 我正在访问的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

您的方法存在一些问题。

问题 1:

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

问题2:

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

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

这意味着您可以在进行任何 fetch 调用之前对 delayFunction 进行多次调用并全部解析；完全违背了delayFunction的目的。

问题3:

创建间隔后，您永远不会清除间隔，因此即使在 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 之外。