Извлечение данных в React с использованием React Async

Извлечение данных в React с использованием React Async

От автора: вы, вероятно, привыкли извлекать данные в React, используя axios или fetch. Все это можно сделать с помощью библиотеки React Async.

Обычный метод обработки выборки данных:

Выполнить вызов API.

Обновить состояние, используя ответ, если все идет как запланировано.

Или, в случае возникновения ошибок, пользователю отображается сообщение об ошибке.

При обработке запросов по сети всегда будут задержки. Это часть сделки, когда речь идет о запросе и ожидании ответа. Вот почему мы часто используем спиннер загрузки, чтобы показать пользователю, что ожидаемый ответ загружается.

React Async — это библиотека на основе promise, которая позволяет извлекать данные в приложении React. Давайте рассмотрим различные примеры с использованием компонентов, хуков и вспомогательных функций, чтобы понять, как мы можем реализовать загрузку состояния при выполнении запросов.

В этом руководстве мы будем использовать Create React App. Вы можете создать проект, запустив:

Когда это будет сделано, запустите команду для установки в проекте React Async, используя yarn или npm:

Пример 1: Загрузчики в компонентах

Библиотека позволяет использовать <Async> непосредственно в JSX. Таким образом, пример компонента будет выглядеть следующим образом:

Сначала мы создали функцию с именем loadUsers. Она выполняет вызов API с использованием API выборки. И, когда это происходит, она возвращает promise, который будет разрешен. После этого необходимые свойства становятся доступными для компонента.

Эти свойства это:

isLoading: Обрабатывает случаи, когда ответ еще не получен от сервера.

err: Для случаев, когда возникает ошибка. Вы также можете переименовать его в error.

data: Ожидаемые данные, полученные с сервера.

Как видно из примера, мы возвращаем что-то для отображения пользователю в зависимости от свойства.

Пример 2: Загрузчики в хуках

Если вы являетесь поклонником хуков (а так и должно быть), есть вариант хуков, доступный при работе с React Async. Вот как это выглядит:

Это похоже на пример компонента, но в этом сценарии мы используем useAsync, а не компонент Async. Ответ возвращает promise, который разрешается, и у нас также есть доступ к аналогичным свойствам, как в предыдущем примере, с помощью которых мы можем затем вернуться к отображенному интерфейсу.

Пример 3: Загрузчики во вспомогательных функциях

Компоненты вспомогательных функций полезны, чтобы сделать наш код понятным и читаемым. Эти вспомогательные функции можно использовать при работе с хуком useAsync или компонентом Async, которые мы только что рассмотрели. Вот пример использования вспомогательных функций с компонентом Async.

Это похоже на то, когда мы использовали свойство. Сделав это, вы можете разбить другой раздел приложения на небольшие компоненты.

Заключение

Если вы устали идти по пути, который я упомянул в первом разделе этого руководства, вы можете начать использовать React Async в том проекте, над которым работаете. Исходный код из этого руководства, можно найти в разных ветках на GitHub.

Автор: Kingsley Silas

Источник: //css-tricks.com

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: