Лабораторная работа №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, её работу необходимо продемонстрировать на лабораторном занятии.

3.5 KiB Raw Permalink Blame History Unescape Escape