useWorkerFunction

将函数在 Web Worker 中执行，自动处理序列化和通信。

前置依赖

依赖参数

参数名	类型	说明
deps.Worker	WorkerConstructor	Worker 构造函数
deps.Blob	Window['Blob']	Blob 构造函数
deps.URL	Window['URL']	URL 对象（createObjectURL/revokeObjectURL）
deps.setTimeout	typeof setTimeout	设置定时器
deps.clearTimeout	typeof clearTimeout	清除定时器

环境要求

• 浏览器环境: 使用 Web Worker、Blob 和 URL API

函数签名

function useWorkerFunction<T extends any[], R>(
  fn: WorkerFunction<T, R>,
  options?: WorkerFunctionOptions,
  deps: WorkerFunctionDeps
): {
  execute: (...args: T) => Promise<R>
  terminate: () => void
  status: Ref<WorkerStatus>
}

type WorkerFunction<T extends any[], R> = (...args: T) => R | Promise<R>

interface WorkerFunctionOptions {
  timeout?: number  // 超时时间（毫秒），默认 30000
}

interface WorkerFunctionDeps {
  Worker: WorkerConstructor
  Blob: Window['Blob']
  URL: Window['URL']
  setTimeout: typeof setTimeout
  clearTimeout: typeof clearTimeout
}

参数

参数名	类型	必填	默认值	说明
fn	WorkerFunction<T, R>	是	-	要在 Worker 中执行的函数
options.timeout	number	否	30000	超时时间（毫秒）
deps	WorkerFunctionDeps	是	-	依赖注入对象

返回值

类型	说明
{ execute, terminate, status }	返回执行函数和控制方法

工作原理

1. 函数序列化：

   • 将函数转换为字符串：fn.toString()
   • 创建 Worker 脚本：包装函数并设置消息监听
   • 使用 Blob 和 URL.createObjectURL 创建 Worker URL

2. 创建 Worker：

   • 使用生成的 URL 创建 Worker 实例
   • 设置消息和错误监听器

3. execute(...args)：

   • 将参数通过 postMessage 发送给 Worker
   • Worker 中执行函数
   • 等待 Worker 返回结果
   • 返回 Promise

4. 结果处理：

   • Worker 通过 postMessage 返回结果
   • 主线程接收并 resolve Promise

5. 错误处理：

   • Worker 执行出错时 reject Promise
   • 支持超时控制

6. 清理：

   • terminate() 终止 Worker
   • 释放 Blob URL

无需编写单独的 Worker 文件，直接传入函数即可在后台执行。