使用 React 時，遲早你會遇到需要執(zhí)行需要時間的任務(wù)的情況，例如經(jīng)常檢查 API 以查看進(jìn)程是否有完成的。如果處理不好，可能會導(dǎo)致應(yīng)用程式崩潰或瀏覽器飽和。為了避免這種情況，我們可以使用 Web Workers。

我將向您解釋一個我用來監(jiān)控後端產(chǎn)生的報告狀態(tài)的範(fàn)例。

我們需要做什麼？

呼叫API開始報告產(chǎn)生過程。
取得標(biāo)識該任務(wù)的task_id。
每 30 秒檢查任務(wù)是否完成。
處理這一切而不影響使用者介面。
這裡的技巧是使用 Web Worker，它就像一個後臺助手，可以在不阻塞應(yīng)用程式的情況下完成所有繁重的工作。

守則

第 1 步：為 API 設(shè)定 Axios

首先是準(zhǔn)備 Axios，以便它可以連接 API。在這裡，我配置了一個具有基本 URL 和我需要的標(biāo)頭的客戶端：

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 是奇蹟發(fā)生的地方?；旧希@傢伙每 30 秒檢查一次 API，看看任務(wù)是否已經(jīng)完成：

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 應(yīng)用程式中，您需要控制此 Web Worker：啟動它、向其傳遞資料以及管理它發(fā)送給您的回應(yīng)。

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

第四步：在組件中使用

現(xiàn)在，在React元件中，我們使用AsyncTaskManager來管理任務(wù)。過程包括啟動任務(wù)、顯示載入、收到任務(wù)結(jié)果時更新狀態(tài)：

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}>
        {isLoading ? "Procesando..." : "Iniciar Tarea"}
      </button>
      {result && <div>Resultado: {JSON.stringify(result)}</div>}
    </div>
  );
};

流程說明

產(chǎn)生報表：點選「啟動任務(wù)」會呼叫一個 API，啟動報表產(chǎn)生程序並傳回 task_id。

後臺監(jiān)控：我們使用一個 Web Worker 來接收此 task_id 並每 30 秒查詢一次狀態(tài) API，將任務(wù)狀態(tài)傳回 React。

刷新 UI：任務(wù)運行時，UI 保持流暢，並有一個按鈕顯示“正在處理...”，一旦任務(wù)完成，就會顯示結(jié)果。

釋放資源：當(dāng)任務(wù)完成（無論成功或失?。r，Worker 都會停止釋放資源，避免不必要的後臺程序。

為什麼會這樣呢？

這種方法非常有用，因為：

查詢 API 時不會阻塞使用者介面。
您可以處理長進(jìn)程而不會導(dǎo)致應(yīng)用程式凍結(jié)。
借助載入器和通知，用戶始終知道發(fā)生了什麼。

以上是如何使用 Web Workers 在 React 中執(zhí)行非同步任務(wù)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！