Map.get() returns 异步函数内部未定义

Question

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

我已经看到，一旦页面加载完毕，如果我手动运行 '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();

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

Map.get() returns 异步函数内部未定义

Map.get() returns undefined inside async function

javascript

async-await

cacheapi