javascript - 从 service worker 返回带有 JSON 的 Response 对象

Question

我正在尝试连接到某些 JSON 的获取请求，并检查数据是否在 IndexedDB 中以在进入网络之前获取它。我认为我的 promise 没有兑现，但发生了一些奇怪的事情。

这是我的代码:

event.respondWith(async function() {
        var data = {success:true, msg:'', data: []};

        localforage.iterate(function(value, key) {
            data.data.push([key, value])
        })
        if (data.data.length > 0) {
            return await new Response(JSON.stringify(data),{
                headers: { "Content-Type" : "application/json" }
            });
        }

        let response = await fetch(event.request)
        // clone response as it can only be used once and needs to be returned for client fetch
        let responseData = await response.clone().json()
        await responseData.data.forEach(function (todo) {
            localforage.setItem(todo[0], todo[1])
        })

        return response

    }())

但是，当 if 解析为 true(IndexedDB 中的数据)时，我的前端得到一个空的响应对象。就好像我的响应对象是在 IndexedDB promise 解决之前创建的。

Answer 1

在无法运行代码的情况下有点猜测但是

• 我认为你需要等待 localforage.iterate 因为它返回一个 promise

• 我认为您还需要等待 localforage.setItem 因为 它也返回一个 promise - 使用 Promise.all 和 map 应该为你处理它

  var data = {success:true, msg:'', data: []};
  
  await localforage.iterate((value, key) => {
      data.data.push([key, value])
  })
  if (data.data.length > 0) {
      return new Response(JSON.stringify(data),{
          headers: { "Content-Type" : "application/json" }
      });
  }
  
  let response = await fetch(event.request)
  // clone response as it can only be used once and needs to be returned for client fetch
  let responseData = await response.clone().json()
  await Promise.all(responseData.data.map(todo => {
      return localforage.setItem(todo[0], todo[1]);
  }));
  
  return response;