Question

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

每个页面都有获取功能，该功能可在componentDidMount生命周期中从API获取数据。

我要先获取数据，然后用数据呈现页面并将其返回给客户端。就我而言，UX是什么。

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

应用程序现在如何获取数据：

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);
});
...

Answer 1

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

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

然后：

render(){
  if (flag){
    return null;
  } else {
    return this.view;
  }
}

Answer 2

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

1）InitialLoading（真） 2）提取api调用操作创建者 3）基于成功，错误创建动作创建器将获取方法的输出数据存储在存储区中 4）InitialLoading（假）

渲染前从外部API获取数据

2 个答案: