在 React 中将函数与 API 调用同步答案

【问题标题】：Synchronise a function with an API Call in React在 React 中将函数与 API 调用同步
【发布时间】：2017-12-13 11:37:26
【问题描述】：

以下是我的应用中正在进行的步骤。

根据 UI 事件更新状态。
一旦状态更新发出 API 请求。
根据该 API 请求的响应，进行另一个接受两个参数的函数调用，一个对象来自步骤 1 中更新的状态，另一个对象来自步骤 2 中 API 请求的响应。

我无法做的是如何让我的第二个函数等待第一个请求完成？

更新状态并发出 API 请求的代码。

this.setState({
  // Set State here.
}, () => {
  this.props.Make_API_Call(params);
});

执行上述代码后，我需要调用第三个函数的两个参数已经在我的组件的本地状态中。剩下的问题是如何附加我的第三个函数？

【问题讨论】：

您可以从 Make_API_Call 函数返回一个承诺，并在解决该承诺时执行第三个函数。如果你使用一些 fetch 库（例如 whatwg-fetch），返回一个 Promise 应该不难，因为它们支持 Promise。

标签： reactjs flux

【解决方案1】：

确保您的函数 MAKE_API_CALL() 返回一个承诺。一旦该承诺解决，.then 函数（实现或拒绝）将执行。

this.setState({
  // Set State here.
}, () => {
  this.props.Make_API_Call(params).then(function(res) {
    thirdFunction(this.state.someValue, res)
  }, function(reason) {
    // rejection
  });
});

【讨论】：