Javascript 在返回之前等待响应

对于我正在开发的一个应用程序，我们使用服务器端React渲染和Redux商店，我们需要与API通信。这一切都很好，但对于某些视图，在渲染到浏览器之前，我需要数据。我用它在渲染之前执行一个函数，并且使用静态测试数据，它工作得非常好。但只要我想使用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）的世界还很陌生，所以我的想法可能是完全错误的；-）

根据

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

用于仅在客户端上需要的数据。它们各自接受一个函数，该函数返回一个承诺

---

始终准备组件，以便在道具为空时

{}

或

null

不会崩溃。即使在应用程序加载并在路由之间导航时，在服务器上呈现之前获取数据，仍然会进行异步数据加载。我从未使用过

react fetcher

，但我建议尝试在

end（）

回调中呈现组件。