如何在api调用reactjs时先加载文本数据，然后再加载图像

import React, { Component } from 'react';

class DataLoadingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      textData: null,
      imageData: null,
      isLoading: true
    };
  }

  componentDidMount() {
    // 发起文本数据的API请求
    fetch('https://api.example.com/textData')
      .then(response => response.json())
      .then(data => {
        this.setState({ textData: data });
        // 文本数据加载完成后，再发起图像的API请求
        fetch('https://api.example.com/imageData')
          .then(response => response.blob())
          .then(image => {
            this.setState({ imageData: URL.createObjectURL(image), isLoading: false });
          });
      });
  }

  render() {
    const { textData, imageData, isLoading } = this.state;

    if (isLoading) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        <div>{textData}</div>
        <img src={imageData} alt="Image" />
      </div>
    );
  }
}

export default DataLoadingComponent;