在React中将函数与Promise链接

问题描述 投票:1回答:2

我一直在努力在过去的几天里以正确的顺序更新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
2个回答
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>

0
投票

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

this.mockOne()
.then(successMessage => {
  this.mockTwo()
  .then(successMessage => {
    this.mockThree()
    .then(successMessage => {
      this.mockFour()
    })
  })
})
© www.soinside.com 2019 - 2024. All rights reserved.