javascript - 使用新的 fetch API 时如何缓存 Promise？

Question

有时您想在多个时间和地点使用同一个 Promise 对象。例如从 URL 获取 AJAX 资源的 promise 。

缓存对象很困难，因为您不知道它何时异步可用。

没关系，因为您可以 call .then() multiple times on a single promise因此，您可以在第一次需要它时缓存它，并在随后的时间访问缓存。当它可用时，所有 .then 都将被执行。

但是当 promise 来自the new fetch API时它似乎并不那么简单......因为涉及到第二个 promise 。

fetch() 本身返回一个 Promise，当它完成时，您必须使用诸如 .blob() 之类的方法通过第二个 Promise 访问 HTTP 响应的正文。或.json() 。这些是 "Body mixin" 的一部分.

如何使用 fetch() 的普通示例:

fetch(url).then(function(resp) {
  return resp.json().then(function(json) {
    // use the JSON
  });
});

问题在于，即使您可以多次调用.then()，您也无法调用.blob()等函数code> 和 .json() 在单个响应上多次。

看来 .json() 等的结果也需要缓存，但这应该更困难，因为它只能异步使用。在两个异步 promise 解决之前，可以请求资源两次 - 竞争条件。

我错过了什么吗？有没有一种比我看不到的简单方法来缓存 fetch 的 Promise 的 JSON 等？我似乎在网上找不到任何地方对此进行讨论。

Answer 1

您不能对响应多次调用 .json() 或 .text() 因为这些方法中的任何一个都会消耗正文，但您可以在之前复制响应使用它，你可以简单地缓存 promise ，而不是这样做:

cachedFetch.then(response => response.json()).then(console.log);

做:

cachedFetch.then(response => response.clone().json()).then(console.log);

或者将您的 fetch 调用包装在始终返回响应克隆的函数内:

doFetch().then(response => response.json()).then(console.log);

地点:

var _cached;
function doFetch() {
  if (!_cached) {
    _cached = fetch('/something');
  }
  return _cached.then(r => r.clone());
}