如何使用 Web Workers 在 React 中运行异步任务

使用 React 时，迟早你会遇到需要执行需要时间的任务的情况，比如经常检查 API 以查看进程是否有完成的。如果处理不好，可能会导致应用程序崩溃或浏览器饱和。为了避免这种情况，我们可以使用 Web Workers。

我将向您解释一个我用来监控后端生成的报告状态的示例。

我们需要做什么？

调用API开始报告生成过程。
获取标识该任务的task_id。
每 30 秒检查一次任务是否完成。
处理这一切而不影响用户界面。
这里的技巧是使用 Web Worker，它就像一个后台助手，可以在不阻塞应用程序的情况下完成所有繁重的工作。

守则

第 1 步：为 API 配置 Axios

首先是准备 Axios，以便它可以连接 API。在这里，我配置了一个具有基本 URL 和我需要的标头的客户端：

import axios from "axios";

export const apiClient = axios.create({
  baseURL: "https://example.com/api", // Cambia esta URL por la base de tu API
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
});

第 2 步：创建 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("Error en el Worker:", error);
    }
  };

  checkTaskStatus();
};

第 3 步：在 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 });

    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);

    // Simula el inicio de una tarea en el backend
    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) => {
      if (data.status === "SUCCESS" || data.status === "FAILURE") {
        setIsLoading(false);
        setResult(data.result); // Maneja el resultado de la tarea
      }
    });
  };

  return (
    <div>
      <button onclick="{handleStartTask}" disabled>
        {isLoading ? "Procesando..." : "Iniciar Tarea"}
      </button>
      {result && <div>Resultado: {JSON.stringify(result)}</div>}
    </div>
  );
};

流程说明

生成报告：单击“启动任务”会调用一个 API，启动报告生成过程并返回 task_id。

后台监控：我们使用一个 Web Worker 来接收此 task_id 并每 30 秒查询一次状态 API，将任务状态发送回 React。

刷新 UI：任务运行时，UI 保持流畅，并有一个按钮显示“正在处理...”，一旦任务完成，就会显示结果。

释放资源：当任务完成（无论成功或失败）时，Worker 都会停止释放资源，避免不必要的后台进程。

为什么会这样呢？

这种方法非常有用，因为：

查询 API 时不会阻塞用户界面。
您可以处理长进程而不会导致应用程序冻结。
借助加载程序和通知，用户始终知道发生了什么。

以上是如何使用 Web Workers 在 React 中运行异步任务的详细内容。更多信息请关注PHP中文网其他相关文章！