如何使用 Web Workers 在 React 中运行异步任务-js教程-、刘德华、刘亦菲、谌洪

如何使用 web workers 在 react 中运行异步任务

在使用 React 开发应用时，经常会遇到需要执行耗时任务的情况，例如轮询 API 获取后台进程状态。如果不妥善处理，可能会导致应用卡顿甚至崩溃。Web Workers 提供了一种优雅的解决方案，它允许在后台线程中执行这些任务，从而避免阻塞主线程。

本文将通过一个监控后端报告生成状态的示例，讲解如何利用 Web Workers 提升 React 应用的性能和用户体验。

目标

调用 API 启动报告生成。
获取任务 ID (task_id)。
每 30 秒检查一次任务状态。
在不影响用户界面的情况下完成以上操作。

Web Workers 正是实现这一目标的关键，它如同一个后台助手，高效地处理耗时任务，而不会阻塞主线程。

代码实现

步骤一：配置 Axios

首先，配置 Axios 用于连接 API。这里配置了一个包含基本 URL 和所需 headers 的客户端：

import axios from "axios";

export const apiclient = axios.create({
  baseURL: "https://example.com/api", // 请替换为您的 API 基础 URL
  headers: {
    "content-type": "application/json",
    accept: "application/json",
  },
});

登录后复制

步骤二：创建 Web Worker

Web Worker 负责每 30 秒检查一次 API，获取任务状态：

self.onmessage = async (event) => {
  const { task_id, apiendpoint } = event.data;

  const checkTaskStatus = async () => {
    try {
      const response = await fetch(`${apiendpoint}/${task_id}`);
      const task = await response.json();

      self.postMessage(task);

      if (task.status !== "success" && task.status !== "failure") {
        setTimeout(checkTaskStatus, 30000);
      }
    } catch (error) {
      console.error("Web Worker 错误:", error);
    }
  };

  checkTaskStatus();
};

登录后复制

步骤三：在 React 中管理 Worker

在 React 应用中，需要管理 Web Worker 的生命周期，包括启动、传递数据和处理返回结果：

export class AsyncTaskManager {
  private worker: Worker | null = null;

  public async startTask(taskId: string, apiEndpoint: string, onResult: (data: any) => void) {
    if (this.worker) {
      this.worker.terminate();
    }

    this.worker = new Worker(new URL("./genericworker.js", import.meta.url), { type: "module" });

    this.worker.postMessage({ task_id: taskId, apiendpoint: apiEndpoint });

    this.worker.onmessage = (event) => {
      const data = event.data;
      onResult(data);

      if (data.status === "success" || data.status === "failure") {
        this.stopWorker();
      }
    };
  }

  public stopWorker() {
    if (this.worker) {
      this.worker.terminate();
      this.worker = null;
    }
  }
}

登录后复制

步骤四：在组件中使用

在 React 组件中使用 AsyncTaskManager 来管理任务，包括启动任务、显示加载状态和处理结果：

import React, { useState } from "react";
import { AsyncTaskManager } from "./AsyncTaskManager";

const taskManager = new AsyncTaskManager();

export const ExampleComponent = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [result, setResult] = useState(null);

  const handleStartTask = async () => {
    setIsLoading(true);

    // 模拟后端任务启动
    const response = await fetch("https://example.com/api/start-task", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });
    const { task_id } = await response.json();

    taskManager.startTask(task_id, "https://example.com/api/task-status", (data) => {
      setIsLoading(false);
      setResult(data.result); // 处理任务结果
    });
  };

  return (
    <div>
      <button onClick={handleStartTask}>{isLoading ? "处理中..." : "启动任务"}</button>
      {result && <div>结果: {JSON.stringify(result)}</div>}
    </div>
  );
};

登录后复制

工作流程