fetch ва HTTP

01 HTTP: браузер бо сервер чӣ тавр гап мезанад

Муштарӣ (клиент) — ин браузери шумост (ё коди шумо дар он). Сервер — компютере, ки маълумот дар он ҷойгир аст. Онҳо мувофиқи қоидаҳои протоколи HTTP муошират мекунанд: клиент дархост (request) мефиристад, сервер ҷавоб (response) бармегардонад. Ҳамеша ба навбат: сервер худаш аввал навиштанро оғоз намекунад.

Суроға аз чӣ иборат аст

Суроғаи захира URL номида мешавад. Он якчанд қисм дорад ва браузер онҳоро бо ёрии синфи дарунсохти URL таҷзия карда метавонад.

const url = new URL("https://jsonplaceholder.typicode.com/todos?userId=1&_limit=3");

console.log(url.protocol);               // https:
console.log(url.hostname);               // jsonplaceholder.typicode.com
console.log(url.pathname);               // /todos
console.log(url.searchParams.get("userId"));   // 1  (ҳамеша сатр!)

Дархост ва ҷавоб

Дархост аз чор қисм, ҷавоб аз се қисм иборат аст. Ин схемаро дар хотир доред: вай барои фаҳмидани ҳама гуна ҳуҷҷатгузории API лозим аст.

Усулҳо: феъли дархост

Усул ба сервер мегӯяд, ки мо чиро иҷро кардан мехоҳем. Барои кор бо маълумот панҷ усули асосӣ ҳаст. Суроғаи онҳо метавонад якхела бошад — фақат феъл фарқ мекунад.

Агар усул нишон дода нашавад, браузер GET-ро истифода мебарад. Имрӯз мо қариб ҳама вақт маълумот мегирем, ба усулҳои дигар дар қисми 05 мерасем.

Рамзҳои статус: рақаме, ки сервер аввал мегӯяд

Рақами аввали рамз — ин гурӯҳ аст. Агар гурӯҳҳоро дар хотир доред, 90%-и рамзҳоро бе маълумотнома мефаҳмед.

Сарлавҳаҳо: ёддоштҳои хидматӣ

Content-Type

Бадан кадом навъ аст. Барои JSON ин application/json аст. Ҳам дар дархост (чиро мефиристем), ҳам дар ҷавоб (чиро гирифтем) мешавад.

Accept

Дар дархост: «ман кадом формати ҷавобро мефаҳмам».

Authorization

Дар дархост: калид ё токен, ки тасдиқ мекунад шумо кистед. Бе он API-ҳои пӯшида бо 401 ҷавоб медиҳанд. Дар ин дарс он лозим нест — мо API-ҳои кушодаро мегирем.

JSON: забоне, ки API-ҳо бо он гап мезананд

Маълумот тавассути шабака ҳамчун матн мегузарад. Объектҳо ва массивҳоро ба матни формати JSON табдил медиҳанд ва баръакс: JSON.stringify(объект) → сатр, JSON.parse(сатр) → объект. Қоидаҳо аз JS сахттаранд: калидҳо ва сатрҳо танҳо дар нохунакҳои дукарата, бе шарҳҳо ва бе вергул дар охир.

const student = { name: "Мадина", age: 17, courses: ["JS", "CSS"] };

const text = JSON.stringify(student);
console.log(text);                  // ин сатр аст
console.log(typeof text);

const back = JSON.parse(text);
console.log(back.name, back.courses.length);

const text = "{ name: 'Мадина' }";    // ✖ калид бе нохунак, сатр дар нохунакҳои яккарата

const student = JSON.parse(text);
console.log(student.name);

Муфассалтар хонед: learn.javascript.ru — Формати JSON · MDN — Шарҳи HTTP · MDN — Рамзҳои ҷавоби HTTP

const url = new URL("https://shop.example.tj/catalog/shoes?category=kids&page=2");

// url.hostname, url.pathname ва параметри category-ро чоп кунед

shop.example.tj
/catalog/shoes
kids

function describeStatus(code) {
  // коди шумо
}

for (const code of [200, 201, 301, 404, 500, 99]) {
  console.log(code + ": " + describeStatus(code));
}

200: успех
201: успех
301: перенаправление
404: ошибка клиента
500: ошибка сервера
99: неизвестно

const text = "{ name: 'Мадина', age: 17, active: true, }";

const student = JSON.parse(text);
console.log(student.name + " " + student.age);

Мадина 17

function buildUrl(base, params) {
  // коди шумо
}

console.log(buildUrl("https://api.example.tj/products", { q: "плов", page: 2, limit: 10 }));
console.log(buildUrl("https://api.example.tj/products", {}));

https://api.example.tj/products?q=%D0%BF%D0%BB%D0%BE%D0%B2&page=2&limit=10
https://api.example.tj/products

02 fetch: дархости аввалин

fetch(url) — функсияи дарунсохти браузер барои дархостҳои HTTP. Ягон чизро пайваст кардан лозим нест. Вай промис бармегардонад (дарси 13), барои ҳамин бо он тавассути then ё, қулайтар, тавассути async / await кор мекунанд. Мекӯшем як вазифаро аз сервери таълимии jsonplaceholder гирем — вай махсус барои машқ кардан сохта шудааст:

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const todo = await response.json();

  console.log(todo.title);
  console.log("выполнена?", todo.completed);
}

main();

Сатрҳо кам аст, аммо дар ин ҷо ду await ҳаст ва ин тасодуф нест. Биёед фаҳмем, барои чӣ.

1. fetch(url) дархостро мефиристад. Промис ҳамин ки оғози ҷавоб — статус ва сарлавҳаҳо — расад, иҷро мешавад.
2. await ба мо объекти response-ро медиҳад — ин «лифофа» аст: дар он статус ва сарлавҳаҳо ҳастанд, бадан бошад ҳанӯз дар роҳи шабака буда метавонад.
3. response.json() баданро то охир мехонад ва матни JSON-ро ба объект табдил медиҳад. Ин ҳам промис аст — барои ҳамин await-и дуюм.

Дар response чӣ ҳаст

response.status

Рақам — рамзи статус: 200, 404, 500…

response.ok

true, агар статус аз 200 то 299 бошад. Судмандтарин санҷиш — ба он дар қисми 04 бармегардем.

response.headers

Сарлавҳаҳои ҷавоб. Бо усули get хонда мешаванд: response.headers.get("content-type").

response.json()

Баданро ҳамчун JSON хондан → объект ё массив мегирем.

response.text()

Баданро ҳамчун матни оддӣ хондан (қулай аст, агар на JSON омада бошад).

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");

  console.log("статус:", response.status);
  console.log("ok:", response.ok);
  console.log("тип данных:", response.headers.get("content-type"));
}

main();

Ҳамин чиз тавассути then

Варианти бе async / await низ дар кодҳои бегона вомехӯрад — шумо бояд онро шиносед. Маъно ҳамон аст, фақат дохилшавӣ дигар аст:

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => response.json())
  .then((todo) => {
    console.log("Задача:", todo.title);
  });

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const todo = response.json();     // ✖ await-ро фаромӯш кардем — ин промис аст, на объект

  console.log(todo.title);          // undefined
}

main();

Муфассалтар хонед: learn.javascript.ru — Fetch · MDN — Истифодаи Fetch

async function main() {
  // дархост, response.json(), чоп
}

main();

1
1

async function main() {
  // fetch, баъд се сатри чоп
}

main();

200
true
true

const actual = [];
const log = (label) => actual.push(label);

async function main() {
  log("A");
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  log("B");
  await response.json();
  log("C");
}

main();
log("D");

const prediction = [];   // пешгӯии шумо: тартиби нишонаҳо

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 3000);

Верно!

const API = "https://jsonplaceholder.typicode.com";

async function main() {
  // 1) вазифаи 1-ро бор кунед
  // 2) корбарро аз рӯи todo.userId бор кунед
  // 3) сатрро чоп кунед
}

main();

Задача «delectus aut autem» у Leanne Graham

03 Бадани ҷавоб: json(), text() ва параметрҳои дархост

Серверҳо маълумотро дар ду намуд медиҳанд: як объект (/users/1) ва рӯйхат (/users — массив). Баъд аз response.json() шумо объектҳо ва массивҳои оддии JavaScript мегиред ва бо онҳо шумо аллакай кор карда метавонед: map, filter, деструктуризатсия, ?..

const API = "https://jsonplaceholder.typicode.com";

async function main() {
  const response = await fetch(API + "/users");
  const users = await response.json();

  console.log("Пользователей:", users.length);

  const names = users.slice(0, 3).map((user) => user.name);
  console.log(names.join(", "));
}

main();

Маълумоти дохилшуда

Ҷавобҳои воқеӣ қариб ҳамеша дохилшуда мебошанд: корбар суроға дорад, суроға — шаҳр. Деструктуризатсия аз дарси 7 дар ин ҷо хеле бамаврид аст:

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const { name, email, address: { city } } = await response.json();

  console.log(`${name}, ${city}, ${email}`);
}

main();

Параметрҳои дархост: танҳо лозимаро металабем

Ҳамаро пайдарпай зеркашӣ кардан — исрофкорӣ аст. Аксари API-ҳо параметрҳоро баъд аз аломати ? мефаҳманд: филтрҳо, маҳдудиятҳо, ҷустуҷӯ. Дар jsonplaceholder, масалан, ?_limit=3 танҳо се сабтро бармегардонад, ?userId=2 бошад — танҳо сабтҳои корбари дуюмро.

async function main() {
  const url = "https://jsonplaceholder.typicode.com/todos?userId=2&_limit=3";
  const todos = await (await fetch(url)).json();

  console.log("Получили:", todos.length);
  console.log("Все от пользователя 2:", todos.every((t) => t.userId === 2));
}

main();

Сатри await (await fetch(url)).json() — навишти фушурдаи ду қадам аст. Душвортар хонда мешавад, барои ҳамин ҳоло беҳтар аст қадам ба қадам нависед.

json() ё text()?

json() дар вуруд JSON-и дурустро интизор аст. Агар сервер саҳифаи HTML бо хато ё ҷавоби холӣ фиристад, json() SyntaxError мепартояд. text() бошад ҳамеша матн бармегардонад — онро нишон додан ё ба лог навиштан мумкин аст. Барои машқ кардан бе интернет мо «ҷавоби қалбакӣ» сохта метавонем: конструктори new Response(матн) айнан ҳамон объектеро месозад, ки аз сервери воқеӣ меояд.

async function main() {
  const response = new Response(JSON.stringify({ city: "Душанбе", temp: 21 }));

  const data = await response.json();
  console.log(data.city + ": " + data.temp);
}

main();

async function main() {
  const response = new Response(JSON.stringify({ city: "Душанбе" }));

  const text = await response.text();   // бадан хонда шуд
  const data = await response.json();   // ✖ бори дуюм мехонем

  console.log(text, data);
}

main();

Муфассалтар хонед: learn.javascript.ru — Fetch: хондани ҷавоб · MDN — Response.json()

async function main() {
  // дархост, json(), давра бо рақамҳо
}

main();

1. delectus aut autem
2. quis ut nam facilis et officia qui
3. fugiat veniam minus

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  // деструктуризатсия ва чоп
}

main();

Leanne Graham — Gwenborough (Bret)

async function main() {
  // дархост бо параметри userId=1
  // ҳамагӣ ва иҷрошуда
}

main();

Всего: 20
Выполнено: 11

async function main() {
  const response = new Response(JSON.stringify({ city: "Душанбе", temp: 21 }));

  const raw = await response.text();
  console.log("Длина текста:", raw.length);

  const data = await response.json();
  console.log(data.city + ": " + data.temp + "°C");
}

main();

Длина текста: 28
Душанбе: 21°C

04 Хатоҳо: 404 — хатои fetch нест

Ин барои навомӯзон ғайричашмдоштарин ҷост. Дархост метавонад ду навъи комилан гуногуни ноком дошта бошад — ва fetch ба онҳо гуногун муносибат мекунад.

Бинед: дархости вазифаи вуҷуднадошта хато напартофт. catch хомӯш аст, ok бошад ба false баробар аст.

async function main() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/99999");
    console.log("запрос дошёл до сервера");
    console.log("статус:", response.status, "ok:", response.ok);
  } catch (error) {
    console.log("сюда мы не попадём");
  }
}

main();

Схемаи дуруст: ok-ро месанҷем ва хаторо худамон мепартоем

Барои он ки ҳарду ноком дар як ҷой коркард шаванд, «статуси бад»-ро ба хатои ҳақиқӣ табдил медиҳем:

async function loadTodo(id) {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/" + id);

  if (!response.ok) {
    throw new Error("HTTP " + response.status);   // 404 → хатои ҳақиқӣ
  }
  return response.json();
}

async function main() {
  for (const id of [1, 99999]) {
    try {
      const todo = await loadTodo(id);
      console.log("Нашли:", todo.title);
    } catch (error) {
      console.log("Ошибка:", error.message);
    }
  }
}

main();

Хатои шабакавӣ: сервер умуман нест

Вақте дархост ба сервер расида натавонист, fetch промисро рад мекунад ва catch хатои навъи TypeError мегирад. Барои тақлид кардани ин суроғаеро мегирем, ки яқинан вуҷуд надорад (минтақаи .invalid барои суроғаҳои «вуҷуднадошта» ҷудо карда шудааст):

async function main() {
  try {
    await fetch("https://no-such-server.invalid/data");
    console.log("не дойдём досюда");
  } catch (error) {
    console.log("Сеть недоступна. Тип ошибки:", error.name);
  }
}

main();

Матни худи хато дар браузерҳои гуногун фарқ мекунад (дар Chrome — Failed to fetch, дар Safari — Load failed), барои ҳамин ба error.message такя кардан мумкин нест. Боэътимодтар аст ба error.name нигаред ё оддӣ ба корбар матни фаҳмои худатонро нишон диҳед.

Вақте бадан JSON нест

Нохушии сеюм: сервер ҷавоб дод, аммо дар бадан JSON нест (масалан, саҳифаи HTML «Хидмат муваққатан дастнорас аст»). Он гоҳ response.json() SyntaxError мепартояд. Дар ҷавоби қалбакӣ месанҷем:

async function main() {
  const response = new Response("<html>Сервис временно недоступен</html>", { status: 503 });

  try {
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Не удалось разобрать JSON. Тип ошибки:", error.name);
  }
}

main();

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/99999");
  const todo = await response.json();      // ✖ статус 404, аммо хато нест

  console.log("Название задачи:", todo.title);   // undefined
}

main();

finally: «Боркунӣ…»-ро дар ҳар натиҷа нест мекунем

Блоки finally ҳам баъд аз муваффақият, ҳам баъд аз хато иҷро мешавад. Ин ҷои беҳтарин барои пинҳон кардани нишондиҳандаи боркунӣ ё аз нав фаъол кардани тугма аст (мо инро дар дарси 13 мекардем).

Муфассалтар хонед: learn.javascript.ru — Fetch: response.ok · MDN — Response.ok · MDN — CORS

async function main() {
  // fetch ва як сатри чоп
}

main();

404 false

async function loadTodo(id) {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/" + id);
  // санҷиши ok ва баргардонидани маълумот
}

async function main() {
  for (const id of [1, 99999]) {
    try {
      const todo = await loadTodo(id);
      console.log(todo.title);
    } catch (error) {
      console.log("Ошибка: " + error.message);
    }
  }
}

main();

delectus aut autem
Ошибка: HTTP 404

async function main() {
  // try / catch дар атрофи fetch
}

main();

Сеть недоступна: TypeError

async function readData(response) {
  // коди шумо
}

async function main() {
  const answers = [
    new Response(JSON.stringify({ city: "Худжанд" })),
    new Response("{}", { status: 404 }),
    new Response("<html>Привет</html>"),
    new Response("Сервис недоступен", { status: 503 }),
  ];

  for (const response of answers) {
    const result = await readData(response);
    console.log(typeof result === "string" ? result : result.city);
  }
}

main();

Худжанд
Ошибка сервера: 404
Ответ не JSON
Ошибка сервера: 503

async function loadTodo(id) {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/" + id);
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  return response.json();
}

async function main() {
  for (const id of [1, 99999, 2]) {
    // try / catch / finally
  }
}

main();

Загружаем #1
delectus aut autem
— готово
Загружаем #99999
Ошибка: HTTP 404
— готово
Загружаем #2
quis ut nam facilis et officia qui
— готово

05 POST, PUT, DELETE: маълумот мефиристем

Барои сохтан ё тағйир додани сабт, аргументи дуюми fetch — объекти танзимот аст. Дар он се калиди асосӣ ҳаст: method, headers ва body.

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title: "Мой первый пост", body: "Салом, мир!", userId: 1 }),
  });

  const created = await response.json();

  console.log("статус:", response.status);   // 201 — Created
  console.log("id:", created.id);            // сервер рақам дод
  console.log("заголовок:", created.title);  // ва он чиро, ки фиристодем, баргардонд
}

main();

1. method: "POST" — ба сервер хабар медиҳем, ки мехоҳем сабт созем.
2. Content-Type: application/json — огоҳ мекунем: «дар бадан JSON ҳаст». Бе ин сервер баданро нафаҳмидан метавонад.
3. JSON.stringify(...) — бадани дархост бояд сатр бошад, объектро бевосита фиристодан мумкин нест.
4. Дар ҷавоб сервер 201 Created ва сабти сохташударо — бо id-и нав — бармегардонад.

PUT, PATCH ва DELETE

Ҳамон танзимот, усули дигар. Суроға акнун ба сабти мушаххас ишора мекунад: /posts/1.

const API = "https://jsonplaceholder.typicode.com";
const json = { "Content-Type": "application/json" };

async function main() {
  // PUT — сабтро пурра иваз кардан
  let response = await fetch(API + "/posts/1", {
    method: "PUT",
    headers: json,
    body: JSON.stringify({ title: "Новый заголовок", body: "новый текст", userId: 1 }),
  });
  console.log("PUT:", response.status, (await response.json()).title);

  // PATCH — танҳо як майдонро тағйир додан
  response = await fetch(API + "/posts/1", {
    method: "PATCH",
    headers: json,
    body: JSON.stringify({ title: "Только заголовок" }),
  });
  console.log("PATCH:", response.status, (await response.json()).title);

  // DELETE — нест кардан, бадан лозим нест
  response = await fetch(API + "/posts/1", { method: "DELETE" });
  console.log("DELETE:", response.status);
}

main();

const data = { title: "Салом" };

console.log("без stringify:", String(data));         // ✖ маълумотро гум кардем
console.log("со stringify:", JSON.stringify(data));  // ✔ JSON-и дуруст

Муфассалтар хонед: learn.javascript.ru — Fetch: дархостҳои POST · MDN — Усулҳои HTTP

async function main() {
  // fetch бо method, headers ва body
}

main();

Статус: 201
id: 101

function makeOptions(method, data) {
  // коди шумо
}

console.log(JSON.stringify(makeOptions("POST", { title: "Салом" })));
console.log(JSON.stringify(makeOptions("PUT", { id: 7 })));

{"method":"POST","headers":{"Content-Type":"application/json"},"body":"{\"title\":\"Салом\"}"}
{"method":"PUT","headers":{"Content-Type":"application/json"},"body":"{\"id\":7}"}

async function main() {
  // дархости PUT
}

main();

200
Новый заголовок
1

async function main() {
  // дархости DELETE
}

main();

200
true

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    body: { title: "Салом", body: "Первый пост", userId: 1 },
  });

  const created = await response.json();
  console.log(response.status);
  console.log(created.title);
}

main();

201
Салом

06 Печонандаи худии api.js-ро месозем

Бинед, мо аллакай чанд кодҳои такроршаванда навиштем: суроғаи сервер, санҷиши ok, сарлавҳаҳо, JSON.stringify, response.json(). Дар лоиҳаи калон дархостҳо даҳҳо мебошанд. Роҳи ҳал — як функсияи печонанда, ки ҳамаи инро ба ҷои шумо иҷро мекунад. Ин аст артефакти дарси шумо: файли api.js. Онро қадам ба қадам месозем ва дар ҳар қадам код кор мекунад.

Қадами 1. Як функсия ба ҷои нусхабардорӣ

Суроғаи серверро ба константа мебарем ва ҷамъ кардани суроғаи пурраро аз роҳ меомӯзем.

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path) {
  const response = await fetch(BASE_URL + path);
  return response.json();
}

async function main() {
  const todo = await request("/todos/1");
  console.log(todo.title);
}

main();

Қадами 2. Санҷиши ok ва хато бо статус

Асосиро илова мекунем: статуси бад ба хато табдил меёбад. Ҳамзамон рамзи статусро рост ба хато мегузорем — барои коди даъваткунанда он судманд аст (масалан, ба ҷои «Хато» «Ёфт нашуд»-ро нишон додан).

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path) {
  const response = await fetch(BASE_URL + path);

  if (!response.ok) {
    const error = new Error("HTTP " + response.status);
    error.status = response.status;      // рамзро ба хато ба ёд мемонем
    throw error;
  }
  return response.json();
}

async function main() {
  try {
    await request("/todos/99999");
  } catch (error) {
    console.log(error.message, "| статус в ошибке:", error.status);
  }
}

main();

Қадами 3. Дастгирии POST ва усулҳои дигар

Аргументи дуюми options-ро қабул мекунем. Агар body дода шавад — худамон JSON.stringify мекунем ва сарлавҳаро мегузорем. Акнун бадан ҳамеша дуруст фиристода мешавад.

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path, { method = "GET", body } = {}) {
  const options = { method, headers: {} };

  if (body !== undefined) {
    options.headers["Content-Type"] = "application/json";
    options.body = JSON.stringify(body);
  }

  const response = await fetch(BASE_URL + path, options);

  if (!response.ok) {
    const error = new Error("HTTP " + response.status);
    error.status = response.status;
    throw error;
  }
  return response.json();
}

async function main() {
  const post = await request("/posts", { method: "POST", body: { title: "Салом", userId: 1 } });
  console.log("создан пост номер", post.id);
}

main();

Навишти { method = "GET", body } = {} — ин деструктуризатсияи параметр бо қиматҳои пешфарз аст (дарси 7). Ба шарофати = {} функсияро бе аргументи дуюм ҳам даъват кардан мумкин аст.

Қадами 4. Таймаут: абадӣ интизор намешавем

Агар сервер овезон шавад, корбар то беохир ба «Боркунӣ…» менигарад. Барои ҳамин маҳдудияти вақтро илова мекунем. Барои ин fetch «тугмаи бекор кардан» дорад — AbortController: controller.abort()-ро даъват мекунем ва дархост бо хатои AbortError қатъ мешавад.

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path, { method = "GET", body, timeout = 8000 } = {}) {
  const options = { method, headers: {} };

  if (body !== undefined) {
    options.headers["Content-Type"] = "application/json";
    options.body = JSON.stringify(body);
  }

  const controller = new AbortController();
  options.signal = controller.signal;
  const timer = setTimeout(() => controller.abort(), timeout);   // баъд аз timeout мс — бекор кардан

  try {
    const response = await fetch(BASE_URL + path, options);

    if (!response.ok) {
      const error = new Error("HTTP " + response.status);
      error.status = response.status;
      throw error;
    }
    return await response.json();
  } catch (error) {
    if (error.name === "AbortError") {
      throw new Error("сервер не ответил за " + timeout + " мс");
    }
    throw error;
  } finally {
    clearTimeout(timer);               // таймер акнун лозим нест
  }
}

async function main() {
  try {
    await request("/todos/1", { timeout: 1 });     // 1 мс — хеле кам
  } catch (error) {
    console.log("Ошибка:", error.message);
  }
}

main();

Қадами 5. Кӯтоҳнависиҳои қулай ва api.js-и ниҳоӣ

Боқӣ мемонад даъвати request-ро паси номҳои кӯтоҳ пинҳон кунем. Объекти api бо усулҳои get, post, put, del (калимаи delete дар JS банд аст) — ва код дар лоиҳа мисли ҷумла хонда мешавад. Параметрҳои дархостро бо объект қабул мекунем ва тавассути URLSearchParams ҷамъ мекунем.

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path, { method = "GET", body, timeout = 8000 } = {}) {
  const options = { method, headers: {} };

  if (body !== undefined) {
    options.headers["Content-Type"] = "application/json";
    options.body = JSON.stringify(body);
  }

  const controller = new AbortController();
  options.signal = controller.signal;
  const timer = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(BASE_URL + path, options);

    if (!response.ok) {
      const error = new Error("HTTP " + response.status);
      error.status = response.status;
      throw error;
    }
    return await response.json();
  } catch (error) {
    if (error.name === "AbortError") {
      throw new Error("сервер не ответил за " + timeout + " мс");
    }
    throw error;
  } finally {
    clearTimeout(timer);
  }
}

const api = {
  get(path, params) {
    const query = params ? "?" + new URLSearchParams(params) : "";
    return request(path + query);
  },
  post: (path, body) => request(path, { method: "POST", body }),
  put: (path, body) => request(path, { method: "PUT", body }),
  del: (path) => request(path, { method: "DELETE" }),
};

async function main() {
  const todos = await api.get("/todos", { userId: 2, _limit: 3 });
  console.log("задач:", todos.length);

  const post = await api.post("/posts", { title: "Салом", userId: 1 });
  console.log("создан пост:", post.id);

  try {
    await api.get("/todos/99999");
  } catch (error) {
    console.log("ошибка:", error.message, error.status);
  }
}

main();

Муфассалтар хонед: learn.javascript.ru — Fetch: қатъи дархост · MDN — AbortController

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path) {
  const response = await fetch(BASE_URL + path);
  // санҷиши ok — дар ин ҷо
  return response.json();
}

async function main() {
  const todo = await request("/todos/1");
  console.log(todo.title);

  try {
    await request("/todos/99999");
    console.log("ошибки не было");
  } catch (error) {
    console.log(error.message + ", код " + error.status);
  }
}

main();

delectus aut autem
HTTP 404, код 404

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path, { method = "GET", body } = {}) {
  const options = { method, headers: {} };
  if (body !== undefined) {
    options.headers["Content-Type"] = "application/json";
    options.body = JSON.stringify(body);
  }
  const response = await fetch(BASE_URL + path, options);
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  return response.json();
}

// const api = { get..., post... };

async function main() {
  const todo = await api.get("/todos/1");
  console.log(todo.title);

  const post = await api.post("/posts", { title: "Салом", userId: 1 });
  console.log("id нового поста:", post.id);
}

main();

delectus aut autem
id нового поста: 101

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path) {
  const response = await fetch(BASE_URL + path);
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  return response.json();
}

function get(path, params) {
  // суроғаро бо параметрҳо ҷамъ кунед ва request-ро даъват намоед
}

async function main() {
  const todos = await get("/todos", { userId: 2, _limit: 5 });
  console.log("задач:", todos.length);
  console.log("все от пользователя 2:", todos.every((t) => t.userId === 2));

  const one = await get("/todos/1");
  console.log(one.id);
}

main();

задач: 5
все от пользователя 2: true
1

const BASE_URL = "https://jsonplaceholder.typicode.com";

async function request(path, { timeout = 8000 } = {}) {
  // AbortController, таймер созед ва signal-ро ба fetch диҳед
  const response = await fetch(BASE_URL + path);
  return response.json();
}

async function main() {
  try {
    await request("/todos/1", { timeout: 1 });
    console.log("успели?!");
  } catch (error) {
    console.log(error.message);
  }

  const todo = await request("/todos/1");
  console.log(todo.title);
}

main();

Таймаут
delectus aut autem

07 Блоки ЗС: печонандаи fetch аз ЗС ва санҷиши он

Печонандаи fetch-ро ЗС тез ва зебо менависад. Аммо маҳз дар ин ҷо вай «роҳро кӯтоҳ кардан»-ро дӯст медорад: санҷиши response.ok-ро фаромӯш мекунад, ҷавоби бе JSON-ро дастгир намекунад ё фарқ намекунад, ки дар асл чӣ вайрон шуд. Барои ҳамин малакаи имрӯза — на «гирифтани код», балки санҷидани он дар ҷавобҳои бад: 404, 500, на-JSON ва шабакаи гумшуда.

Чӣ тавр пурсидан: бад ва хуб

Формулаи промпти курс: контекст → вазифа → маҳдудиятҳо → формати ҷавоб → санҷиш.

Баъд аз ҷавоби ЗС кодро аз рӯи чек-лист гузаронед. Агар ақаллан як банд «не» бошад — шумо хато ёфтед:

Дар сервери воқеӣ санҷидан нобароҳат аст: jsonplaceholder-ро аз рӯи фармоиш «афтондан» мумкин нест. Барои ҳамин касбиён серверро бо пойгоҳи озмоишӣ иваз мекунанд — функсияе, ки ҷавобҳои пешакӣ омодашударо медиҳад. Дар вазифаи поён маҳз чунин пойгоҳ ҳаст ва шумо бояд «печонандаи аз ЗС»-ро санҷед ва ислоҳ кунед.

// --- пойгоҳи озмоишӣ, тағйир надиҳед ---
function fakeFetch(scenario) {
  switch (scenario) {
    case "ok":       return Promise.resolve(new Response(JSON.stringify({ name: "Мадина" })));
    case "notfound": return Promise.resolve(new Response("{}", { status: 404 }));
    case "server":   return Promise.resolve(new Response("Internal Server Error", { status: 500 }));
    case "html":     return Promise.resolve(new Response("<html>Привет</html>"));
    case "network":  return Promise.reject(new TypeError("Failed to fetch"));
  }
}

// --- коди ЗС: ислоҳ кунед ---
async function aiRequest(scenario) {
  const response = await fakeFetch(scenario);
  const data = await response.json();
  return data;
}

// --- санҷиш, тағйир надиҳед ---
async function main() {
  for (const scenario of ["ok", "notfound", "server", "html", "network"]) {
    try {
      const data = await aiRequest(scenario);
      console.log(scenario + ": данные получены: " + data.name);
    } catch (error) {
      console.log(scenario + ": Ошибка: " + error.message);
    }
  }
}

main();

ok: данные получены: Мадина
notfound: Ошибка: HTTP 404
server: Ошибка: HTTP 500
html: Ошибка: ответ не JSON
network: Ошибка: сеть недоступна

// Промпти ман:
// ...

// Чӣ аз чек-лист нагузашт ва чӣ тавр ислоҳ кардам:
// ...

08 Амал дар дарс: дархости аввалин ба API ва чоп дар саҳифа

Акнун ҳамаро якҷоя ҷамъ мекунем: маълумотро аз API-и оммавӣ мегирем, ба консол мебарорем, баъд дар саҳифа мекашем. Қадам ба қадам меравем — баъд аз ҳар қадам код кор мекунад.

Қадами 1. Маълумот дар консол

Ҳамеша аз консол оғоз кунед: аввал боварӣ ҳосил кунед, ки маълумот меояд ва шакли онро мефаҳмед, ва танҳо баъд интерфейсро кашед.

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users?_limit=3");
  const users = await response.json();

  console.log("Получили:", users.length);
  users.forEach((user) => {
    console.log(user.name + " — " + user.address.city);
  });
}

main();

Қадами 2. Дар саҳифа мекашем

Маълумот аз fetch — ҳамон массивҳои объектҳост, ки дар дарсҳои 6–8. Пас онҳоро ба унсурҳо бо ҳамон усул табдил медиҳем: createElement ва append. «▶ Иҷро кардан»-ро пахш кунед ва ба рӯйхати тарафи рост нигаред.

<h3>Участники</h3>
<p id="status">Загрузка...</p>
<ul id="list"></ul>

body { font-family: system-ui, sans-serif; padding: 12px; }
h3 { margin: 0 0 8px; }
ul { padding-left: 20px; }
li { margin: 4px 0; }
.error { color: #c0392b; }

const status = document.querySelector("#status");
const list = document.querySelector("#list");

async function main() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users?_limit=5");
    if (!response.ok) {
      throw new Error("HTTP " + response.status);
    }
    const users = await response.json();

    users.forEach((user) => {
      const li = document.createElement("li");
      li.textContent = user.name + " (" + user.address.city + ")";
      list.append(li);
    });
    status.textContent = "Загружено: " + users.length;
  } catch (error) {
    status.className = "error";
    status.textContent = "Не получилось загрузить: " + error.message;
  }
  console.log(status.textContent);
}

main();

Ба сохтор диққат диҳед: «Боркунӣ…» → маълумот ё паёми хато. Корбар набояд ба саҳифаи холӣ нигариста, тахмин занад, ки чӣ мегузарад. Дар бораи чунин ҳолатҳо дар дарси 17 муфассал сӯҳбат мекунем.

<h3>Мои задачи</h3>
<ul id="todos"></ul>

body { font-family: system-ui, sans-serif; padding: 12px; }
li { list-style: none; margin: 4px 0; }

const list = document.querySelector("#todos");

async function main() {
  // 1) fetch https://jsonplaceholder.typicode.com/todos?_limit=5
  // 2) барои ҳар вазифа li созед: "✔ название" ё "○ название"
  // 3) console.log("Показано: " + list.children.length)-ро чоп кунед
}

main();

Показано: 5

<p id="status">Загрузка...</p>
<h3>Пользователи</h3>
<ul id="users"></ul>
<h3>Товары</h3>
<ul id="products"></ul>

body { font-family: system-ui, sans-serif; padding: 12px; }
h3 { margin: 12px 0 4px; }
.error { color: #c0392b; }

const status = document.querySelector("#status");
const usersList = document.querySelector("#users");
const productsList = document.querySelector("#products");

async function load(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  return response.json();
}

async function main() {
  try {
    // const [users, productsData] = await Promise.all([ ... ]);
    // ҳарду рӯйхатро кашед: li "Имя" ва li "Название — 9.99 $"
    // status.textContent = "";
    // console.log(`Пользователей: ${...}, товаров: ${...}`);
  } catch (error) {
    status.className = "error";
    status.textContent = "Ошибка: " + error.message;
  }
}

main();

Пользователей: 3, товаров: 3

09 Вазифаи хонагӣ

Маълумотро аз ду API-и гуногун гирифтан ва дар саҳифа кашидан. Артефакт — файли api.js: печонандаи худии шумо болои fetch, ки ҳарду API тавассути он мераванд.

Чӣ кор кардан лозим

1. Ду API-и оммавиро бе калид ва бо CORS интихоб кунед (дар браузер санҷед, ки ҷавоб меояд): jsonplaceholder.typicode.com, dummyjson.com, api.open-meteo.com (обу ҳаво — координатаҳои Душанберо диҳед: latitude=38.56&longitude=68.77&current=temperature_2m), rickandmortyapi.com. Муҳим: серверҳо бояд гуногун бошанд.
2. api.js-ро нависед. Функсияи request бо санҷиши response.ok, хато бо status, таймаут ва кӯтоҳнависиҳои get / post. Суроғаи асосиро параметр кунед (як request барои ду сервер).
3. Маълумоти API-и аввалро бикашед — рӯйхат ё кортҳо (ақалан 5 унсур, ақалан 2 майдон дар ҳар кадом).
4. Маълумоти API-и дуюмро бикашед — формати дигар (масалан, ҷадвал, як блоки калон ё кортҳо бо расм).
5. Се ҳолат барои ҳар блок: «Боркунӣ…», маълумот, хатои фаҳмо. Хаторо санҷед: суроғаро ба нодуруст иваз кунед ва боварӣ ҳосил кунед, ки корбар паём мебинад, на холигӣ.
6. Як амали POST. Ягон шакл ё бо тугма маълумотро ба jsonplaceholder.typicode.com/posts фиристед ва ҷавоби серверро (id-и додашударо) дар саҳифа нишон диҳед.
7. Санҷиши ЗС. Агар ЗС-ро истифода бурда бошед — промпти худ ва рӯйхати сенарияҳои хатоиро, ки санҷидед (404, шабака, на JSON), замима кунед.

Чӣ супоридан лозим

• Истинод ба репозиторий дар GitHub: index.html, api.js, app.js, style.css.
• Ду скриншот: саҳифа бо маълумот ва саҳифа бо ҳолати хато.
• README-и кӯтоҳ: кадом ду API-ро интихоб кардед ва онҳо чӣ тавр фарқ мекунанд.

Чӣ тавр баҳо медиҳем (0–10)