title: How to let a webworker do multiple tasks simultaneously?
body: <p>I am trying to let a Web-Worker manage its state, meanwhile serving multiple async requests.</p>
  
  <p>worker.ts file</p>
  
  <pre><code>let a =0; //this is my worker's state
  
  let worker=self as unknown as Worker;
  
  worker.onmessage =(e)=&gt;{
      console.log("Rec msg", e.data);
  
      if(e.data === "+1"){
          setTimeout(()=&gt;{
              a=a+1;
              worker.postMessage(a);
          },3000);
      }else if(e.data=== "+2"){
          setTimeout(()=&gt;{
              a=a+2;
              worker.postMessage(a);
          },1000)
      }
  }
  </code></pre>
  
  <p>And this is my main file: main.ts</p>
  
  <pre><code>let w =new Worker("./worker.ts", {type: "module"})
  
  let wf =async (op: string)=&gt;{
      w.postMessage(op);
      return new Promise&lt;any&gt;((res,rej)=&gt;{
          w.onmessage=res;
      });
  }
  
  (async()=&gt;{
      let f1 = await wf("+1");
      console.log("f1",f1.data);
  })();
  
  (async()=&gt;{
      let f2 = await wf("+2");
      console.log("f2",f2.data);
  })()
  </code></pre>
  
  <p>Only <code>f2</code> is returned , and <code>f1</code> is lost.
  I have used timeouts to simulate say some async task done by worker themselves.</p>
  
  <p>How do I receive both <code>f1</code> and <code>f2</code>?</p>