React中如何实现多个Ajax请求完成后再渲染组件？

嘿，我来帮你搞定这个问题！要让React组件等所有Ajax请求都加载完成后再渲染内容，咱们可以借助Promise的批量处理能力——正好你定义的这些Ajax函数都返回了兼容Promise的jQuery Deferred对象，直接用就行。下面给你两种实用的实现方式：

方法1：使用Promise.all（推荐，适用于需要所有请求都成功的场景） #

Promise.all会把多个Promise打包成一个新的Promise，只有当所有传入的请求都成功resolve时，它才会resolve；只要有一个请求失败reject，它就会立刻reject。

函数组件示例（React Hooks） #

import { useState, useEffect } from 'react';
import { getCleanData, getDefinition, getContext } from './your-api-file';

function YourComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 把需要执行的Ajax请求都放进数组
    const fetchAllData = async () => {
      try {
        // 等待所有请求完成
        const [cleanData, definition, context] = await Promise.all([
          getCleanData('your-id'),
          getDefinition('your-unit'),
          getContext('your-device-type')
        ]);
        
        // 所有请求都成功了，整理数据并更新状态
        setData({
          cleanData,
          definition,
          context
        });
      } catch (err) {
        // 处理任何一个请求失败的情况
        setError('加载数据失败，请稍后重试');
        console.error('请求出错:', err);
      } finally {
        // 不管成功失败，都结束加载状态
        setIsLoading(false);
      }
    };

    fetchAllData();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  // 根据状态渲染内容
  if (isLoading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div className="error">{error}</div>;
  }

  return (
    <div className="data-container">
      <h2>清理数据</h2>
      <pre>{JSON.stringify(data.cleanData, null, 2)}</pre>
      
      <h2>定义信息</h2>
      <pre>{JSON.stringify(data.definition, null, 2)}</pre>
      
      <h2>上下文信息</h2>
      <pre>{JSON.stringify(data.context, null, 2)}</pre>
    </div>
  );
}

export default YourComponent;

类组件示例 #

import React, { Component } from 'react';
import { getCleanData, getDefinition, getContext } from './your-api-file';

class YourComponent extends Component {
  state = {
    data: null,
    isLoading: true,
    error: null
  };

  componentDidMount() {
    Promise.all([
      getCleanData('your-id'),
      getDefinition('your-unit'),
      getContext('your-device-type')
    ])
      .then(([cleanData, definition, context]) => {
        this.setState({
          data: { cleanData, definition, context },
          isLoading: false
        });
      })
      .catch(err => {
        this.setState({
          error: '加载数据失败，请稍后重试',
          isLoading: false
        });
        console.error('请求出错:', err);
      });
  }

  render() {
    const { isLoading, error, data } = this.state;

    if (isLoading) {
      return <div>加载中...</div>;
    }

    if (error) {
      return <div className="error">{error}</div>;
    }

    return (
      <div className="data-container">
        <h2>清理数据</h2>
        <pre>{JSON.stringify(data.cleanData, null, 2)}</pre>
        
        <h2>定义信息</h2>
        <pre>{JSON.stringify(data.definition, null, 2)}</pre>
        
        <h2>上下文信息</h2>
        <pre>{JSON.stringify(data.context, null, 2)}</pre>
      </div>
    );
  }
}

export default YourComponent;

方法2：使用Promise.allSettled（适用于允许部分请求失败的场景） #

如果你的业务场景允许部分请求失败，并且需要拿到所有请求的结果（不管成功还是失败），可以用Promise.allSettled。它会等所有请求都完成（不管成功失败）后，返回一个包含每个请求结果的数组，每个结果对象会有status字段（"fulfilled"或"rejected"）和对应的值。

函数组件示例 #

import { useState, useEffect } from 'react';
import { getCleanData, getDefinition, getContext } from './your-api-file';

function YourComponent() {
  const [results, setResults] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchAllData = async () => {
      const allResults = await Promise.allSettled([
        getCleanData('your-id'),
        getDefinition('your-unit'),
        getContext('your-device-type')
      ]);
      
      // 整理结果：分离成功和失败的请求
      const successfulData = {};
      const failedRequests = [];
      
      allResults.forEach((result, index) => {
        const keys = ['cleanData', 'definition', 'context'];
        if (result.status === 'fulfilled') {
          successfulData[keys[index]] = result.value;
        } else {
          failedRequests.push({ key: keys[index], reason: result.reason });
        }
      });
      
      setResults({ successfulData, failedRequests });
      setIsLoading(false);
    };

    fetchAllData();
  }, []);

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h3>成功加载的数据</h3>
      <pre>{JSON.stringify(results.successfulData, null, 2)}</pre>
      
      {results.failedRequests.length > 0 && (
        <div className="error">
          <h3>加载失败的请求</h3>
          {results.failedRequests.map((req, idx) => (
            <p key={idx}>{req.key}: {req.reason.message}</p>
          ))}
        </div>
      )}
    </div>
  );
}

export default YourComponent;

关键注意点 #

• 一定要处理错误情况：如果不添加catch，某个请求失败会导致组件状态卡住，甚至抛出未捕获的Promise错误。
• 如果你用的是jQuery的$.ajax，它返回的Deferred对象可以直接和Promise API一起用，不需要额外转换。
• 确保请求参数（比如id、unit、deviceType）是正确的，你可以根据组件的props或者状态动态传入这些参数。

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