React Query：实现多请求顺序执行、结果收集与最终提交的策略

本教程详细阐述了在react应用中，如何利用react query和`array.prototype.reduce`，优雅地实现一系列post请求的顺序执行。文章将指导开发者收集每次请求的响应数据，并在所有请求成功完成后，将这些收集到的数据作为最终请求的载荷进行提交，有效解决异步操作链式处理及数据同步的挑战。

在现代Web开发中，我们经常会遇到需要按顺序发送多个网络请求的场景，例如批量创建资源、分步提交表单数据，或是在一系列操作完成后进行最终的数据同步。特别是在使用React Query等异步状态管理库时，如何确保请求的顺序性、准确收集每个请求的响应，并在所有前置请求完成后触发一个最终请求，是一个常见的挑战。

理解核心问题

原始问题描述了一个典型的场景：用户点击一次按钮，需要触发一系列POST请求。这些请求必须按顺序执行，即前一个请求完成（无论成功或失败）后，才能开始下一个。同时，每个请求的响应数据都需要被收集起来，最终，这些收集到的数据将作为参数，发送给一个最终的POST请求。

最初的尝试可能面临以下问题：

1. 异步循环与状态更新不同步： 在一个异步循环中直接依赖React的useState来累积数据，可能会因为useState更新的异步性，导致在最终请求触发时，状态中的数据仍是旧的或不完整的。
2. 确保顺序执行： 简单的forEach循环无法保证内部异步操作的顺序性，需要更强大的机制来链式处理Promise。

解决方案：利用 Array.prototype.reduce 链式处理异步请求

解决此问题的关键在于利用JavaScript的Array.prototype.reduce方法结合async/await语法，来构建一个按顺序执行的Promise链。reduce方法非常适合这种场景，因为它允许我们维护一个累加器（accumulator），并在每次迭代中更新它，从而实现顺序依赖。

ChatX翻译

最实用、可靠的社交类实时翻译工具。 支持全球主流的20+款社交软件的聊天应用，全球200+语言随意切换。 让您彻底告别复制粘贴的翻译模式，与世界各地高效连接！

77

查看详情

1. React Query useMutation 设置

首先，我们需要为单个POST请求和最终的POST请求定义两个独立的useMutation实例。mutateAsync是这里的关键，因为它返回一个Promise，允许我们将其集成到async/await流程中。

import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

// 用于发送单个待办事项的mutation
const usePostTodoMutation = () => {
  return useMutation({
    mutationFn: (data) => {
      // 假设data是待办事项的内容
      return axios.post("https://jsonplaceholder.typicode.com/posts", { title: data });
    },
  });
};

// 用于发送所有收集到的待办事项的mutation
const useFinalPostMutation = () => {
  return useMutation({
    mutationFn: (data) => {
      // data将是一个包含所有已创建待办事项响应的数组
      return axios.post("https://jsonplaceholder.typicode.com/posts", { todos: data });
    },
  });
};

2. 实现顺序请求与数据收集

核心逻辑将封装在一个事件处理函数中，例如handleInput。这里，我们使用Array.prototype.reduce来迭代待发送的数据数组，并确保每个请求都在前一个请求完成后才开始。

const MyComponent = () => {
  const { mutateAsync: postTodoAsync } = usePostTodoMutation();
  const { mutateAsync: finalPostAsync } = useFinalPostMutation();

  const handleInput = async () => {
    // 存储每个成功请求的响应数据
    const saveData = [];
    // 待发送的数据数组
    const todosToPost = ["Todo 1", "Todo 2", "Todo 3"];

    // 使用reduce链式处理异步请求
    await todosToPost.reduce(async (accumulatorPromise, currentTodoItem, index) => {
      // 等待前一个Promise完成，确保顺序执行
      await accumulatorPromise;

      try {
        // 执行当前的POST请求
        const response = await postTodoAsync(currentTodoItem);
        // 将响应数据保存到本地数组
        saveData.push(response.data); // 根据实际API响应结构调整
      } catch (error) {
        console.error(`Error posting ${currentTodoItem}:`, error);
        // 可以选择在这里处理错误，例如跳过当前项或抛出错误中断整个链
      }

      // 检查是否是最后一个元素
      if (index === todosToPost.length - 1) {
        // 如果是最后一个元素且已收集到数据，则发送最终请求
        if (saveData.length > 0) {
          console.log("所有单个请求完成，发送最终请求，数据：", saveData);
          await finalPostAsync(saveData);
          console.log("最终请求发送成功！");
        } else {
          console.log("没有收集到任何数据，跳过最终请求。");
        }
      }

      // 返回一个Promise，作为下一次迭代的accumulator
      return Promise.resolve();
    }, Promise.resolve()); // reduce的初始值是一个已解决的Promise
  };

  return (
    <button onClick={handleInput}>提交所有待办事项</button>
  );
};

export default MyComponent;

代码解析：

1. const saveData = [];: 声明一个本地数组来存储每个请求的响应。这是关键，因为它避免了直接依赖React状态更新的异步性，确保了在所有请求完成时，saveData中包含的是最新且完整的数据。
2. todosToPost.reduce(async (accumulatorPromise, currentTodoItem, index) => { ... }, Promise.resolve());:
   • Promise.resolve() 作为reduce的初始累加器值。这确保了第一次迭代时await accumulatorPromise有一个可等待的Promise。
   • await accumulatorPromise;: 这是实现顺序执行的核心。在处理当前项之前，它会等待前一次迭代返回的Promise完成。
   • const response = await postTodoAsync(currentTodoItem);: 调用useMutation返回的mutateAsync方法来发送请求。await确保了当前请求完成后才继续。
   • saveData.push(response.data);: 将当前请求的响应数据添加到saveData数组中。
   • if (index === todosToPost.length - 1): 这个条件判断确保了最终的finalPostAsync只在所有单个请求都处理完毕后才触发。
   • return Promise.resolve();: 每一次迭代都返回一个已解决的Promise，作为下一次迭代的accumulatorPromise。

注意事项与最佳实践

• 错误处理： 在实际应用中，你需要在try...catch块中处理postTodoAsync可能发生的错误。你可以选择在错误发生时中断整个链（通过throw error），或者记录错误并继续处理后续请求。
• 用户反馈： 在执行这些异步操作时，提供适当的用户反馈（例如加载指示器、禁用按钮）至关重要，以提升用户体验。React Query的isLoading、isError等状态可以帮助你实现这一点。
• 幂等性： 考虑你的POST请求是否具有幂等性。如果某个请求失败并重试，是否会产生副作用。
• 并发限制： 对于大量请求，顺序执行可能会很慢。如果业务逻辑允许，可以考虑使用Promise.all或Promise.allSettled结合限制并发的库（如p-limit）来并行发送部分请求，以提高效率。但对于严格的顺序依赖场景，reduce是更优解。
• 响应数据结构： 根据你的API实际返回的响应结构，调整saveData.push(response.data)中的数据提取方式。

总结

通过巧妙地结合Array.prototype.reduce和async/await，我们能够优雅地解决React Query中多请求顺序执行、数据收集与最终提交的复杂问题。这种模式不仅保证了操作的顺序性，还通过使用局部变量saveData有效避免了React状态更新带来的异步性挑战，使得代码逻辑清晰、可靠性高。掌握这种模式，将大大提升你在处理复杂异步流程时的开发效率和代码质量。

以上就是React Query：实现多请求顺序执行、结果收集与最终提交的策略的详细内容，更多请关注php中文网其它相关文章！