等待响应再返回

Question

对于我正在开发的应用程序，我们正在使用服务器端 React 渲染和 Redux 商店，我们需要与我们的 API 进行通信。这一切都很好，但对于某些视图，我需要数据 before 我将其呈现给浏览器。我正在使用 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 函数调用调度。

我会尝试以下方法：

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))

并确保你return你的承诺如上所述。根据文档：

The @prefetch decorator is for universal data, while @defer is for data that is only required on the client. They each accept a function that returns a promise.

等待响应再返回

Wait for response before returning

javascript

node.js

redux