JavaScript异步状态更新最佳实践咨询：并行API实时更新渲染

嘿，这个需求我之前做项目时刚好遇到过！要实现每个API返回就实时更新页面，不用等所有请求完成，核心就是每次新数据回来后，基于当前最新的results状态做合并、去重、排序，再更新状态。我给你拆解下具体实现思路和代码示例，还有可能踩的坑：

不用axios.all包裹请求，而是单独发起每个API调用，每个请求成功后：

1. 拿到新返回的数据
2. 和当前results数组合并（注意去重，避免重复条目）
3. 执行统一的排序逻辑（和你原本合并所有数据后的排序规则保持一致）
4. 更新results状态，触发页面实时渲染

假设你用React管理状态，这里是完整的实现代码：

import { useState, useEffect } from 'react';
import axios from 'axios';

const ResultList = () => {
  const [results, setResults] = useState([]);
  // 可选：加个加载状态，给用户反馈
  const [loadingCount, setLoadingCount] = useState(3);

  // 统一的排序函数，根据你的业务需求调整规则
  const sortResults = (data) => {
    // 示例：按数据的创建时间倒序排列
    return [...data].sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
  };

  // 封装单个请求的处理逻辑
  const fetchSingleApi = async (apiUrl) => {
    try {
      const res = await axios.get(apiUrl);
      const newItems = res.data;

      // 用函数式更新状态，确保基于最新的results计算
      setResults(prev => {
        // 合并+去重：假设每个数据项有唯一id，用Map去重
        const combined = [...prev, ...newItems];
        const uniqueItems = Array.from(new Map(combined.map(item => [item.id, item])).values());
        // 排序后返回新状态
        return sortResults(uniqueItems);
      });
    } catch (err) {
      console.error(`请求${apiUrl}失败:`, err);
    } finally {
      // 加载计数减一，所有请求完成后loading消失
      setLoadingCount(prev => prev - 1);
    }
  };

  useEffect(() => {
    // 分别发起三个API请求，互不等待
    fetchSingleApi('/api/list1');
    fetchSingleApi('/api/list2');
    fetchSingleApi('/api/list3');

    // 组件卸载时取消未完成的请求，避免内存泄漏
    const source = axios.CancelToken.source();
    return () => source.cancel('组件已卸载，取消请求');
  }, []);

  return (
    <div className="result-container">
      {loadingCount > 0 && <div className="loading">加载中...</div>}
      {results.map(item => (
        <div key={item.id} className="result-item">
          {/* 渲染你的数据内容 */}
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default ResultList;

• 避免竞态问题：一定要用setResults(prev => ...)这种函数式更新，而不是直接用当前的results变量。因为React状态更新是异步的，函数式更新会确保每次都基于最新的状态计算新值，不管API返回顺序如何，都不会出现状态覆盖的问题。
• 去重逻辑：如果你的API可能返回重复数据，一定要加去重处理。示例中用Map根据id去重，你可以根据业务换成其他唯一标识（比如uuid、key等）。
• 排序一致性：所有数据合并后都要执行相同的排序规则，这样不管哪个API先返回，页面上的列表始终是有序的，不会出现混乱。
• 内存泄漏防护：用axios的CancelToken在组件卸载时取消未完成的请求，避免控制台报错和不必要的网络请求。

如果你的数据量很大，合并和排序可能有性能开销，可以考虑：

• 用useMemo缓存排序后的结果，减少重复计算
• 对新数据先做局部排序，再和现有有序数组做合并排序（比全量排序效率更高）

内容的提问来源于stack exchange，提问作者user1955934