React を使用していると、遅かれ早かれ、プロセスに問題があるかどうかを確認(rèn)するために API を頻繁にチェックするなど、時(shí)間のかかるタスクを?qū)g行する必要がある狀況に遭遇することになります。終了した。うまく対処しないと、アプリがクラッシュしたり、ブラウザが飽和狀態(tài)になったりする可能性があります。それを回避するには、Web Workers を使用できます。

バックエンドで生成されるレポートのステータスを監(jiān)視するために作成した例を説明します。

何をしなければなりませんか?

API を呼び出してレポート生成プロセスを開始します。
そのタスクを識(shí)別する task_id を取得します。
タスクが完了したかどうかを 30 秒ごとに確認(rèn)します。
ユーザー インターフェイスに影響を與えることなく、これらすべてを処理します。
ここでのコツは、Web Worker を使用することです。Web Worker は、アプリをブロックせずにすべての面倒な作業(yè)を行うバックグラウンド ヘルパーのようなものです。

コード

ステップ 1: API 用に Axios を構(gòu)成する

最初に、API に接続できるように Axios を準(zhǔn)備します。ここでは、ベース URL と必要なヘッダーを持つクライアントを構(gòu)成します。

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 ワーカーを作成する

Web Worker は魔法が起こる場所です。基本的に、この男は 30 秒ごとに API をチェックして、タスクがすでに完了しているかどうかを確認(rèn)しています。

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 でワーカーを管理する

React アプリでは、この Web ワーカーを制御する必要があります。Web ワーカーを起動(dò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;
    }
  }
}

ステップ 4: コンポーネントで使用する

React コンポーネントでは、AsyncTaskManager を使用してタスクを管理します。このプロセスには、タスクの開始、読み込みの表示、およびタスクの結(jié)果を受信したときのステータスの更新が含まれます。

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

流れの説明

レポートの生成: [タスクの開始] をクリックすると、レポート生成プロセスを開始する API が呼び出され、task_id が返されます。

バックグラウンドモニタリング: この task_id を受信し、30 秒ごとにステータス API にクエリを?qū)g行し、タスクのステータスを React に送り返す Web ワーカーを使用します。

UI を更新: タスクの実行中、UI は流動(dòng)的な狀態(tài)を保ち、ボタンに「処理中...」と表示され、タスクが完了すると結(jié)果が表示されます。

リソースの解放: タスクが完了すると (成功または失敗のいずれか)、ワーカーはリソースを解放し、不要なバックグラウンド プロセスを回避するために停止します。

なぜこのようになるのでしょうか？

このアプローチは次の理由から非常に便利です:

API のクエリ中にユーザー インターフェイスをブロックしません。
アプリがフリーズすることなく、長時(shí)間のプロセスを処理できます。
ユーザーは、ローダーと通知のおかげで、何が起こっているかを常に把握できます。

以上がWeb ワーカーを使用して React で非同期タスクを?qū)g行する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。