如何按顺序运行JavaScript函数（反应）

Question

我创建了一个小型的React应用，用于显示来自SharePoint网站的文档。

为了使App正常运行，我必须添加setTimeouts，但我知道使用回调或Promise或其他某种方法必须有更好的方法。.<

我的知识不足，所以有人可以向我指出正确的方向吗？

  // Handles what runs when the drop down is changed
  public handleDropdownChange(e) {

    // Updates dropdown select
    this.setState({ selectedOption: e.target.value, isLoading: true });

    // Checks security permissions - MAKES A GET REQUEST
    setTimeout(() => {
      this.getSecurityGroupUsers();
    }, 1000); 

   // Ghecks if user can access docs
    setTimeout(() => {
      this.checkForDocAccess();
    }, 2000); 

    // Gets documents - MAKES A GET REQUEST
    setTimeout(() => {
      this.getDocuments();
    }, 4000); 

    // Delete Mark as Reviewed property THEN displays docs
    setTimeout(() => {
      this.hideMarkAsReviewed();
    }, 8000);

  }

其中一项功能：

  // Grabs the documents
  public getDocuments() {

    axios
      .get("https://bpk.sharepoint.com/_api/search/query?querytext='owstaxIdDocumentx0020Owner:" + this.state.selectedOption + "'&trimduplicates=true&rowsperpage=100&rowlimit=1000&selectproperties='LastReviewDateOWSDATE,ScheduledReviewDateOWSDATE,Path'",
        { params:{},
          headers: { 'accept': 'application/json;odata=verbose' }
        })
      .then(response =>
          response.data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results.map(document => ({
            Type: this.checkFile(document),
            Name: document.Cells.results[6].Value.split("/").pop(),
            'Scheduled Review Date': document.Cells.results[8].Value.slice(0,-11),
            Path: document.Cells.results[6].Value.replace('https://bpkintelogydev.sharepoint.com', ''),
            Site: document.Cells.results[6].Value.split('/').slice(4).slice(0,1),
            'Last Review Date': document.Cells.results[7].Value.slice(0,-11),
            View: <a href="#" onClick={()=>window.open(document.Cells.results[6].Value + '?web=1&action=edit')}>View</a>,
            'Mark as Reviewed': <a href='#'>Mark</a>
        }))
      )
      .then(documents => {
        this.setState({documents, isLoading: true});
      })
      .catch(error => {
        //console.log(error);
      });

  }

Answer 1

您可以使用异步等待来解决等待的诺言

public handleDropdownChange = async e => {

   this.setState({ selectedOption: e.target.value, isLoading: true });

   await this.getSecurityGroupUsers();

   await this.checkForDocAccess();

   await this.getDocuments();

   await this.hideMarkAsReviewed();
}

Answer 2

您需要一个函数回调！

function functionOne(x) { return x; };

function functionTwo(var1) {
    // some code
}

functionTwo(functionOne);