时间戳

首页 > 解决方案 > 在反应中，在等待/异步完成之前运行函数序列的最佳方法是什么？- 使用执行时间

javascript - 在反应中，在等待/异步完成之前运行函数序列的最佳方法是什么？- 使用执行时间

问题描述

目标： 我希望能够在 await 等待完成时显示几行 html 行。例如..

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

我只是希望这些延迟加载（也许我可以使用超时功能），但总而言之，如果等待完成，这些 p 标签就会消失并且用户看到的只是

完毕！

问题： 我不需要知道如何实现超时功能或如何在反应中进行条件渲染。我想知道的是如何使用“等待”时间 - 等待完成所需的时间（通常是几秒钟）并在页面上显示某些文本以模仿进度？

当前解决方案

请忽略我的 catch 错误块，因为我没有在其中实现 setTimeout。但基本上在这里，即使 api 调用在 2 秒内完成，我也会延迟用户看到的内容。这是一种解决方法，这更适用于 ux。但我想知道是否可以利用执行时间并显示 msges。

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

标签： javascriptreactjsasync-await

解决方案

没有工作片段很难给出准确的解决方案，但这里有一个条件渲染的例子：

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>

推荐阅读