WorkerPromisify

WorkerPromisify是一个可以将webWorker之间通信变成promise的形式，通常webworker使用的时候触发和响应的节点是在不同的地方，通信的时候就类似一个没有响应的异步，因此我们可以封装一层处理这个异步的调用；

WorkerPromisify使用方式

安装

npm i worker-promisify

也可以直接通过unpkg.com/worker-promisify下载下来使用。

鉴于在worker线程中importScripts的使用方式限制，WorkerPromisify也被打包成 iife / umd 的形式，在从npm库拉下来后在lib文件夹内，可根据需要将其拷贝到自己的项目中去，然后参照下面的方式使用（主要api都有体现）：

1. 通过script标签方式引入

   在主线程中：

   // index.html
   <script src="worker-promisify.min.js"></script>
   //这样就会在window暴露出WorkerPromisify变量

   // index.js 主线程
   // WorkerPromisify接受一个worker的实例作为参数传入
   const mainworker = new WorkerPromisify(new Worker('./workertest.js'))
   // 实例mainworker提供postMessage方法,接受的参数格式有一定的要求，基本也符合webWorker的语法；
   // 如下 需要是一个包含id,payload字段的对象，id字段是标识该次通信唯一性的值，payload就是通信的数据；
   const obj = {id:'111',payload:{name:'id111',buffer:new Uint8Array([255,125,25,63,15])}}
   // 下面的例子postMessage 接受了两个参数，第二个参数是在需要使用transfer方式传递数据的时候传递的二进制数据，其和使用webWorker的postMessage基本一致，只是少了[];
   mainworker.postMessage(obj,obj.payload.buffer.buffer).then(res=>{
       console.log('res111',res);
   })
   console.log('主线程首次发送111');
   // mainworker.close(); // 实例mainworker提供close方法关闭worker
   // 实例mainworker提供onmessage方法属性，跟webWorker的onmessage基本一致
   mainworker.onmessage = (e)=>{
       // 强烈建议此处返回一个promise 这样还可以通过resolve再一次的去控制发送响应消息的时机，并且还可以返回数据
       // 否则，在每一次消息发送完毕后就返回响应消息，标识发送结束
       return new Promise((resolve,reject) => {
           switch (e.data.id) {
               case '222':
                   console.log('主线程接收到worker的消息',e.data.payload)
                   // setTimeout(()=>{
                       resolve('向222返回响应')
                   // },0)
                   break;
           }
       })
   }
      

   在worker线程中:

   这样就可以不仅主线程的通信promise化，worker线程也可以promise化，全流程通信更加的便于掌控

   // workertest.js
   self.importScripts("worker-promisify.min.js")
   const childWorker = new WorkerPromisify(self)
   childWorker.onmessage = e => {
       let obj = e.data
       return new Promise((resolve,reject)=>{
           switch (obj.id) {
               case '111':
                   console.log('worker接收到首次的消息',obj.payload)
                   // childWorker.close()
                   // resolve('向111返回响应')
                   setTimeout(()=>{
                       console.log('worker延迟模拟发送消息')
                       // resolve('向111返回响应')
                       childWorker.postMessage({id: '222', payload: 'childMessage222'}).then(res=>{
                           console.log('res222',res)
                           // resolve('向111返回响应')
                       })
                       resolve('向111返回响应')
                   },3000)
                   break;
           }
       })
          
   }

2. 通过es方式引入

   安装 npm i worker-promisify

   主线程中：

   import WorkerPromisify from 'worker-promisify'
   // 其余的都和上面的使用方式一样
   const mainworker = new WorkerPromisify(new Worker('./workertest.js'))
   mainworker.postMessage(obj).then(res=>{
       console.log(res);
   })

   worker线程中：受self.importScripts() 影响还是得需要单独引入worker-promisify.min.js在你的项目服务域下