Как реагировать, каков наилучший метод для запуска последовательности функций до завершения await / async?- используя время выполнения

Question

Цель: Я хочу показать несколько строк HTML, пока ожидают завершения.Например ..

<p>starting api</p>
<p>loading</p>
<p>getting api</p>

Я просто хочу, чтобы они загружались с задержкой (возможно, я мог бы использовать функцию тайм-аута), но в целом, если ожидание завершает эти теги p исчезают и все пользователивидит

готово!

Проблема: Мне не нужно знать, как реализовать функцию тайм-аута или как сделать условный рендеринг в реакции.Что я хочу знать, так это как использовать время ожидания, необходимое для завершения ожидания (обычно несколько секунд) и отображения определенного текста на странице, чтобы имитировать прогресс?

текущее решение

Пожалуйста, не обращайте внимания на мой блок ошибок перехвата, так как в нем не реализован setTimeout.Но в основном здесь я откладываю то, что видит пользователь, хотя вызов API завершается примерно за 2 секунды.Это обходной путь, это больше для UX.Но мне интересно, могу ли я подключиться к времени выполнения и отобразить сообщения.

handleSubmit = async event => {
    event.preventDefault();
    setTimeout(()=> {
      this.setState(prevState => ({
        status: {
          ...prevState.status,
          start: true
        }
      }));
    }, 1000);
    setTimeout(()=> {
      this.setState(prevState => ({
        status: {
          ...prevState.status,
          api: true
        }
      }));
    }, 2000);

    try {
      let data = await this.getlogin();

      setTimeout(()=>{
        this.setState(prevState => ({
          status: {
            ...prevState.status,
            start: true,
            api: true
          },
          done: {
            ...prevState.done,
            done: true
          }
        }));
      }, 3000);
    } catch (e) {
      alert(e);
      this.setState(prevState => ({
        status: {
          ...prevState.status,
          start: true,
          api: true
        },
        done: {
          ...prevState.done,
          done: false
        }
      }));
    }
  };

enter code here

Answer 1

Трудно дать точное решение без рабочего фрагмента, но вот пример условного рендеринга:

class App extends React.Component {
  state = {
    startingApi: false,
    loadingApi: false,
    gettingApi: false
  }
  
  handleClick = () => { 
    this.setState({startingApi: true, loadingApi: true, gettingApi: true});
    
    setTimeout(() => {
      this.setState({startingApi: false});
    }, 1000);
    
    setTimeout(() => {
      this.setState({loadingApi: false});
    }, 2000);
    
    setTimeout(() => {
      this.setState({gettingApi: false});
    }, 3000);
  }
  
  render(){
    return (
      <div>
        <button onClick={this.handleClick}>Get Data</button>
        <div>
          {this.state.startingApi 
            ? <React.Fragment>
                <img src="https://thumbs.gfycat.com/ZealousCloudyAntelopegroundsquirrel-small.gif" /> 
                Starting API
              </React.Fragment>
            : "Api started"
          }
        </div>
        <div>  
          {this.state.loadingApi 
            ? <React.Fragment>
                <img src="https://thumbs.gfycat.com/ZealousCloudyAntelopegroundsquirrel-small.gif" /> 
                Loading API
              </React.Fragment>
            : "Api Loaded"
          }
        </div>
        <div>
          {this.state.gettingApi 
            ? <React.Fragment>
                <img src="https://thumbs.gfycat.com/ZealousCloudyAntelopegroundsquirrel-small.gif" /> 
                Getting API
              </React.Fragment>
            : "Api Gotten"
          }
         </div>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.querySelector('#root'));

img {
  width: 20px;
  margin-left: 10px;
}

div {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>