JavaScript fetch bilan API'dan ma'lumot olish

Zamonaviy sahifa ma’lumotni serverdan sahifani yangilamasdan oladi: mahsulotlar ro’yxati, ob-havo, izohlar. Buni fetch bajaradi.

Birinchi so’rov

JavaScript

async function ol() {
const javob = await fetch("https://api.github.com/repos/microsoft/vscode");
const malumot = await javob.json();

console.log(malumot.name);
console.log(malumot.stargazers_count);
}

ol();

Ikki qadam bor va ikkalasi ham await talab qiladi:

fetch(...) — so’rov yuboradi, javob sarlavhalari kelganda tugaydi;
javob.json() — javob tanasini o’qib, JavaScript obyektiga o’giradi.

Status tekshirish — muhim tuzoq

JavaScript

async function ol() {
const javob = await fetch("https://api.github.com/repos/yoq/yoq-12345");

console.log("ok:", javob.ok);
console.log("status:", javob.status);
}

ol();

404 keldi, lekin fetch xato bermadi. Bu ko’p uchraydigan yanglish tushuncha: fetch faqat tarmoq uzilganda rad etiladi; server javob bersa — hatto 404 yoki 500 bo’lsa ham — muvaffaqiyat hisoblanadi.

Shuning uchun ok ni qo’lda tekshirish kerak:

JavaScript

async function ol(manzil) {
const javob = await fetch(manzil);

if (!javob.ok) {
  throw new Error("So'rov muvaffaqiyatsiz: " + javob.status);
}

return javob.json();
}

ol("https://api.github.com/repos/yoq/yoq-12345")
.then((m) => console.log(m.name))
.catch((e) => console.log("Xato:", e.message));

try/catch bilan to’liq naqsh

JavaScript

async function repoOl(nom) {
try {
  const javob = await fetch("https://api.github.com/repos/" + nom);

  if (!javob.ok) {
    throw new Error("Topilmadi (" + javob.status + ")");
  }

  const m = await javob.json();
  console.log(m.full_name, "—", m.stargazers_count, "yulduz");
} catch (xato) {
  console.log("Xatolik:", xato.message);
}
}

repoOl("facebook/react");
repoOl("bunday/repo-yoq-99999");

Bu — amaliyotdagi standart naqsh: try/catch + ok tekshiruvi birga.

Ro’yxat olish va chizish

JavaScript

async function chiz() {
const javob = await fetch("https://api.github.com/users/torvalds/repos?per_page=5");
const repolar = await javob.json();

const ul = document.querySelector("#royxat");

for (const repo of repolar) {
  const li = document.createElement("li");
  li.textContent = repo.name + " (" + repo.language + ")";
  ul.append(li);
}

console.log("Chizildi:", repolar.length, "ta");
}

chiz();

Sahifa

Serverdan kelgan ma’lumot DOM ga aylantirildi — bu veb-ilovaning eng asosiy amali.

POST — ma’lumot yuborish

Ma’lumot yuborish uchun qo’shimcha sozlamalar kerak:

const javob = await fetch("https://example.com/api/talabalar", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ ism: "Aziz", yosh: 20 }),
});

const natija = await javob.json();

Uch narsa muhim:

method — so’rov turi (GET standart, POST, PUT, DELETE);
headers — Content-Type server tanani qanday o’qishini aytadi;
body — matn bo’lishi kerak, shuning uchun JSON.stringify.

Yuklanish holatini ko’rsatish

JavaScript

const p = document.querySelector("#holat");

async function ol() {
p.textContent = "Yuklanmoqda...";

try {
  const javob = await fetch("https://api.github.com/repos/nodejs/node");
  if (!javob.ok) throw new Error("Status " + javob.status);

  const m = await javob.json();
  p.textContent = m.full_name + " — " + m.stargazers_count + " yulduz";
} catch (xato) {
  p.textContent = "Xato: " + xato.message;
}
}

ol();

Sahifa

Uch holat — yuklanmoqda, natija, xato — har qanday ma’lumot oluvchi interfeysning majburiy qismi.

Parallel so’rovlar

JavaScript

async function parallel() {
const nomlar = ["vuejs/core", "sveltejs/svelte"];

const javoblar = await Promise.all(
  nomlar.map((n) => fetch("https://api.github.com/repos/" + n))
);

const malumotlar = await Promise.all(javoblar.map((j) => j.json()));

for (const m of malumotlar) {
  console.log(m.full_name, "—", m.stargazers_count);
}
}

parallel();

Ikki Promise.all: birinchisi so’rovlarni, ikkinchisi tanalarni parallel kutadi — async/await darsidagi qoida.

Amaliy mashq

GitHub API’dan istalgan repo ma’lumotini oling;
javob.ok ni tekshirib, xato bo’lsa throw qiling;
butun kodni try/catch ga o’rang;
kelgan ro’yxatni <ul> ichida chizing;
“Yuklanmoqda” holatini qo’shing;
mavjud bo’lmagan manzil so’rab, fetch xato bermasligini tasdiqlang.

6-qadam fetch haqidagi eng ko’p uchraydigan yanglishni tekshiradi.

Qisqacha xulosa

fetch so’rov yuboradi va Promise qaytaradi — await bilan ishlatiladi.
Tanani o’qish alohida qadam: await javob.json().
fetch 404/500 da xato bermaydi — javob.ok ni qo’lda tekshiring.
POST uchun method, headers va JSON.stringify(body) kerak.
Yuklanmoqda / natija / xato — uchala holat ham ko’rsatilishi kerak.
Bog’liq bo’lmagan so’rovlarni Promise.all bilan parallel yuboring.

Keyingi darsda JSON formatini batafsil ko’ramiz.