Javascript 使用web worker进行api调用

我正试图找到一种干净的方法来使用web workers来执行api调用，到目前为止，我在客户端有以下内容：

worker-client.js

export const workerFetch = (method = "get", url = "/", data = {}) =>
  new Promise((resolve, reject) => {
    const listener = `worker_fetch_${url}_${new Date()}`;
    window.lootWorker.postMessage({
      cmd: "worker_fetch",
      payload: { method, url, data, listener }
    });
    window.addEventListener(
      "message",
      ({ data }) => {
        if (data.cmd === listener) {
          if (data.success) resolve(data.data);
          else reject(data.data);
        }
      },
      false
    );
  });

所以这个函数可以从客户端调用，并给出一些参数。 在网络工作者自身内部

worker-thread.js

const workerFetch = ({ method = "get", url = "", data = {}, listener = "" }) => {
  fetch({ method, url, data })
    .then(({ data }) => {
      self.postMessage({ cmd: `worker_fetch_${listener}`, success: true, data });
    })
    .catch(error => {
      self.postMessage({ cmd: `worker_fetch_${listener}`, success: false, data: error });
    });
};

self.addEventListener(
  "message",
  ({ data }) => {
    switch (data.cmd) {
      case "worker_fetch":
        workerFetch(data.payload);
        break;
      default:
        return null;
    }
  },
  false
);

---

从理论上讲，这是可行的，但我担心会在客户端冒泡出这些事件监听器，因此我提出了一个问题，看看是否有一种通用的方法来实现这一功能，重点是性能？毕竟，我们这样做是为了从主线程卸载一些东西。

我对这种模式有一些保留：

请记住，只有响应处理发生在另一个线程上，因此在卸载所有获取请求之前，您需要确保处理负载是一个瓶颈

如果您担心冒泡，应将

addEventListener

中的

useCapture

设置为

true

，并使用

stopPropagation

防止儿童冒泡

您假设所有fetch调用都按顺序返回。现在你要把工作推给一个工人，这就不能再保证了。因此，您需要用某种标识符标记每个请求

如何实施#3将有待讨论。如果您关注的是性能，那么可能需要研究一些性能UUID生成器

---

最后，似乎有一个npm包实现了这一功能：

这是一个有用且被接受的答案-不确定为什么140多个视图没有向上投票