Vue.js中实现异步API调用并保持结果有序的方案

核心思路 #

1. 初始化一个与API数量（n≤4）匹配的固定长度数组，用null作为空占位，确保预留足够位置
2. 并行发起所有API请求，每个请求单独捕获错误，避免单个请求失败影响其他
3. 每个请求完成（成功/失败）后，立即找到数组中第一个未填充的位置，插入对应结果

代码实现（以React状态管理为例） #

import { useState, useEffect } from 'react';

// 模拟API请求，可替换为实际接口调用
const fetchImage = (apiId) => {
  return new Promise((resolve, reject) => {
    // 模拟随机请求耗时与成功率
    setTimeout(() => {
      Math.random() > 0.2
        ? resolve(`https://example.com/image-${apiId}.png`)
        : reject(new Error(`API ${apiId} 调用失败`));
    }, Math.random() * 2000);
  });
};

const ImageGallery = () => {
  const API_COUNT = 4;
  // 初始化状态：创建长度为API_COUNT的数组，默认用null占位
  const [listImages, setListImages] = useState(Array(API_COUNT).fill(null));

  useEffect(() => {
    // 生成所有API请求的Promise，每个Promise统一处理成功/失败结果
    const requestPromises = Array.from({ length: API_COUNT }, (_, idx) =>
      fetchImage(idx)
        .then(url => ({ success: true, url, apiIdx: idx }))
        .catch(err => ({ success: false, msg: err.message, apiIdx: idx }))
    );

    // 逐个监听每个请求的完成事件，实时更新状态
    requestPromises.forEach(promise => {
      promise.then(result => {
        setListImages(prevState => {
          // 找到数组中第一个空占位的索引
          const firstEmptyPos = prevState.findIndex(item => item === null);
          if (firstEmptyPos === -1) return prevState; // 所有位置已填满，无需更新

          // 复制原数组并更新目标位置
          const newImageList = [...prevState];
          newImageList[firstEmptyPos] = result;
          return newImageList;
        });
      });
    });
  }, []);

  return (
    <div className="image-list">
      {listImages.map((item, idx) => {
        if (item === null) {
          return <div key={idx} className="loading">加载中...</div>;
        }
        if (!item.success) {
          return <div key={idx} className="error">{item.msg}</div>;
        }
        return <img key={idx} src={item.url} alt={`Loaded image ${idx}`} />;
      })}
    </div>
  );
};

export default ImageGallery;

关键细节说明 #

• 并行请求：所有API请求同时发起，不会阻塞等待前一个请求完成，保证效率
• 错误隔离：每个请求单独用catch捕获错误，转化为统一格式的失败结果，单个请求失败不影响其他请求的处理
• 实时填充：每个请求完成后立即更新状态，通过findIndex找到第一个空位置插入结果，满足“加载完成后立即填入”的要求
• 状态安全：使用函数式更新setListImages(prevState => ...)，确保每次状态更新都基于最新的数组状态，避免竞态问题

为什么Promise.all/allSettled不适用 #

• Promise.all会等待所有请求完成后才返回结果，无法实现“单个请求完成后立即填充”的需求
• Promise.allSettled同样需要等待所有请求结束才会返回所有结果，也做不到实时处理单个完成的请求

内容的提问来源于stack exchange，提问作者Báu Trần Văn