https://github.com/eujinnlucashow/http-requests
➡️ Робота з REST API 🔙🔚
https://github.com/eujinnlucashow/http-requests
api fetch-api http-requests response-data rest-api vanilla-react
Last synced: about 2 months ago
JSON representation
➡️ Робота з REST API 🔙🔚
- Host: GitHub
- URL: https://github.com/eujinnlucashow/http-requests
- Owner: EuJinnLucaShow
- Created: 2023-06-05T18:47:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-07T14:22:49.000Z (over 2 years ago)
- Last Synced: 2025-08-14T02:54:33.902Z (2 months ago)
- Topics: api, fetch-api, http-requests, response-data, rest-api, vanilla-react
- Language: JavaScript
- Homepage: https://eujinnlucashow.github.io/http-requests/
- Size: 6.48 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
# react
- Основы HTTP-запросов в React
- «Архитектура» компонентов и состояний
- Форма для имени покемона PokemonForm
- Форму нельзя отправить если имя покемона пустое
- `react-toastify` для алертов
- Компонент `App`
- Нужен стейт для хранения имени покемона
- Информация о покемоне `PokemonInfo`
- Нужей стейт для хранения ответа от бекенда
- Ендпоинт покемонов `https://pokeapi.co/api/v2/pokemon/имя_покемона`
- Рендер разметки
- Если нет имени покемона показывать текст «Введите имя покемона.»
- Если загружаем то показываем текст «Загружаем...»
- Если есть покемон, показываем карточку покемона
- Если загружаем то показываем фолбек компонент
- Обработка ошибки HTTP-запроса
- В `fetch` нужно обработать 404 в ответе
- Возвращаем `Promise.reject(new Erorr(Нет покемона с именем имя_покемона))`
- Нужен стейт для хранения ошибки
- Если ошибка рендерим разметку ошибки
- Паттерн state machine
- Плюсы
- Уходят проблемы сброса полей «чтобы работало».
- Не нужно следить на значениями N полей.
- Более понятные условия рендера разметки.
- Используем статус
- idle - запроса еще нет
- pending - пошел запрос
- resolved - успешный запрос
- rejected - запрос с ошибкой