웹 작업자를 사용하여 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는 마법이 일어나는 곳입니다. 기본적으로 이 사람은 작업이 이미 완료되었는지 확인하기 위해 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에서 작업자 관리

React 앱에서 이 Web Worker를 제어해야 합니다. 즉, 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;
    }
  }
}

4단계: 컴포넌트에서 사용

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

흐름 설명

보고서 생성: "작업 시작"을 클릭하면 보고서 생성 프로세스를 시작하고 task_id를 반환하는 API가 호출됩니다.

백그라운드 모니터링: 이 task_id를 수신하고 30초마다 상태 API를 쿼리하여 작업 상태를 React로 다시 보내는 Web Worker를 사용합니다.

UI 새로 고침: 작업이 실행되는 동안 UI는 "처리 중..."을 표시하는 버튼과 함께 유동적으로 유지되며 작업이 완료되면 결과가 표시됩니다.

리소스 해제: 작업이 완료되면(성공 또는 실패) 작업자는 리소스를 확보하고 불필요한 백그라운드 프로세스를 피하기 위해 중지합니다.

왜 이런가요?

이 접근 방식은 다음과 같은 이유로 매우 유용합니다.

API를 쿼리하는 동안 사용자 인터페이스를 차단하지 마세요.
앱이 정지되지 않고 긴 프로세스를 처리할 수 있습니다.
사용자는 로더와 알림 덕분에 무슨 일이 일어나고 있는지 항상 알 수 있습니다.

위 내용은 웹 작업자를 사용하여 React에서 비동기 작업을 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!