在使用 React 开发应用时，经常会遇到需要执行耗时任务的情况，例如轮询 API 获取后台进程状态。如果不妥善处理，可能会导致应用卡顿甚至崩溃。Web Workers 提供了一种优雅的解决方案，它允许在后台线程中执行这些任务，从而避免阻塞主线程。
本文将通过一个监控后端报告生成状态的示例，讲解如何利用 Web Workers 提升 React 应用的性能和用户体验。
目标
调用 API 启动报告生成。获取任务 ID (task_id)。每 30 秒检查一次任务状态。在不影响用户界面的情况下完成以上操作。
Web Workers 正是实现这一目标的关键，它如同一个后台助手，高效地处理耗时任务，而不会阻塞主线程。
代码实现
步骤一：配置 Axios
首先，配置 Axios 用于连接 API。这里配置了一个包含基本 URL 和所需 headers 的客户端：
import axios from "axios";export const apiclient = axios.create({ baseURL: "https://example.com/api", // 请替换为您的 API 基础 URL headers: { "content-type": "application/json", accept: "application/json", },});
步骤二：创建 Web Worker
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("Web Worker 错误:", error); } }; checkTaskStatus();};
步骤三：在 React 中管理 Worker
在 React 应用中，需要管理 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: 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; } }}
步骤四：在组件中使用
在 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); // 模拟后端任务启动 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) => { setIsLoading(false); setResult(data.result); // 处理任务结果 }); }; return ( {result && 结果: {JSON.stringify(result)}} );};
工作流程
启动任务: 点击“启动任务”按钮，调用 API 启动报告生成，并获取 task_id。后台监控: Web Worker 接收 task_id，每 30 秒轮询状态 API，并将状态发送回 React 组件。更新 UI: 任务执行过程中，UI 保持流畅，按钮显示“处理中…”，任务完成后显示结果。释放资源: 任务完成后 (成功或失败)，Worker 自动停止，释放资源。
优势
不阻塞用户界面。可处理长时间运行的任务，而不会导致应用冻结。通过加载指示器和结果显示，提升用户体验。
以上就是如何使用 Web Workers 在 React 中运行异步任务的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500333.html
微信扫一扫 
支付宝扫一扫 
