React类组件中多异步action完成后关闭加载屏的实现方案

你遇到的核心问题是每个异步请求完成后单独设置isLoading为false，导致最先完成的请求会提前关闭加载屏，而其他请求还在处理中。要解决这个问题，我们需要等待所有异步操作都完成后再更新加载状态，下面是几种可行的方案：

方案1：使用Promise.all（推荐） #

如果你的每个异步Action都返回Promise（比如Redux Thunk/Saga中正确处理的异步Action），可以把所有请求的Promise收集起来，用Promise.all等待全部完成后再关闭加载。

修改后的示例代码： #

import React, { Component } from 'react';
import LoadingScreen from './LoadingScreen';
import MainContent from './MainContent';

class App extends Component {
  state = { isLoading: true };

  async componentDidMount() {
    try {
      // 收集所有异步请求的Promise实例
      const allRequests = [
        this.props.fetchUserInfo(),
        this.props.fetchProductList(),
        this.props.fetchOrderHistory()
      ];

      // 等待所有请求成功完成
      await Promise.all(allRequests);
    } catch (error) {
      // 处理请求失败的情况（比如弹窗提示、日志上报）
      console.error('部分请求失败:', error);
    } finally {
      // 不管请求成功/失败，都关闭加载屏
      this.setState({ isLoading: false });
    }
  }

  render() {
    if (this.state.isLoading) {
      return <LoadingScreen />;
    }
    return <MainContent />;
  }
}

export default App;

注意事项： #

• 确保你的异步Action返回Promise：比如Redux Thunk中，异步Action要返回async函数或者明确返回Promise，示例如下：

  export const fetchUserInfo = () => async dispatch => {
    dispatch({ type: 'FETCH_USER_START' });
    try {
      const res = await api.get('/user');
      dispatch({ type: 'FETCH_USER_SUCCESS', payload: res.data });
      return res.data; // 返回数据让Promise处于resolved状态
    } catch (err) {
      dispatch({ type: 'FETCH_USER_FAILURE', payload: err });
      throw err; // 抛出错误让外层Promise可以捕获
    }
  };
  

• 如果需要所有请求无论成功失败都关闭加载屏，可以用Promise.allSettled替换Promise.all，它会等待所有请求结束（不管fulfilled还是rejected）后再执行回调。

方案2：跟踪请求完成计数 #

如果无法使用Promise.all（比如请求是分散触发的，或者无法统一收集Promise），可以通过计数的方式跟踪所有请求的完成状态：

示例代码： #

class App extends Component {
  state = {
    isLoading: true,
    completedRequests: 0,
    totalRequests: 3 // 提前确定总请求数
  };

  // 每个请求完成后调用这个方法更新计数
  markRequestCompleted = () => {
    this.setState(prevState => {
      const newCompletedCount = prevState.completedRequests + 1;
      // 当所有请求都完成时，关闭加载屏
      if (newCompletedCount === prevState.totalRequests) {
        return { completedRequests: newCompletedCount, isLoading: false };
      }
      return { completedRequests: newCompletedCount };
    });
  };

  componentDidMount() {
    this.props.fetchUserInfo()
      .finally(() => this.markRequestCompleted());
    
    this.props.fetchProductList()
      .finally(() => this.markRequestCompleted());
    
    this.props.fetchOrderHistory()
      .finally(() => this.markRequestCompleted());
  }

  render() {
    if (this.state.isLoading) {
      return <LoadingScreen />;
    }
    return <MainContent />;
  }
}

这种方式更灵活，但需要提前知道总请求数，代码也相对繁琐，适合特殊场景下使用。

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