0

我有一个基于 React Starter Kit 的应用程序。

每个页面都有一个 fetch 函数，在 componentDidMount 生命周期中从 API 获取数据。

我想先获取数据，然后用数据渲染页面并将其返回给客户端。就我而言，UX 无论如何。

我知道 RSK 是同构的，我已准备好更改样板或创建自己的样板。但我不明白如何在渲染页面之前从 API 获取数据（我的意思是如何告诉快递服务器需要什么数据）。

App现在如何获取数据：

example_page.js：

import getBooks from 'queries/getAllBooks';
...
class IdTag extends React.Component {
componentDidMount(){
    this.getBooks();
}

  getBooks() => {
    const request = getBooks();
    request
      .then(...)
  }
}

getAllBooks.js：

import doGet from './doGet';

let result = '';

const request = async () => {
  const reqUrl = '/api/books/';

  result = await doGet(reqUrl);

  return result;
};

export default request;

doGet.js：

const request = async reqUrl => {
  let requestResult = null;

  const doQuery = async () => {
    const response = await fetch(reqUrl, {
      method: 'GET',
    });
    const result = await response.json();
    result.status = response.status;

    return result;
  };

  requestResult = await doQuery();
  return requestResult
}
... 
export default request;

server.js：

...
app.get('/api/*', async (req, res) => {
  const newUrl = config.gate.URL + req.url.replace('/api', '');
  const accessToken = req.cookies.access_token;

  const response = await nodeFetch(newUrl, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  });
  const result = await response.json();

  res.status(response.status);
  res.json(result);
});
...
4

2 回答 2

0

如果每个页面都有api调用，那么最好使用redux和redux saga。redux saga 的目的是处理 api 调用。它将处理 Q 中的动作。当你使用 fetch 方法调用 api 时，在下面创建 actioncreators

1) InitialLoading(true) 2) Fetch api 调用 action creator 3) 基于成功，error 创建 action creator 将 fetch 方法输出数据存储到 store 4) InitialLoading(false)

于 2018-11-26T16:21:41.803 回答
-1

您可以在开始获取时简单地设置一个标志，并且在获取时返回 null 而不是渲染。就像是：

flag = true;
request = getBooks();
request.then(flag = false);

接着：

render(){
  if (flag){
    return null;
  } else {
    return this.view;
  }
}
于 2018-11-26T16:16:56.000 回答