0

我想获取缓存 API 中存在的所有不同缓存的列表以及每个缓存有多少资产。即使我已经设法返回带有信息的 Map 对象，但在调用 Map.get(cacheName) 时我得到了未定义。

我已经看到，一旦页面加载完毕，如果我手动运行“cacheInfo = getCacheInfo()”，那么 cacheInfo.get() 就会起作用。

function getCacheInfo() {
  const cacheMap = new Map();
  window.caches.keys().then(function(cacheNames) {
    cacheNames.forEach(function(cacheName) {
      window.caches
        .open(cacheName)
        .then(function(cache) {
          cacheMap.set(cacheName, 0);
          return cache.keys();
        })
        .then(function(requests) {
          requests.forEach(function(request) {
            cacheMap.set(cacheName, cacheMap.get(cacheName) + 1);
          });
        });
    });
  });
  return cacheMap;
}

async function printTable() {
  const cacheInfo = await getCacheInfo();
  console.log(cacheInfo);
  console.log(cacheInfo.get('html-cache')); // Returns undefined
}

printTable();
4

1 回答 1

1

你混合语法async/await，.then为了什么？最佳实践只是使用async/await或 Promise 解决语法，而不是两者兼而有之。

对于您的情况，我认为这async/await是一个最佳选择，我将您的代码转换为使用async/await语法。我认为您需要（也许）阅读更多内容Promise, async/await以了解它们。

async function getCacheInfo() {
  const cacheMap = new Map();
  const cacheNames = await window.caches.keys();
  for (const cacheName of cacheNames) {
    const cache = await window.caches.open(cacheName);
    cacheMap.set(cacheName, 0);

    const requests = await cache.keys();
    requests.forEach((request) => {
      cacheMap.set(cacheName, cacheMap.get(cacheName) + 1);
    });
  }
  return cacheMap;
}

async function printTable() {
  const cacheInfo = await getCacheInfo();
  console.log(cacheInfo);
  console.log(cacheInfo.get('html-cache')); // Returns undefined
}

(async () => {
  await printTable();
})();
于 2019-11-01T01:06:42.090 回答