Привет! 👋 Давай сегодня разберёмся, как сделать первые запросы к API на JavaScript. Это суперполезный навык: ты сможешь получать данные с любых сервисов, отправлять их и автоматизировать задачи. 🚀
Обещаю — всё будет максимально просто и дружелюбно.
⚙ Что понадобится
- 🌐 Любой современный браузер (Chrome, Firefox, Edge — подойдёт любой).
- 📝 Текстовый редактор: VS Code, Sublime Text или даже обычный блокнот.
- 🔑 URL API (например, вебхук из Битрикс24 или открытое API вроде JSONPlaceholder).
💡 Для примера можно использовать бесплатный тестовый API:
Он возвращает список фейковых пользователей — идеально для тренировки.
🧩 Шаг 1. Создаём файл
Создай файл api-test.html и вставь минимальную HTML-разметку:
Теперь рядом создаём файл script.js, где будет весь наш код.
🛠 Шаг 2. Первый запрос с fetch()
fetch() — это современный способ отправить запрос к API.
В script.js напиши:
🔍 Что происходит:
- fetch отправляет GET-запрос по указанному URL.
- response.json() превращает ответ в JavaScript-объект.
- console.log выводит данные в консоль, а заодно мы показываем их на странице в <div id="output">.
Открой api-test.html в браузере и увидишь аккуратный JSON прямо на экране. 🎉
⚡ Async/Await — современный стиль
Хочешь, чтобы код выглядел ещё круче? Используй async/await:
✨ Такой код читается легче — почти как обычный текст.
📨 POST-запрос — отправляем данные
Иногда нужно не только получать данные, но и отправлять их на сервер.
Пример POST-запроса:
🔑 Здесь мы:
- Указываем method: 'POST'.
- Передаём данные в body в формате JSON.
- Получаем ответ с данными созданного ресурса.
🧠 Полезные советы
- 🕵️♂️ Всегда проверяй API-документацию — там есть нужные параметры и примеры.
- 🔒 Если работаешь с приватными ключами, храни их в .env или на бэкенде.
- 🧹 Для отладки удобно использовать Postman или вкладку Network в DevTools.
🎯 Итог
Теперь ты умеешь:
- 📡 Делать GET и POST-запросы в JavaScript.
- 📂 Обрабатывать ответы API и выводить данные на страницу.
- 💪 Работать с современными инструментами (fetch, async/await).
🚀 С этим багажом можно интегрировать внешние сервисы, строить дашборды или создавать собственные веб-приложения.
Главное — не бояться пробовать и экспериментировать! 🙌