は、私がこれまでのところ、私はこのクライアント側で起こっている、API呼び出しを実行するために、ウェブの労働者を使用するためのクリーンな方法を把握しようとしている

Question

を呼び出します。

労働者、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 
    ); 
    }); 

この機能は、クライアントから呼び出すことができ、いくつかのパラメータが与えられます。ウェブワーカー自身

労働者-thread.js内部 これは動作しますが、私は一般的な存在であるかどうかを確認するために、クライアント側では、したがって、この質問を、それらのイベントlisteneresをバブルアップが心配です理論的には

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

パフォーマンスに焦点を当てたこの機能を実現する方法？結局のところ、メインスレッドからいくつかのものを取り除くためにこれをやっています。

Answer 1

私はこのパターンについていくつかの予約を持っていると思います：あなたはあなたのペイロードを処理することは、Aであることを確認する必要があると思いますので、

1. は応答の処理のみが別のスレッド上で起きていることに注意してくださいすべてのフェッチ要求をオフロードする前にボトルネック。あなたは泡立ちが心配な場合

2. 、あなたはtrueにaddEventListenerにuseCaptureを設定し、あなたはすべてのフェッチ呼び出しが順番に返すことを想定している子どもたち

3. にバブリングを防止するためにstopPropagationを使用する必要があります。あなたは労働者に負担をかけているので、これはもはや保証することができません。だから、あなたはある種の識別子で各リクエストにタグを付ける必要があります。

どのように＃3を実装するかは議論の対象となります。パフォーマンスに重点を置いている場合は、いくつかのパフォーマンスUUIDジェネレータを調べることをお勧めします。

最後に、この機能を実現するnpmパッケージがあるようです。fetch-worker