5. Взаимодействие с сервером: axios, useEffect и useState

Для доступа к видео оформите подписку на курс

5. Взаимодействие с сервером: axios, useEffect и useState

Подключим Rick and Morty API через axios, загрузим персонажей в useEffect и сохраним в state. Отрисуем список через map, добавим key и базовую верстку карточек.

Оценить качество материала и подачу материала автором видео:

Front-end

Трудоустройтесь middle front-end разработчиком на React JS (TypeScript) за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Front-end

Back-end

Трудоустройтесь middle back-end разработчиком за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Back-end

Карьерный бустер

Получите коммерческий опыт на реальных стартапах, прокачайте tech & soft навыки, научитесь работать в команде, проходить собеседования и получите первую работу в IT!

Перейти на курс
Карьерный бустер

Основы Front-end

Сделайте первый шаг в IT, освоив базовые знания разработки и научившись создавать небольшие проекты на JavaScript

Перейти на курс
Основы Front-end

Основы Back-end

Сделайте первый шаг в IT, освоив базовые знания разработки. Без опыта. Без математики. Только практика: JavaScript, SQL, Node JS, база данных

Перейти на курс
Основы Back-end

5. Взаимодействие с сервером

Axios

Давайте отобразим персонажей мультфильма на странице CharacterPage

Информация о персонажах хранится на сервере, поэтому необходимо выполнить запрос. Чтобы нам удобно было взаимодействовать с сервером воспользуемся библиотекой axios, установленной в разделе: 1. Начало работы

axios — это популярная библиотека для выполнения HTTP-запросов в JavaScript, особенно часто используемая в приложениях на React и других фронтенд-фреймворках. Она упрощает работу с API, предоставляя удобный синтаксис и возможность настройки.

Некоторые особенности axios:

  • Простота использования: Легко выполнять GET, POST, PUT, DELETE и другие запросы.
  • Автоматическая трансформация данных: axios автоматически преобразует данные JSON, что упрощает работу с API, которые возвращают данные в этом формате.
  • Поддержка промисов: axios возвращает промисы, что упрощает работу с асинхронным кодом и позволяет использовать async/await.
  • Интерсепторы: Можно добавлять интерсепторы для обработки запросов и ответов, что позволяет, например, автоматически добавлять токены аутентификации.
  • Отмена запросов: Поддерживает отмену запросов с использованием CancelToken.

Чтобы получить список персонажей, нам необходимо сделать запрос на следующий endpoint

tsx
https://rickandmortyapi.com/api/character

...

Для доступа к полной версии конспекта оформите подписку на курс