67 lines
3.5 KiB
Markdown
67 lines
3.5 KiB
Markdown
|
# Лабораторная работа №F2 - Получение данных через API (Fetch)
|
|||
|
|
|
|||
|
|
## Цель работы
|
|||
|
|
|
|||
|
|
Освоить получение данных через fetch API и отображение данных на клиенте.
|
|||
|
|
|
|||
|
|
## Ход выполнения работы
|
|||
|
|
|
|||
|
|
1. Найти документацию по интеграции с API Github.
|
|||
|
|
2. Изучить fetch API и Promise в Javascript.
|
|||
|
|
3. Создать приложение React с шаблоном TypeScript.
|
|||
|
|
4. Описать интерфейс репозитория Github и состояние компонента со списком репозиториев.
|
|||
|
|
5. Реализовать метод получения данных о репозиториях пользователя и сохранение их в состоянии.
|
|||
|
|
6. Релизовать отображение списка репозиториев.
|
|||
|
|
|
|||
|
|
## Документация API Github
|
|||
|
|
|
|||
|
|
Описание ресурсоа API Github можно найти здесь: <https://docs.github.com/en/rest>.
|
|||
|
|
|
|||
|
|
Пример данных со списком репозиториев пользователя _vladdy-moses_: <https://api.github.com/users/vladdy-moses/repos>.
|
|||
|
|
|
|||
|
|
В качестве примера можно использовать любого пользователя, количество публичных репозиториев у которого больше трёх.
|
|||
|
|
|
|||
|
|
## Метод получения данных
|
|||
|
|
|
|||
|
|
В качестве базы будет использоваться приложение из л/р №F1.
|
|||
|
|
|
|||
|
|
Пусть в `App.tsx` будут выводиться карточки со списком репозиториев.
|
|||
|
|
|
|||
|
|
Для того, чтобы это сделать, надо:
|
|||
|
|
|
|||
|
|
1. Объявить интерфейс с информацией о репозитории: названии, описании, ссылке на github.
|
|||
|
|
2. Создать асинхронный метод по получению данных от API при помощи fetch API.
|
|||
|
|
3. Добавить вывод от API в `console.log` и вызвать метод, чтобы убедиться, что он работает.
|
|||
|
|
|
|||
|
|
Получение данных надо реализовать при помощи Fetch API.
|
|||
|
|
Информацию можно получить здесь: <https://developer.mozilla.org/ru/docs/Web/API/Fetch_API>.
|
|||
|
|
|
|||
|
|
Пример функции:
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
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, её работу необходимо продемонстрировать на лабораторном занятии.
|