javascript - 如何使用主机提供的速率限制来限制我的 JS API 获取请求？

Question

到目前为止，这是我的代码:

const allRows = [];

async function fileToLines(file) {
  return new Promise((resolve, reject) => {
    reader = new FileReader();
    reader.onload = function(e) {
      parsedLines = e.target.result.split(/\r|\n|\r\n/);
      resolve(parsedLines);
    };
    reader.readAsText(file);
  });
}

document
.getElementById('fileInput')
.addEventListener('change', async function(e) {
  var file = e.target.files[0];

  if (file != undefined) {
    fileToLines(file).then( async id => {
      console.log(id)
      console.log(parsedLines)
      console.log(typeof id);

      var idInt = id.map(Number);
      var idFiltered = id.filter(function(v){return v!==''});

      console.log(idFiltered)

      for(let id of idFiltered) {
        const row = await getRelease(id);
        allRows.push(row);
      }
      download();
    });
  }
});

function getRelease(idFiltered) {
  return fetch(`https://api.***.com/releases/${idFiltered}`, {
    headers: {
    'User-Agent': '***/0.1',
    },
  })
  .then(response => response.json())
  .then(data => {
    if (data.message === 'Release not found.') {
      return { error: `Release with ID ${idFiltered} does not exist` };
    } else {
      const id = data.id;
      const delimiter = document.getElementById("delimiter").value || "|";
      const artists = data.artists ? data.artists.map(artist => artist.name) : [];
      const barcode = data.identifiers.filter(id => id.type === 'Barcode')
      .map(barcode => barcode.value);
      var formattedBarcode = barcode.join(delimiter);
      const country = data.country || 'Unknown';
      const genres = data.genres || [];
      const formattedGenres = genres.join(delimiter);
      const labels = data.labels ? data.labels.map(label => label.name) : [];
      const formattedLabels = labels.join(delimiter);
      const catno = data.labels ? data.labels.map(catno => catno.catno) : [];
      const formattedCatNo = catno.join(delimiter);
      const styles = data.styles || [];
      const formattedStyles = styles.join(delimiter);
      const tracklist = data.tracklist ? data.tracklist
      .map(track => track.title) : [];
      const formattedTracklist = tracklist.join(delimiter);
      const year = data.year || 'Unknown';
      const format = data.formats ? data.formats.map(format => format.name) : [];
      const qty = data.formats ? data.formats.map(format => format.qty) : [];
      const descriptions = data.formats ? data.formats
      .map(descriptions => descriptions.descriptions) : [];
      const preformattedDescriptions = descriptions.toString()
      .replace('"','""').replace(/,/g, ', ');
      const formattedDescriptions = '"' + preformattedDescriptions + '"';

      return [idFiltered,
        artists,
        format,
        qty,
        formattedDescriptions,
        formattedLabels,
        formattedCatNo,
        country,
        year,
        formattedGenres,
        formattedStyles,
        formattedBarcode,
        formattedTracklist
      ];
    }
  });
}

function download() {
  const ROW_NAMES = [
    "release_id",
    "artist",
    "format",
    "qty",
    "format descriptions",
    "label",
    "catno",
    "country",
    "year",
    "genres",
    "styles",
    "barcode",
    "tracklist"
  ];
  var csvContent = "data:text/csv;charset=utf-8,"
  + ROW_NAMES + "\n" + allRows.map(e => e.join(",")).join("\n");

  console.log(csvContent);

  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "my_data.csv");
  document.body.appendChild(link); // Required for FF
  link.click();
}

当我在 2.5 年前(!)尝试破解这个问题时，有人告诉我最简单的方法“是维护一个 promise 链来跟踪请求”，就像这样......

  const timer = ms => new Promise(resolve => setTimeout(resolve, ms));

  let requests = Promise.resolve();

  function getRelease(id) {
   const apiCall = requests.then(() =>
    fetch(`https://api.***.com/releases/${id}`, {
      headers: {
        'User-Agent': '***/0.1',
      }
    })   
   );

   // add to chain / queue 
   requests = apiCall.then(response => 
    +response.headers.get("X-***-Ratelimit-Remaining") <= 1 && timer(60 * 1000)
   );

   return apiCall
     .then(response => response.json())
     .then(parseReleaseData);
  }

建议此代码的人评论...

Now one request will be done after another, and if the rate limit gets reached it waits a minute.

You might want to retry in case of a rate limiting error. You could also add multiple promise queues to allow for higher throughput.

似乎我之前尝试过时，它在进行任何调用之前设置了 60 秒的延迟？我想我想再次尝试这种方法，但我不确定如何编码。比如，我不确定 const apiCall = requests.then(() => 如何适合我当前的代码。我可以看到建议的代码实际上返回“apiCall”，而我的方法设置为返回所有单独的数据字段，所以我不确定如何在那里进行。这似乎是从主机获取 Ratelimit 并根据需要设置超时的好方法，但是我真的不确定从哪里开始。有什么帮助吗？

编辑:我一直在尝试这样做，但还是不行:

const timer = ms => new Promise(resolve => setTimeout(resolve, ms));

const createThrottler = (rateLimit) => {
  let requestTimestamp = 0;
  return (requestHandler) => {
    return async (...params) => {
      const currentTimestamp = Math.floor(Date.now() / 1000);
      if (currentTimestamp < requestTimestamp + rateLimit) {
        await timer(rateLimit - (currentTimestamp - requestTimestamp))
      }
      requestTimestamp = Math.floor(Date.now() / 1000);
      return await requestHandler(...params);
    }
  }
}

const throttle = createThrottler(2500);

const throttleFetch = throttle(fetch);

Edit2:我想知道是否有问题，我将这一行注释掉了:

const rateLimit = Math.floor((60/response.headers.get("X-Discogs-Ratelimit-Remaining")) * 1000);

所以我试着取消评论，但现在我明白了

Uncaught ReferenceError: response is not defined

Edit3:我得到了让 createThrottler() 函数正常工作的建议:-

const rateLimit = 2500;

const timer = ms => new Promise(resolve => setTimeout(resolve, ms));

const createThrottler = (rateLimit) => {
  let requestTimestamp = 0;
  return (requestHandler) => {
    return async (...params) => {
      const currentTimestamp = Number(Date.now());
      if (currentTimestamp < requestTimestamp + rateLimit) {
        const timeOut = rateLimit - (currentTimestamp - requestTimestamp);
        requestTimestamp = Number(Date.now()) + timeOut;
        await timer(timeOut)
      }
      requestTimestamp = Number(Date.now());
      return await requestHandler(...params);
    }
  }
}

不能说我自己会解决这个问题，但我们做到了。所以现在我正在努力弄清楚如何以及在何处编码

const rateLimit = Math.floor((60 / response.headers.get("X-Discogs-Ratelimit-Remaining")) * 1000);

没有得到

Uncaught (in promise) ReferenceError: response is not defined

Answer 1

你看过去抖动了吗？

您可以像在任何定义的时间段内服务的 1 个调用一样对速率进行限制。将此视为量化。另一种方法是在延长的时间范围内对调用进行计数，然后无限期地或在定义的持续时间内阻止进一步的调用 - 这取决于您的首选用例。

通常，速率限制更多地与安全有关，第一个选项(在定义的时间段内服务一次调用)是恰当的。如果您为 Web API 执行此操作，您可能希望拒绝“过早”的请求，并使用适当的 HTTP 状态代码向请求者提供某种类型的反馈。

这里讨论了如何实现所有不同的选项:https://thoughtspile.github.io/2018/07/07/rate-limit-promises/

编辑:回应下面的 OP 评论并查看代码......我认为你想得太多了。

FWIW 我大部分时间都使用 debounce(相当于你的“ throttle ”)，它的字面意思是 debounce(functionReference,timeoutInMilliseconds)。

代码是这样的

function debounce(func, waitFor) {
    let timeout;
    return (...args) => new Promise(resolve => {
        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(() => resolve(func(...args)), waitFor);
    });
}

将您的 throttle(fetch) 更改为我的 debounce(fetch,2500) 应该就足够了。你不需要在该行上进行赋值操作，只需调用它，或者编写另一个名为 debouncedFetch 的函数来封装它，并在任何需要的地方调用它。