Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 49 из 114 · 12 мин
fetch, Response, res.ok, res.json(), отправка POST с JSON и заголовками.
Список товаров лежит на сервере и меняется каждый день. Как подтянуть его на страницу?
Для этого fetch: попроси данные по адресу и дождись ответа. В курсе у меня есть учебный сервер: /api/products, /api/users и /api/todos.
fetch()fetch(url) возвращает промис ответа (Response).const res = await fetch("/api/products");
console.log(res.status, res.ok);res.json()const res = await fetch("/api/products");
const products = await res.json();
console.log(products.length, products[0].title);res.oktrue для статусов 200–299. fetch не падает на 404 — проверяй ok сам.const res = await fetch("/api/products/99");
console.log(res.ok, res.status);fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }).const res = await fetch("/api/todos", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title: "Выучить fetch" })
});
console.log(await res.json());fetch считает 404 и 500 успехом доставки. Всегда проверяй res.ok.
Загрузи /api/products, сохрани массив в products и выведи названия (title) в #list пунктами <li>.
fetch — пока нетНапиши async function addTodo(title): POST на /api/todos с JSON { title }; верни объект из ответа.
Выберите один ответ.
Что сделает fetch при ответе 404?
Выберите один ответ.
Как получить данные из ответа в JSON?
Проверяем состояние обучения…