Fetch API: so‘rovlar, xatolar, taymautlar va bekor qilish

fetch haqida asosiysi

Fetch API — brauzerlar va Node.js ga o‘rnatilgan HTTP so‘rov yuborish usuli. U Response obyekti bilan promis qaytaradi, undan status, sarlavhalar va tanani o‘qiysiz.

Darhol bilish kerak bo‘lgan uchta narsa:

• fetch 404 yoki 500 da xato tashlamaydi — faqat tarmoq nosozligi yoki bekor qilishda;
• javob tanasi alohida o‘qiladi: response.json(), response.text(), response.blob();
• o‘rnatilgan taymaut yo‘q — u AbortController orqali beriladi.

GET so‘rovi

const res = await fetch('/api/products?category=phones');
if (!res.ok) {
  throw new Error(`HTTP ${res.status}`);
}
const products = await res.json();

So‘rov satri parametrlarini qiymatlarni qo‘lda ekranlamaslik uchun URLSearchParams orqali yig‘gan qulay:

const params = new URLSearchParams({ q: 'g‘ilof', page: '2' });
const res = await fetch(`/api/search?${params}`);

JSON bilan POST

const res = await fetch('/api/orders', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 42, quantity: 1 }),
});

Content-Type: application/json sarlavhasisiz ko‘p serverlar so‘rov tanasini tushunmaydi.

FormData bilan POST

Fayllar va oddiy HTML formalar uchun FormData dan foydalaning:

const form = document.querySelector('form');
const res = await fetch('/api/upload', {
  method: 'POST',
  body: new FormData(form),
});

Content-Type ni qo‘lda bermang — brauzer o‘zi to‘g‘ri chegara (boundary) bilan multipart/form-data ni qo‘yadi. Sarlavhani o‘zingiz ko‘rsatsangiz, server tanani tahlil qila olmaydi.

Nega 404 va 500 xato emas

fetch nuqtai nazaridan server javob berdi, demak so‘rov bajarildi. Statusni o‘zingiz tekshirishingiz kerak. Buni bitta funksiyaga chiqarish qulay:

async function request(url, options = {}) {
  const res = await fetch(url, options);
  if (!res.ok) {
    let details = null;
    try {
      details = await res.json();
    } catch {
      // tana JSON emas — null qoldiramiz
    }
    const error = new Error(`HTTP ${res.status}`);
    error.status = res.status;
    error.details = details;
    throw error;
  }
  return res.status === 204 ? null : res.json();
}

Endi kodda vaziyatlarni ajratish mumkin:

• TypeError — tarmoq yo‘q, CORS bloklagan, URL noto‘g‘ri;
• AbortError yoki TimeoutError — so‘rov bekor qilingan yoki taymaut tugagan;
• status maydoni bor xato — server 4xx yoki 5xx kodi bilan javob bergan.

Taymautlar va bekor qilish

Eng qisqa variant — AbortSignal.timeout():

const res = await fetch('/api/report', {
  signal: AbortSignal.timeout(5000),
});

So‘rovni qo‘lda bekor qilish kerak bo‘lsa (foydalanuvchi sahifadan chiqdi yoki yangi qidiruv so‘rovini kiritdi), AbortController dan foydalaning:

let controller;

async function search(query) {
  controller?.abort();
  controller = new AbortController();
  try {
    const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
      signal: controller.signal,
    });
    return await res.json();
  } catch (err) {
    if (err.name === 'AbortError') return null;
    throw err;
  }
}

Shunda eskirgan javoblar yangi qidiruv natijalarini ustidan yozib yubormaydi.

Sarlavhalar va cookie lar

• Avtorizatsiya tokeni sarlavhada uzatiladi: headers: { Authorization: 'Bearer ' + token }.
• credentials parametri cookie larni boshqaradi: standart qiymat same-origin, boshqa domenga so‘rovlar uchun include kerak.
• credentials: 'include' da server buni CORS sarlavhalarida ruxsat berishi kerak, aks holda brauzer javobni bloklaydi.

Qachon axios olish kerak

Loyihada bir nechta so‘rov bo‘lsa, fetch va kichik o‘ram yetarli. So‘rovlar ko‘p bo‘lsa, tokenlarni yangilashning yagona mantiqi va yuklash progressi kerak bo‘lsa, axios vaqtni tejaydi.

Keng tarqalgan xatolar

• res.ok ni tekshirmaslik va xato sahifasining HTML ini JSON sifatida tahlil qilishga urinish.
• FormData uchun Content-Type qo‘yish.
• res.json() oldidan await ni unutish.
• AbortError ni qayta ishlamaslik va oddiy bekor qilishda foydalanuvchiga xato ko‘rsatish.