🔥 Отправляем 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?
Делитесь своими лайфхаками в комментариях!
