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

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

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

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

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

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

npx create-react-app react-async-demo

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

## yarn
yarn add react-async ## npm
npm install react-async --save

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

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

// Давайте импортируем React, стили и React Async
import React from 'react';
import './App.css';
import Async from 'react-async'; // Мы запрашиваем данные пользователей из этого API
const loadUsers = () => fetch("https://jsonplaceholder.typicode.com/users") .then(res => (res.ok ? res : Promise.reject(res))) .then(res => res.json()) // Наш компонент
function App() { return ( <div className="container"> <Async promiseFn={loadUsers}> {({ data, err, isLoading }) => { if (isLoading) return "Loading..." if (err) return `Something went wrong: ${err.message}` if (data) return ( <div> <div> <h2>React Async - Random Users</h2> </div> {data.map(user=> ( <div key={user.username} className="row"> <div className="col-md-12"> <p>{user.name}</p> <p>{user.email}</p> </div> </div> ))} </div> ) }} </Async> </div> );
} export default App;

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

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

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

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

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

// Давайте импортируем React, стили и React Async
import React from 'react';
import './App.css';
import { useAsync } from 'react-async'; // Затем мы извлекаем данные пользователей из этого API const loadUsers = async () => await fetch("https://jsonplaceholder.typicode.com/users") .then(res => (res.ok ? res : Promise.reject(res))) .then(res => res.json()) // Наш компонент
function App() { const { data, error, isLoading } = useAsync({ promiseFn: loadUsers }) if (isLoading) return "Loading..." if (error) return `Something went wrong: ${error.message}` if (data) // Отображаемый компонент return ( <div className="container"> <div> <h2>React Async - Random Users</h2> </div> {data.map(user=> ( <div key={user.username} className="row"> <div className="col-md-12"> <p>{user.name}</p> <p>{user.email}</p> </div> </div> ))} </div> );
} export default App;

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

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

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

// Давайте импортируем React, стили и React Async
import React from 'react';
import './App.css';
import Async from 'react-async'; // Это API, который мы используем для запроса данных пользователя
const loadUsers = () => fetch("https://jsonplaceholder.typicode.com/users") .then(res => (res.ok ? res : Promise.reject(res))) .then(res => res.json()) // Наш компонент App
function App() { return ( <div className="container"> <Async promiseFn={loadUsers}> <Async.Loading>Loading...</Async.Loading> <Async.Fulfilled> {data => { return ( <div> <div> <h2>React Async - Random Users</h2> </div> {data.map(user=> ( <div key={user.username} className="row"> <div className="col-md-12"> <p>{user.name}</p> <p>{user.email}</p> </div> </div> ))} </div> ) }} </Async.Fulfilled> <Async.Rejected> {error => `Something went wrong: ${error.message}`} </Async.Rejected> </Async> </div> );
} export default App;

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

Заключение

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

Автор: Kingsley Silas

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

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