Правильно ли оформлен асинхронный запрос в данном компоненте? Или compnentDidMount оформить в виде синхронного запроса, а функцию getUserName оставить асинхронной?
1) Запрос в componentDidMount получает описание поста от сервера. Результат записываем в state
2) Запрос на получение логина пользователя по его userId из предыдущего запроса. - метод getUserName
Данные запроса на получение поста имеют вид
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
}
Данные на получение пользователя имеют вид
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",...
Код компонента
constructor(props) {
super(props);
this.state = {
post: {},
author: ''
};
}
async componentDidMount() {
let id = this.props.match.params.id;
try{
const response = await axios(`https://jsonplaceholder.typicode.com/posts/${id}`);
const data = await response.data;
const authorId = data.userId;
this.setState({post: data});
//Логин пользователя
this.getUserName(authorId);
} catch (e) {
console.log(e);
}
}
//получение логина пользователя
getUserName = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!response.ok) {
console.log(response.status);
}
const data = await response.json();
const result = await data.username;
this.setState({author: result});
}
render() {
return (
<div style={postStyle}>
<h1>Post Details {this.props.match.params.id}</h1>
<h2>{this.state.post.title}</h2>
<p>{this.state.post.body}</p>
<div>
<span>User:
<Link to={'/users/' + this.state.post.userId}>{this.state.author}</Link>
</span>
</div>
</div>
);
}
В данный момент - заметно "дергание" отображение поста - оно происходит из за загрузки данных и формирования state.
Решение-размышление:
Чтобы сгладить данный момент повесить на всю страницу прелоадер и отключить его, когда state сформирован, в state добавить свойство load: true и как только запрос успешен менять его значение.
Но тогда получается "перенасыщение" прелоадеров в приложении
на странице users - загрузка пользователей
на странице посты - загрузка постов
открытие поста - прелоадер.
Как можно данное поведение усовершенствовать?
