Cara Menjalankan Tugas Asynchronous dalam React Menggunakan Web Workers

Apabila bekerja dengan React, lambat laun anda akan menghadapi situasi di mana anda perlu melaksanakan tugasan yang mengambil masa, seperti menyemak API setiap kali untuk melihat sama ada proses mempunyai selesai. Jika anda tidak mengendalikannya dengan baik, anda boleh ranap apl atau tepu penyemak imbas. Untuk mengelakkannya, kita boleh menggunakan Pekerja Web.

Saya akan menerangkan kepada anda contoh yang saya buat untuk memantau status laporan yang dijana di bahagian belakang.

Apa yang perlu kita lakukan?

Panggil API untuk memulakan proses penjanaan laporan.
Dapatkan task_id yang mengenal pasti tugasan itu.
Semak setiap 30 saat jika tugasan selesai.
Tangani semua ini tanpa menjejaskan antara muka pengguna.
Caranya di sini ialah menggunakan Pekerja Web, yang seperti pembantu latar belakang yang melakukan semua beban berat tanpa menyekat apl.

Kod

Langkah 1: Konfigurasikan Axios untuk API

Perkara pertama ialah menyediakan Axios supaya ia boleh menyambung ke API. Di sini saya mengkonfigurasi klien yang mempunyai URL asas dan pengepala yang saya perlukan:

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

Langkah 2: Buat Pekerja Web

Pekerja Web adalah tempat keajaiban berlaku. Pada asasnya lelaki ini menyemak API setiap 30 saat untuk melihat sama ada tugas itu sudah selesai:

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

Langkah 3: Urus Pekerja dalam React

Dalam apl React anda, anda perlu mengawal Pekerja Web ini: mulakannya, hantar data kepadanya dan uruskan respons yang dihantar kepada anda.

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

Langkah 4: Gunakan dalam komponen

Kini, dalam komponen React, kami menggunakan AsyncTaskManager untuk mengurus tugas. Proses ini termasuk memulakan tugas, memaparkan pemuatan dan mengemas kini status apabila hasil tugasan diterima:

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

Penjelasan Aliran

Jana Laporan: Mengklik "Mulakan Tugasan" memanggil API yang memulakan proses penjanaan laporan dan mengembalikan task_id.

Pemantauan Latar Belakang: Kami menggunakan Web Worker yang menerima task_id ini dan menanyakan status API setiap 30 saat, menghantar status tugas kembali ke React.

Muat Semula UI: Semasa tugasan berjalan, UI kekal lancar, dengan butang menunjukkan "Memproses..." dan setelah tugasan selesai, menunjukkan hasilnya.

Sumber Keluaran: Apabila tugas selesai (sama ada berjaya atau gagal), Pekerja berhenti untuk membebaskan sumber dan mengelakkan proses latar belakang yang tidak perlu.

Kenapa buat macam ni?

Pendekatan ini sangat berguna kerana:

Anda tidak menyekat antara muka pengguna semasa menanyakan API.
Anda boleh mengendalikan proses yang panjang tanpa pembekuan apl.
Pengguna sentiasa mengetahui perkara yang berlaku terima kasih kepada pemuat dan pemberitahuan.

Atas ialah kandungan terperinci Cara Menjalankan Tugas Asynchronous dalam React Menggunakan Web Workers. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!