vite+vue3使用webworker

1、具体的worker文件
//search.worker.js
/** 监听主线程发送的消息*/
self.onmessage = (messageEvent) => {
   ...
   ...
  //把处理后的结果返回
  this.postMessage(**);
};
2、包装worker相应的逻辑
//search.js
import workerCode from './search.worker.js?raw';//?raw是为了标识以文件的方式import,而不是以内容
const blob = new Blob([workerCode], { type: 'application/javascript' });
const workUrl = window.URL.createObjectURL(blob);
let worker = null;
export const searchFn = (options) => {
  return new Promise((resolve, reject) => {
    worker = new Worker(workUrl);
    // 通过通道传数据
    worker.postMessage(JSON.stringify(options));
    worker.onmessage = (e) => {
      // 获取到的搜索结果
      let _data = e.data && JSON.parse(e.data);
      resolve(_data);
    };
  });
};
3、在vue文件中使用时
//index.vue
import { searchFn } from './search.js';
searchFn(**).then(res=>{
  //获取到的结果
  }
).catch(err=>{
  }
)
4、扩展

①、关于window.URL.createObjectURL,可以参考文章

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容