.. | ||
example.png | ||
README.md |
Лабораторная работа №F2 - Получение данных через API (Fetch)
Цель работы
Освоить получение данных через fetch API и отображение данных на клиенте.
Ход выполнения работы
- Найти документацию по интеграции с API Github.
- Изучить fetch API и Promise в Javascript.
- Создать приложение React с шаблоном TypeScript.
- Описать интерфейс репозитория Github и состояние компонента со списком репозиториев.
- Реализовать метод получения данных о репозиториях пользователя и сохранение их в состоянии.
- Релизовать отображение списка репозиториев.
Документация API Github
Описание ресурсоа API Github можно найти здесь: https://docs.github.com/en/rest.
Пример данных со списком репозиториев пользователя vladdy-moses: https://api.github.com/users/vladdy-moses/repos.
В качестве примера можно использовать любого пользователя, количество публичных репозиториев у которого больше трёх.
Метод получения данных
В качестве базы будет использоваться приложение из л/р №F1.
Пусть в App.tsx
будут выводиться карточки со списком репозиториев.
Для того, чтобы это сделать, надо:
- Объявить интерфейс с информацией о репозитории: названии, описании, ссылке на github.
- Создать асинхронный метод по получению данных от API при помощи fetch API.
- Добавить вывод от API в
console.log
и вызвать метод, чтобы убедиться, что он работает.
Получение данных надо реализовать при помощи Fetch API. Информацию можно получить здесь: https://developer.mozilla.org/ru/docs/Web/API/Fetch_API.
Пример функции:
let getData = () => {
fetch(`https://api.github.com/users/vladdy-moses/repos`)
.then(res => res.json())
.then((res: GithubRepo[]) => {
console.log(res);
})
};
Добавление состояния и вывод данных на экран
Проведите самостоятельно.
В качестве состояния можете использовать массив элементов с интерфейсом GithubRepo
.
В работе №F1 состоянием счётчика было "текущее количество".
В этой же работе состоянием компонента "приложение" будет "массив репозиториев, полученный через API".
Должно получиться что-то наподобие этого:
Защита лабораторной работы
Как и с л/р №F1, её работу необходимо продемонстрировать на лабораторном занятии.