So führen Sie asynchrone Aufgaben in React mithilfe von Web Workern aus

Wenn Sie mit React arbeiten, werden Sie früher oder später auf Situationen stoßen, in denen Sie zeitaufwändige Aufgaben ausführen müssen, wie zum Beispiel ab und zu eine API zu überprüfen, um zu sehen, ob ein Prozess dies getan hat fertig. Wenn Sie nicht gut damit umgehen, kann die App abstürzen oder der Browser überlastet werden. Um dies zu vermeiden, können wir Web Worker verwenden.

Ich erkläre Ihnen ein Beispiel, das ich erstellt habe, um den Status eines Berichts zu überwachen, der im Backend generiert wird.

Was müssen wir tun?

Rufen Sie die API auf, um den Berichterstellungsprozess zu starten.
Rufen Sie eine task_id ab, die diese Aufgabe identifiziert.
Überprüfen Sie alle 30 Sekunden, ob die Aufgabe abgeschlossen ist.
Behandeln Sie all dies, ohne die Benutzeroberfläche zu beeinträchtigen.
Der Trick hier besteht darin, einen Web Worker zu verwenden, der wie ein Hintergrundhelfer ist, der die ganze schwere Arbeit erledigt, ohne die App zu blockieren.

Der Kodex

Schritt 1: Axios für die API konfigurieren

Als Erstes müssen Sie Axios vorbereiten, damit es eine Verbindung zur API herstellen kann. Hier konfiguriere ich einen Client, der die Basis-URL und die benötigten Header hat:

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",
  },
});

Schritt 2: Erstellen Sie den Web Worker

Der Web Worker ist der Ort, an dem die Magie geschieht. Im Grunde überprüft dieser Typ alle 30 Sekunden die API, um zu sehen, ob die Aufgabe bereits abgeschlossen ist:

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

Schritt 3: Verwalten Sie den Worker in React

In Ihrer React-App müssen Sie diesen Web Worker steuern: Starten Sie ihn, übergeben Sie Daten an ihn und verwalten Sie die Antworten, die er Ihnen sendet.

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

Schritt 4: Verwendung in der Komponente

Jetzt verwenden wir in der React-Komponente den AsyncTaskManager, um die Aufgabe zu verwalten. Der Prozess umfasst das Starten der Aufgabe, das Anzeigen eines Ladevorgangs und das Aktualisieren des Status, wenn das Ergebnis der Aufgabe empfangen wird:

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

Ablauferklärung

Bericht generieren: Durch Klicken auf „Aufgabe starten“ wird eine API aufgerufen, die den Berichterstellungsprozess startet und eine Aufgaben-ID zurückgibt.

Hintergrundüberwachung: Wir verwenden einen Web Worker, der diese task_id empfängt, alle 30 Sekunden die Status-API abfragt und den Aufgabenstatus an React zurücksendet.

Benutzeroberfläche aktualisieren: Während die Aufgabe ausgeführt wird, bleibt die Benutzeroberfläche flüssig, mit einer Schaltfläche, die „Verarbeitung …“ anzeigt und nach Abschluss der Aufgabe das Ergebnis anzeigt.

Ressourcen freigeben: Wenn die Aufgabe abgeschlossen ist (entweder erfolgreich oder fehlgeschlagen), stoppt der Worker, um Ressourcen freizugeben und unnötige Hintergrundprozesse zu vermeiden.

Warum ist es so?

Dieser Ansatz ist sehr nützlich, weil:

Sie blockieren nicht die Benutzeroberfläche, während Sie die API abfragen.
Sie können lange Prozesse bewältigen, ohne dass die App einfriert.
Dank Loadern und Benachrichtigungen weiß der Benutzer immer, was gerade passiert.

Das obige ist der detaillierte Inhalt vonSo führen Sie asynchrone Aufgaben in React mithilfe von Web Workern aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!