Очень легко сделать собственный хук для вызова API в вашем проекте. В этом случае мы напишем собственный хук для вызова одной открытой конечной точки.
Во-первых, в папке src вашего проекта React создайте папку hooks. Затем создайте файл с именем useApi.jsx.
Здесь мы напишем наш код и выполним фактический вызов API.
Установите axios через npm или yarn, так как мы будем использовать эту библиотеку для асинхронного вызова.
Мы импортируем хуки useEffect и useState из react, а также axios из axios. Затем мы пишем хук useApi как стрелочную функцию, передавая ей переменную url. Затем в созданной функции мы объявляем 3 части состояния, responseDatas, загрузку и ошибку. Затем мы добавляем асинхронную функцию (здесь она называется fetchData()) и используем блок try, catch, для обработки ответа от API, а также любых ошибок. Затем мы помечаем блок finally, чтобы установить для загрузки значение false, как только получим данные ответа. Затем мы используем хук useEffect для вызова и выполнения функции fetchData, которую мы только что написали, и, наконец, мы возвращаем наши три части состояния, responseDatas, загрузку и ошибку.
Вот и все! Ваш пользовательский крючок API готов к использованию.
Чтобы использовать этот хук, просто импортируйте его в нужный файл, вызовите его с возвращенными параметрами, загрузкой, responseDatas и ошибкой и передайте хуку открытую конечную точку API.
Для простоты я буду использовать это в базовом файле App.jsx.
Не забудьте объявить url const, чтобы вы могли передать свою конечную точку в хук.
Теперь вы полностью готовы использовать этот хук в своем следующем проекте!
Удачного кодирования!
