在React中将函数与Promise链接

Posted 2021-05-03

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

答案

您必须调用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>

另一答案

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

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

以上是关于在React中将函数与Promise链接的主要内容，如果未能解决你的问题，请参考以下文章

如何在开发过程中将本地 React 库与本地 React 项目链接？

在 Javascript 中将对象 Promise 转换为字符串

前端面试题之手写promise

如何在 React 中将函数与钩子绑定？

react 父组件向子组件传递函数

我如何将这些函数与 Promise 链接在一起？