【JS New Worker】使用URL.createObjectURL灵活创建多线程

开发中遇见一个需要请求多数据以及对数据进行复杂处理的场景，如果放在主线程那么占用线程的时间会很多，因此考虑使用worker来处理，而且这个worker只是在特定的场景使用，因此使用URL.createObjectURL比较灵活，在此记录一下

const blob = new Blob(
      [
        `
        let workerTime = 0;
        self.fetch('http://localhost:3000/api/user?current=1&pageSize=100', { 
          method:'GET',
          headers:{
            "Content-Type":"application/json"
          }
        }).then(async(res)=>{
          const result = await res.json()
          //这里可以对数据进行处理
          self.postMessage(result);
        })
        
        `,
      ],
      { type: 'application/javascript' },
    )
		//创建链接
		const workerUrl = URL.createObjectURL(blob)
    //创建worker
    const worker = new Worker(workerUrl)
    //监听worker
    worker.onmessage = (ev) => {
      console.log('Out of Worker: ', ev.data)
      //使用结束之后释放url
      URL.revokeObjectURL(workerUrl)
    }

这样创建的worker比较方便

使用结束之后记得释放URL,URL.revokeObjectURL(workerUrl)