Question

过去几天来，我一直在努力以正确的顺序更新Reactjs中的状态，这使我意识到我需要正确处理异步函数。不幸的是，事实证明我也不完全了解Promise（）。我正在努力使Promise链正常工作，因为在下面的示例中从未调用过我的第三个函数。

componentDidMount() {
    this.mockOne()
    .then(this.mockTwo())
    .then((successMessage) => {
      console.log('successMessage: ', successMessage);
      this.mockThree()
    });
  }

  mockOne() {
    return new Promise((resolve, reject) => {
      console.log('mockOne')
    })
  }

  mockTwo() {
    return new Promise((resolve, reject) => {
      setTimeout(function() {
        console.log('mockTwo')
      }, 2000)
    })
    .catch(err => console.log('There was an error in mockTwo:' + err));
  }

  mockThree() {
    return new Promise((resolve, reject) => {
      console.log('mockThree')
    })
  }

console output

我已经尝试过MDC中的指令，但是要么在mockTwo（）有机会响应之前立即调用了mockThree（），要么根本没有调用mockThree（）。

任何帮助您完成此工作的帮助将不胜感激。

提供的答案非常有效，直到我尝试链接更多异步函数。谁能帮助我理解为什么我的第一个功能导致工作流程暂停，但接下来的三个功能立即完成？

componentDidMount() {

    this.mockOne()
      .then(successMessage => {
        this.mockTwo();
      })
      .then(successMessage => {
        this.mockThree();
      })
      .then(successMessage => {
        this.mockFour();
      });
  }

  mockOne() {
    return new Promise((resolve, reject) => {
      console.log("mockOne");
      setTimeout(function() {
        resolve("Test success message");
      }, 2000);
    }).catch(err => console.log("There was an error in mockOne:" + err));
  }

  mockTwo() {
    return new Promise((resolve, reject) => {
      console.log("mockTwo");
      setTimeout(function() {
        resolve("Test success message");
      }, 2000);
    }).catch(err => console.log("There was an error in mockTwo:" + err));
  }

  mockThree() {
    return new Promise((resolve, reject) => {
      console.log("mockThree");
      setTimeout(function() {
        resolve("Test success message");
      }, 2000);
    }).catch(err => console.log("There was an error in mockThree:" + err));
  }

  mockFour() {
    return new Promise((resolve, reject) => {
      console.log("mockFour");
      setTimeout(function() {
        resolve("Test success message");
      }, 2000);
    }).catch(err => console.log("There was an error in mockFour:" + err));
  }

Answer 1

您必须调用resolve函数以实现诺言。您还需要确保不立即调用this.mockTwo()，而只是将函数this.mockTwo赋予then。

class App extends React.Component {
  componentDidMount() {
    this.mockOne()
      .then(this.mockTwo)
      .then(successMessage => {
        console.log("successMessage: ", successMessage);
        this.mockThree();
      });
  }

  mockOne() {
    return new Promise((resolve, reject) => {
      console.log("mockOne");
      resolve();
    });
  }

  mockTwo() {
    return new Promise((resolve, reject) => {
      console.log("mockTwo");
      setTimeout(function() {
        resolve("Test success message");
      }, 2000);
    }).catch(err => console.log("There was an error in mockTwo:" + err));
  }

  mockThree() {
    return new Promise((resolve, reject) => {
      console.log("mockThree");
      resolve();
    });
  }

  render() {
    return null;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

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

Answer 2

我想出了我的扩展（已编辑）问题的答案，该问题为何链条无法按预期工作。我要做的就是正确地链接功能，如下所示：

this.mockOne()
.then(successMessage => {
  this.mockTwo()
  .then(successMessage => {
    this.mockThree()
    .then(successMessage => {
      this.mockFour()
    })
  })
})

在React中将函数与Promises链接

2 个答案: