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

Question

有时你想在多个地方多次使用同一个承诺的对象。例如来自 URL 的 AJAX 资源的承诺。

对象很难缓存，因为你不知道它什么时候异步可用。

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

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

fetch() 本身会返回一个 promise，当它实现时，您必须使用 .blob() 或 .json() 等方法通过第二个 promise 访问 HTTP 响应的正文。这些是"Body mixin" 的一部分。

如何使用fetch()的香草示例：

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

问题在于，即使您可以多次调用.then()，您不能在一个响应中多次调用.blob() 和.json() 等函数。

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

我错过了什么吗？有没有一种简单的方法来缓存 fetch 的 promise 的 JSON 等，而不是我看不到的？我似乎在网上找不到任何地方讨论过这个问题。

Answer 1

您不能在响应上多次调用.json() 或.text()，因为这些方法中的任何一个都会消耗主体，但是您可以在使用它之前复制响应，这样您就可以简单地缓存承诺而不是这样做：

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

Answer 2

我不熟悉 es6 承诺，但是这里是我在 angularJS 中的基本操作，在概念上是相同的。

而不是返回 fetch 给出的承诺。您使用精心制作的，这使您能够在需要时解决它：

• 如果它在缓存中，则立即
• 当服务器响应准备好并被解析时。

这是我在 angluar 的承诺中处理缓存的方式

var cache = [..]//fetching cache from somewhere using an API 
var deferred = $q.defer();//build an empty promise;
if(cache.contains('myKey')){
    var data = cache.get('myKey');
    // wrap data in promise
    deferred.resolve(data);
}else{
     fetch(req).then(function(resp) {
         resp.json().then(function(json) {
             cache.put('myKey', json);
             deferred.resolve(json);//resolve promise
         });
     });
 }
 return deferred.promise;//return the promise object on which you will be able to call `then`

由于 es6 承诺与 Angular 的承诺非常接近，您应该能够调整您的代码以适应。

Answer 3

现在我对 Promise 有了更好的理解，因此我有了一个更新的、更简洁的解决方案。毕竟我并没有完全通过.then() 进行链接，我意识到我之前的解决方案实际上使用了"The Deferred anti-pattern" aka http://taoofcode.net/promise-anti-patterns/

let cache = {};

function cachingFetchJSON(url) {
  if (!cache.hasOwnProperty(url)) {
    console.log('fetching from afar');
    cache[url] = fetch(url).then(resp => resp.json());
  } else {
    console.log('fetching from cache');
  }
  return cache[url];
}

for (let i = 0; i < 5; ++i) {
  cachingFetchJSON("//jsonplaceholder.typicode.com/albums/" + (Math.floor(Math.random() * 4) + 1))
    .then(val => console.log(val))
    .catch(c => console.error('caught', c));
}

这是我在发布此问题并从所有答案和 cmets 中学习后提出的原始解决方案：

我不只是缓存作为fetch() API 的一部分返回的promise，而是创建一个新promise，该promise 仅使用从响应正文中检索到的JSON 文本来解析。

function fetchJSON(url) {
  return new Promise((resolve, reject) => {
    console.log('fetching from afar');
    fetch(url)
      .then(resp => resp.json()
        .then(json => resolve(json)))
      .catch(reason => reject(reason));
  });
}

let cache = {};

function cachingFetchJSON(url) {
  if (!cache.hasOwnProperty(url))
    cache[url] = fetchJSON(url);
  else
    console.log('fetching from cache');
  return cache[url];
}

for (let i = 0; i < 5; ++i) {
  cachingFetchJSON("//jsonplaceholder.typicode.com/albums/" + (Math.floor(Math.random() * 4) + 1))
    .then(val => console.log(val))
    .catch(c => console.error('caught', c));
}

Answer 4

根据@Salva 的回答，我写了一个gist 使用lodash.memoize 和response.clone()。

import memoize from 'lodash.memoize';

const cache = memoize(req => {
    return fetch(req).then(response => {
        return response;
    });
}, req => req.url);

function cacheFetch(input, init) {
    return cache(new Request(input, init)).then(response => response.clone());
}

export default cacheFetch;