🔥 Отправляем API-запросы прямо из браузера! Анатолий Карпович


Хотели когда-нибудь протестировать API без Postman или кода в VS Code? Можно делать это прямо в DevTools браузера!

Как? Используем JavaScript + fetch + top-level await

Что нужно?
▪️Открываем любой сайт, например https://example.com/
▪️Открываем DevTools (F12 → Console)
▪️Пишем запрос → Enter
▪️Получаем данные прямо в консоли!

Протестируем на живом API: https://jsonplaceholder.typicode.com/todos/

🚀 GET-запрос (получаем список задач)
Простая проверка, что API работает:

const response = await fetch("https://lnkd.in/dhc_shVn");
const data = await response.json();
console.log(data);

Что происходит?
▪️fetch(url) – отправляем HTTP-запрос
▪️.json() – превращаем ответ в объект
▪️await – ждём результат прямо в консоли
▪️Вывод: получаем список задач в JSON-формате!

🚀 GET-запрос по ID (получаем одну задачу)
Допустим, хотим посмотреть задачу с ID 1:

const response = await fetch("https://lnkd.in/dHejaYU8");
const data = await response.json();
console.log(data);

Вывод: в консоли будет задача { id: 1, title: "delectus aut autem", completed: false }

🚀 POST-запрос (создаём новую задачу)

Отправляем новую задачу в API:

const response = await fetch("https://lnkd.in/dppsY97m", {
 method: "POST",
 headers: {
 "Content-Type": "application/json"
 },
 body: JSON.stringify({
 title: "Моя новая задача",
 completed: false,
 userId: 1
 })
});

const result = await response.json();
console.log("Создана задача:", result);

Что тут происходит?
▪️method: "POST" – создаём новую задачу
▪️headers – говорим API, что отправляем JSON
▪️body: JSON.stringify({...}) – превращаем объект в JSON
Вывод: API вернёт новую задачу с ID!

🚀 PUT-запрос (обновляем задачу)

Изменяем задачу с ID 1, отмечая её как выполненную:

const response = await fetch("https://lnkd.in/dHejaYU8", {
 method: "PUT",
 headers: {
 "Content-Type": "application/json"
 },
 body: JSON.stringify({
 title: "Задача обновлена!",
 completed: true,
 userId: 1
 })
});

const result = await response.json();
console.log("Обновлённая задача:", result);

Здесь:
▪️method: "PUT" – обновляем данные
▪️Передаём ID в URL (/todos/1)
Вывод: API вернёт обновлённую задачу!

🚀 DELETE-запрос (удаляем задачу)
Удаляем задачу с ID 1:

await fetch("https://lnkd.in/dHejaYU8", { method: "DELETE" });
console.log("Задача удалена!");

Просто и быстро:
✔️ method: "DELETE" – удаляем ресурс
✔️ Никаких body – просто передаём ID в URL
Вывод: API ответит 200 OK (успешное удаление).

А вы используете DevTools для работы с API?
Делитесь своими лайфхаками в комментариях!