在返回之前等待响应

Question

对于我正在处理的应用程序，我们使用服务器端React渲染与Redux存储，我们需要与我们的API进行通信。 这一切都很好，但对于某些视图，我需要数据才能将其呈现给浏览器。 我正在使用react-fetcher在渲染之前执行一个函数，并且使用静态测试数据，这非常合适。 但是，只要我想使用API​​中的数据，我就迷失了。 一切都是异步的，但这意味着我的应用程序在我从API返回结果之前呈现。

我的代码看起来像这样：

function getData(apiToken, dispatch) {
  superagent.get('http://api.url/endpoint')
    .set('x-api-token', apiToken)
    .end((err, res) => {
      dispatch({
        type: 'MY_STORE_ACTION',
        data: res.body
      });
  });
}


@prefetch(({ dispatch, apiToken }) => getData(apiToken, dispatch))

当然，这不起作用，因为end是异步回调而我的应用程序不等待它。

值得一提的是，我对ECMAScript和NodeJS（来自PHP）的世界都很陌生，所以也许我的思维方式完全错误;-)

Answer 1

根据react-fetcher文档，您应该使用getData函数调用dispatch。

我会尝试以下方法：

function getData(apiToken) {
  // prefetch expects you to return a promise
  return superagent.get('http://api.url/endpoint')
    .set('x-api-token', apiToken)
    .end((err, res) => {
      return {
        type: 'MY_STORE_ACTION',
        data: res.body
      };
  });
}

@prefetch(({ dispatch, apiToken }) => dispatch(getData(apiToken))

并确保如上所述返回您的承诺。 根据文件：

@prefetch装饰器用于通用数据，而@defer用于仅在客户端上需要的数据。 他们每个人都接受一个返回承诺的函数。