在 React 中将函数与 Promises 链接起来

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 链接起来

Linking functions with Promises in React

javascript

chaining

promise

reactjs