Comment exécuter des tâches asynchrones dans React à l'aide de Web Workers

Lorsque vous travaillez avec React, vous vous retrouverez tôt ou tard dans des situations où vous devrez exécuter des tâches qui prennent du temps, comme vérifier une API de temps en temps pour voir si un processus a fini. Si vous ne le gérez pas bien, vous pouvez planter l'application ou saturer le navigateur. Pour éviter cela, nous pouvons utiliser des Web Workers.

Je vais vous expliquer un exemple que j'ai réalisé pour surveiller l'état d'un rapport généré dans le backend.

Que devons-nous faire ?

Appelez l'API pour démarrer le processus de génération de rapport.
Obtenez un task_id qui identifie cette tâche.
Vérifiez toutes les 30 secondes si la tâche est terminée.
Gérez tout cela sans affecter l'interface utilisateur.
L'astuce ici est d'utiliser un Web Worker, qui est comme une aide en arrière-plan qui fait tout le gros du travail sans bloquer l'application.

Le code

Étape 1 : Configurer Axios pour l'API

La première chose est de préparer Axios pour qu'il puisse se connecter à l'API. Ici, je configure un client qui a l'URL de base et les en-têtes dont j'ai besoin :

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

Étape 2 : Créer le Web Worker

Le Web Worker est l'endroit où la magie opère. En gros, ce type vérifie l'API toutes les 30 secondes pour voir si la tâche est déjà terminée :

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

Étape 3 : Gérer le travailleur dans React

Dans votre application React, vous devez contrôler ce Web Worker : démarrez-le, transmettez-lui des données et gérez les réponses qu'il vous envoie.

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

Étape 4 : Utilisation dans le composant

Maintenant, dans le composant React, nous utilisons AsyncTaskManager pour gérer la tâche. Le processus comprend le démarrage de la tâche, l'affichage d'un chargement et la mise à jour du statut lorsque le résultat de la tâche est reçu :

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

Explication du flux

Générer le rapport : cliquer sur "Démarrer la tâche" appelle une API qui démarre le processus de génération de rapport et renvoie un task_id.

Surveillance en arrière-plan : nous utilisons un Web Worker qui reçoit ce task_id et interroge l'API d'état toutes les 30 secondes, renvoyant l'état de la tâche à React.

Actualiser l'interface utilisateur : Pendant que la tâche est en cours d'exécution, l'interface utilisateur reste fluide, avec un bouton affichant "Traitement..." et une fois la tâche terminée, affichant le résultat.

Libérer les ressources : lorsque la tâche est terminée (succès ou échec), le travailleur s'arrête pour libérer des ressources et éviter les processus en arrière-plan inutiles.

Pourquoi faire comme ça ?

Cette approche est super utile car :

Vous ne bloquez pas l'interface utilisateur lors de l'interrogation de l'API.
Vous pouvez gérer de longs processus sans que l'application ne se bloque.
L'utilisateur sait toujours ce qui se passe grâce aux chargeurs et aux notifications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!