Получение данных и Suspense
Suspense позволяет приостановить рендеринг компонента. Например, если в нем выполняются асинхронные операции, такие как получение данных, то Suspense отложит рендер данного компонента.
Но как Suspense понимает, что внутри компонента происходит сетевой запрос на получение данных? Suspense рендерит индикатор загрузки, но в коде мы нигде не сообщаем React, что делаем сетевой запрос. Если вы используете библиотеки react-query, SWR, то в них есть поддержка Suspense. Давайте попробуем сделать поддержку Suspense для Axios.
Чтобы Suspense узнал о том, что в компоненте происходит асинхронная операция, нужно выкинуть исключение в виде промиса. Можно сделать функцию, которая бы делала это с любыми промисами и обернуть ее в сетевые запросы:
const dataFetch = () => {
const userPromise = fetchUser;
return {
user: wrapPromise(userPromise),
};
};
const wrapPromise = (promise) => {
let status = "pending";
let result;
let suspend = promise().then(
(res) => {
status = "success";
result = res;
},
(err) => {
status = "error";
result = err;
}
);
return {
read() {
if (status === "pending") {
throw suspend;
} else if (status === "error") {
throw result;
} else if (status === "success") {
return result;
}
},
};
};
Применение данной функции:
const resource = dataFetch();
const UserProfile = () => {
const user = resource.user.read();
return (
<div className="container">
<h1 className="title">{user.name}</h1>
</div>
);
};
Таким образом, Suspense увидит, что в компоненте UserProfile происходит сетевой запрос и покажет индикатор загрузки.
blog.openreplay.com/data-fe…in-react
