在 React 中使用 Promise 链接函数答案

【问题标题】：Linking functions with Promises in React在 React 中使用 Promise 链接函数
【发布时间】：2018-07-27 10:33:31
【问题描述】：

在过去的几天里，我一直在努力以正确的顺序更新 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));
  }

【问题讨论】：

标签： javascript reactjs promise chaining

【解决方案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>

【讨论】：

效果很好！我想我敲了一会儿门，但没有同时在正确的地方找到正确的方法。非常感谢你。我是这个网站的新手，还不知道如何将此标记为正确答案。请帮我最后一次。
@DRobinson 太好了！别客气！ This answer 解释了如何接受答案。

【解决方案2】：

我找到了对我的扩展（已编辑）问题的答案，即为什么链条没有按预期工作。我所要做的就是正确链接函数，如下所示：

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

【讨论】：