Реагировать на Js-хуки
useFetch
Перехват в React с кэшированием
Если вы создаете приложение React, которое извлекает данные из API, вы можете снова и снова писать один и тот же код для обработки состояний загрузки, ошибок и данных.
Пользовательский хук может помочь вам избежать дублирования и сделать ваш код более модульным и пригодным для повторного использования.
В этой статье мы рассмотрим, как реализовать хук useFetch
в React, который использует Axios для выборки данных и поддерживает кэширование, чтобы избежать ненужных сетевых запросов. К концу этой статьи у вас будет собственный хук, который вы сможете использовать в своих собственных проектах React.
Предпосылки
Прежде чем мы начнем, вы должны иметь некоторое представление о React и хуках. Вам также потребуется установить Axios в вашем проекте. Если вы еще этого не сделали, вы можете установить его, выполнив следующую команду:
npm install axios
Крюк useFetch
Начнем с создания нового файла с именем useFetch.js
. Здесь мы определим наш пользовательский хук.
import { useState, useEffect } from 'react'; import axios from 'axios'; const useFetch = (url, options = {}) => { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await axios.get(url, options); setData(response.data); setLoading(false); } catch (err) { setError(err); setLoading(false); } }; const cacheData = localStorage.getItem(url); if (cacheData) { setData(JSON.parse(cacheData)); setLoading(false); } else { fetchData(); } }, [url, options]); useEffect(() => { if (data) { localStorage.setItem(url, JSON.stringify(data)); } }, [data, url]); return { loading, error, data }; }; export default useFetch;
Давайте рассмотрим этот код шаг за шагом.
Сначала мы импортируем хуки useState
и useEffect
из React, а также Axios.
Затем мы определяем наш пользовательский хук с именем useFetch
. Этот хук принимает два аргумента: URL-адрес для извлечения и необязательный объект, содержащий параметры Axios, такие как заголовки, параметры запроса и т. д.
Внутри хука useFetch
мы определяем три переменные состояния, используя хук useState
: loading
, error
и data
. Эти переменные будут отслеживать состояние загрузки, любые ошибки, возникающие во время выборки, и полученные данные соответственно.
Затем мы определяем эффект с помощью хука useEffect
. Этот эффект отвечает за получение данных и соответствующее обновление переменных состояния. Вот что он делает:
- Он определяет асинхронную функцию с именем
fetchData
, которая отправляет запрос Axios GET на указанный URL-адрес с указанными параметрами. - Если запрос выполнен успешно, он обновляет переменную состояния
data
данными ответа и устанавливает дляloading
значение false. - Если возникает ошибка, он обновляет переменную состояния
error
с ошибкой и устанавливаетloading
в false. - Он проверяет, кэшированы ли данные уже в локальном хранилище. Если это так, он устанавливает переменную состояния
data
в кэшированные данные и устанавливаетloading
в false. Если это не так, он вызывает функциюfetchData
для получения данных.
Хук useEffect
принимает массив зависимостей в качестве второго аргумента. В данном случае мы включаем переменные url
и options
в качестве зависимостей. Это гарантирует, что эффект запускается всякий раз, когда изменяется URL-адрес или параметры, что необходимо для получения правильных данных.
Наконец, мы определяем еще один эффект, используя хук useEffect
. Этот эффект отвечает за кэширование данных в локальном хранилище всякий раз, когда изменяется переменная состояния data
. Вот что он делает:
- Он проверяет, является ли
data
правдивым (т. е. неnull
,undefined
илиfalse
). Если это так, он сохраняет данные в локальном хранилище, используя методlocalStorage.setItem
. - Эффект работает только при изменении переменных
data
илиurl
.
В конце хука мы возвращаем объект, содержащий переменные состояния loading
, error
и data
. Это позволяет компоненту, использующему хук useFetch
, получить доступ к состоянию загрузки, любым возникающим ошибкам и извлеченным данным.
Использование крючка useFetch
Теперь, когда мы определили наш пользовательский хук, давайте посмотрим, как использовать его в компоненте.
Вот пример компонента, который использует хук useFetch
для получения данных из API:
import useFetch from './useFetch'; const MyComponent = () => { const { loading, error, data } = useFetch('https://jsonplaceholder.typicode.com/posts'); if (loading) { return <div>Loading...</div>; } if (error) { return <div>Error: {error.message}</div>; } return ( <ul> {data.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }; export default MyComponent;
В этом примере мы импортируем хук useFetch
из файла useFetch.js
, который мы создали ранее. Затем мы вызываем хук useFetch
с URL-адресом, который мы хотим получить (https://jsonplaceholder.typicode.com/posts
).
Хук useFetch
возвращает объект с тремя переменными состояния: loading
, error
и data
. Мы деструктурируем эти переменные и используем их для условной визуализации сообщения о загрузке, сообщения об ошибке или извлеченных данных.
Если loading
истинно, мы отображаем простое сообщение о загрузке. Если error
соответствует действительности, мы отображаем сообщение об ошибке с текстом сообщения об ошибке. Если data
соответствует действительности, мы отображаем полученные данные в виде неупорядоченного списка.
Заключение
В этой статье мы рассмотрели, как реализовать хук useFetch
в React с поддержкой кэширования с помощью Axios. Этот настраиваемый хук позволяет получать данные из API и обрабатывать загрузку, ошибки и состояния данных модульным и многоразовым способом. Мы также показали, как использовать хук useFetch
в компоненте для извлечения данных и их условного рендеринга на основе состояния загрузки и ошибки.
С помощью этого хука useFetch
вы можете легко получать данные из API в своих проектах React, сохраняя при этом свой код организованным и простым в обслуживании.