javascript - 获取 X 金额后停止请求

Question

我想从客户端获取一个外部的第三方 api。但是提要很大(一个数组中有 160,000 个对象)
我无法控制外部 api。
是否可以将最大限制设置为字节数？所以在这种情况下我可以获取大约 50,000 个对象？因为加载时间太长
我一直在阅读 axios和 maxContentLength和 maxBodyLength但没有任何运气 - 它没有任何效果。
此外，该 api 不支持任何分页，如 ?size=20&page=1所以可以使用 XMLHttpRequest，我可以在评论中说明。但是使用 fetch 函数是否可以实现相同的解决方案？因为我们没有这个 e.loaded

Answer 1

好的，这是一个简单的 PoC，只是为了测试这个想法(感谢 Anime News Network 为那个美妙而真正的公共(public) API):

async function limitedFetch(url, maxBytes) {
  return new Promise((resolve, reject) => {
    try {
      const xhr = new XMLHttpRequest();
      xhr.onprogress = (ev) => {
        console.log(`Received ${ev.loaded} bytes`);
        if (ev.loaded < maxBytes) return;
        resolve(ev.target.responseText);
        xhr.abort();
      };
      xhr.onload = (ev) => {
        resolve(ev.target.responseText);
      };
      xhr.onerror = (ev) => { reject(new Error(ev.target.status)) }

      xhr.open('GET', url);
      xhr.send();
    }
    catch (err) {
      reject(err);
    }
  });
}

const out = document.querySelector('pre');
const filter = document.querySelector('#filter');
document.querySelectorAll('button').forEach(
  btn => btn.addEventListener('click', async (ev) => {
    const rateLimit = ev.target.dataset.rate || Infinity;
    const cacheBuster = '&' + Date.now();
    const animeApiUrl = 
    `https://cdn.animenewsnetwork.com/encyclopedia/api.xml?title=~${filter.value}`;
    out.textContent = 'Waiting...';
    console.clear();
    try {
      const response = await limitedFetch(animeApiUrl + cacheBuster, rateLimit);
      out.textContent = `Received ${response.length} characters:
  ${response}`;
    }
    catch (err) {
      out.textContent = `Oh noes! ${err.message}
  ${err.stack}`;
    }
  })
);

<input id="filter" value="a" style="width: 5em"></input>
<button type="button">Release the FULL Kraken!</button>
<button type="button" data-rate="1000">Release the Rated Kraken!</button>
<pre></pre>

这里的关键是使用 onprogress XMLHttpRequest 事件来跟踪接收到的字节数(即 ProgressEvent 对象上的 loaded 属性)。当它超出限制时，提取器立即解析 - 并丢弃相应的请求。
使用不同的释放按钮，您会看到总体接收到的两个字节的差异 - 以及 console.log 的数量消息(为每个接收到的数据 block 触发)。
现在要注意了:使用默认过滤器(只是 'a')'rated' 请求永远不会在 1000 字节处停止；这不是 block 的工作方式。相反，总是有一个不大于〜50K字节的 block ；有“评级”的请求，这是唯一的一个，没有评级的，会有三个左右。