Чтобы тренироваться, не нужен свой бэкенд. В интернете много публичных API без регистрации и токенов: открыл документацию, скопировал URL, дёрнул fetch. Вот пять самых полезных для отработки разных задач.

JSONPlaceholder — имитация полного CRUD

Адрес: jsonplaceholder.typicode.com

Чем хорош: умеет все пять методов (GET, POST, PUT, PATCH, DELETE). Поддерживает ресурсы /posts, /users, /comments, /albums, /photos, /todos.

Важная особенность: POST/PUT/PATCH/DELETE притворяются, что работают. Сервер вернёт 200 или 201 с правильно сформированным ответом, но фактически данные не сохраняются. Если вы только что «создали» пост с id=101, и тут же запросите /posts/101 — придёт 404. Это сделано специально, чтобы не дать тысячам учеников засорять реальную БД.

Для тренировки идеально: видно весь цикл запроса и ответа, но без последствий. На JSONPlaceholder будет построен мини-проект в модуле 9.

dog.ceo — рандомные картинки собак

Адрес: dog.ceo/dog-api

Только GET-запросы. Зато API очень простой и забавный:

GET https://dog.ceo/api/breeds/image/random
→ {"message": "https://images.dog.ceo/breeds/.../n02085620_1452.jpg", "status": "success"}

GET https://dog.ceo/api/breeds/list/all
→ {"message": {"affenpinscher": [], "labrador": [], ...}, "status": "success"}

Хорош, когда хочется простую визуальную задачу: вывести случайную картинку и кнопку «следующая». Без регистрации, без токена, без рейт-лимита (по крайней мере, для нормального учебного объёма).

PokeAPI — большой каталог покемонов

Адрес: pokeapi.co

Только GET. Зато данных огромное количество: 1000+ покемонов, у каждого имя, типы, атаки, картинки, эволюции, способности. Поддерживает пагинацию, поиск по имени.

GET https://pokeapi.co/api/v2/pokemon?limit=20&offset=0
GET https://pokeapi.co/api/v2/pokemon/pikachu

Хорош для тренировки пагинации, поиска, отрисовки сложных карточек с большим количеством полей. На PokeAPI часто пишут учебные «Pokedex»-приложения.

REST Countries — справочник стран

Адрес: restcountries.com

Только GET. Даёт информацию о любой стране: население, столица, валюта, языки, флаг, границы с соседями.

GET https://restcountries.com/v3.1/name/germany
GET https://restcountries.com/v3.1/all?fields=name,capital,population

Поддерживает поиск по имени, по коду, по валюте, фильтрацию полей через ?fields=.... Хорош, когда тренируете тему «найти данные по запросу пользователя».

Open-Meteo — прогноз погоды

Адрес: open-meteo.com

Без регистрации, без токена. Принимает координаты, отдаёт погоду:

GET https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&current_weather=true

Хорош для практики работы с query-параметрами и для проекта «виджет погоды».

Несколько советов

  • Читайте документацию сначала. У каждого API своя схема URL, свои параметры, свои особенности. Без чтения документации тыкаться вслепую неэффективно.
  • Сначала проверьте URL в браузере. Для GET-запросов достаточно вставить URL в адресную строку — ответ откроется как JSON-страница. Это быстрее, чем писать fetch ради проверки.
  • Следите за лимитами. Бесплатные API часто имеют ограничения по числу запросов в минуту/час. Если в ответ начали приходить 429 — делайте паузу.
  • Не используйте публичные API в проде. Они могут отвалиться, замедлиться, изменить контракт без предупреждения. Для пет-проектов и обучения — отлично; для реальной работы нужен свой бэкенд или платный API с SLA.

Маленькое домашнее задание

До перехода в модуль 5 попробуйте сами:

  1. Открыть один из этих API в браузере. Посмотреть на сырой JSON.
  2. Скопировать URL, отправить запрос через fetch в консоли.
  3. Распарсить ответ через .json().
  4. Вытащить какое-то поле и вывести в console.log.

На этом первое практическое знакомство закончено. В следующем модуле учимся отправлять данные на сервер: query-параметры, POST с телом, заголовки, частичные обновления, кэширование.