如何使用 Web Workers 在 React 中运行异步任务

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《如何使用 Web Workers 在 React 中运行异步任务》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

在使用 React 开发应用时，经常会遇到需要执行耗时任务的情况，例如轮询 API 获取后台进程状态。如果不妥善处理，可能会导致应用卡顿甚至崩溃。Web Workers 提供了一种优雅的解决方案，它允许在后台线程中执行这些任务，从而避免阻塞主线程。

本文将通过一个监控后端报告生成状态的示例，讲解如何利用 Web Workers 提升 React 应用的性能和用户体验。

目标

1. 调用 API 启动报告生成。
2. 获取任务 ID (task_id)。
3. 每 30 秒检查一次任务状态。
4. 在不影响用户界面的情况下完成以上操作。

Web Workers 正是实现这一目标的关键，它如同一个后台助手，高效地处理耗时任务，而不会阻塞主线程。

代码实现

步骤一：配置 Axios

首先，配置 Axios 用于连接 API。这里配置了一个包含基本 URL 和所需 headers 的客户端：

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 (
    <div>
      <button onClick={handleStartTask}>{isLoading ? "处理中..." : "启动任务"}</button>
      {result && <div>结果: {JSON.stringify(result)}</div>}
    </div>
  );
};

工作流程

1. 启动任务: 点击“启动任务”按钮，调用 API 启动报告生成，并获取 task_id。
2. 后台监控: Web Worker 接收 task_id，每 30 秒轮询状态 API，并将状态发送回 React 组件。
3. 更新 UI: 任务执行过程中，UI 保持流畅，按钮显示“处理中...”，任务完成后显示结果。
4. 释放资源: 任务完成后 (成功或失败)，Worker 自动停止，释放资源。

优势

• 不阻塞用户界面。
• 可处理长时间运行的任务，而不会导致应用冻结。
• 通过加载指示器和结果显示，提升用户体验。

好了，本文到此结束，带大家了解了《如何使用 Web Workers 在 React 中运行异步任务》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！