【问题标题】:How to throttle my JS API fetch requests, using the rate-limit supplied by the host?如何使用主机提供的速率限制来限制我的 JS API 获取请求?
【发布时间】:2022-01-05 15:26:07
【问题描述】:

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

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 年前(!)之前试图解决这个问题时,有人告诉我最简单的方法是“保持一系列承诺来跟踪请求”,就像这样......

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

建议此代码的人发表了评论...

现在一个请求将一个接一个地完成,如果达到速率限制,它会等待一分钟。

如果出现速率限制错误,您可能需要重试。您还可以添加多个承诺队列以提高吞吐量。

似乎当我之前尝试过时,它在拨打任何电话之前设置了 60 秒的延迟?我想我想再次尝试这种方法,但我不确定如何编码。就像,我不确定const apiCall = requests.then(() =&gt; 是否适合我当前的代码。我可以看到建议的代码实际上返回了“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);

所以我尝试取消注释它,但现在我明白了

未捕获的引用错误:response 未定义

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

【问题讨论】:

  • 使用带有lodash debounce的生成器函数。

标签: javascript json csv


【解决方案1】:

你看过debounce吗?

您可以在任何定义的时间段内对 1 次通话进行费率限制。将其视为量化。另一种方法是在延长的时间范围内计算调用次数,然后无限期或在定义的持续时间内阻止进一步调用 - 这取决于您的首选用例。

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

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

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

FWIW 我在大多数情况下使用 debounce(相当于您的“油门”),它实际上是按照 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 的函数来封装它,然后从您需要的任何地方调用它。

【讨论】:

  • 感谢您的回复。我一直在尝试使用“包装函数”来做到这一点,但它仍然不存在。请参阅我的 OP 以获取我的新代码的更新。
  • @double-happiness 我已经在我的答案中添加了一个编辑。如果有帮助,请告诉我。
  • 谢谢。我正在尝试坚持使用包装方法或我现在在编辑中发布的任何名称。有人告诉我,在设置 requestTimestamp 的位置方面存在逻辑问题,所以我在尝试其他任何事情之前尝试解决这个问题。不过,我稍后会进一步研究您的建议,TY。
【解决方案2】:

试试promise-ratelimit

来自他们的文档:

var throttle = require('promise-ratelimit')(2000); /* rateInMilliseconds */

var startTime = Date.now();

for (var i = 0; i < 10; i++) {
    throttle().then(function() { console.log(Date.now() - startTime); });
}

【讨论】:

  • 感谢您的回复。我一直在尝试使用“包装函数”来做到这一点,但它仍然不存在。请参阅我的 OP 以获取我的新代码的更新。
猜你喜欢
  • 2018-08-07
  • 1970-01-01
  • 2017-10-03
  • 2013-12-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多