Axios: instance, interceptor va error.response bilan HTTP so'rovlar

Qisqacha: Axios — eng mashhur tayyor HTTP klient. U JSON'ni o'zi o'qiydi va o'zi yuboradi (javob.data), 4xx/5xx da o'zi xato tashlaydi (error.response.status), timeout va baseURL ni sozlamada oladi. axios.create() — o'z sozlamali nusxa (instance), interceptor — har so'rov va javob o'tadigan "nazorat punkti". Bularning hammasini o'tgan darsda qo'lda yozgan edik — Axios ularni tayyor beradi.

Bu darsda

• Axios'ni brauzerga (CDN) va Node loyihasiga (npm) ulaysiz, versiyani qotirasiz.
• axios.get, axios.post, params bilan so'rov yuborasiz va javob obyektini (data, status, headers) o'qiysiz.
• Axios xatolarini ajratasiz: error.response bor-yo'qligi, error.code (ERR_BAD_REQUEST, ECONNABORTED, ERR_NETWORK).
• axios.create bilan instance va baseURL yasaysiz, interceptor'lar qo'shasiz.
• fetch, Axios va ky ni taqqoslab, loyihaga qaysi biri mosligini tanlaysiz.

Oldin bilishingiz kerak: API klient qatlami, fetch asoslari, fetch bilan ma'lumot yuborish, Bekor qilish: AbortController.

1. Nega bu kerak?

O'tgan darsda api.js ni yozdik: 90 qatorga yaqin. Asosiy URL, JSON, javob.ok, timeout, besh xil xatoni bitta shaklga keltirish. Bu foydali mashq bo'ldi — endi klient ichida nima bo'lishini bilasiz.

Lekin real ishda har jamoa bu qatlamni noldan yozmaydi. Ko'pchilik tayyor kutubxona oladi. Ulardan eng mashhuri — Axios. U 2014 yildan beri bor, brauzerda ham, Node'da ham bir xil ishlaydi. Ish e'lonlarida "Axios" so'zi tez-tez uchraydi va siz uni ko'p mavjud loyihalarda ko'rasiz.

npm'dagi haftalik yuklanishlarni solishtiring:

Grafikda nimaga qarash kerak: node-fetch birinchi, lekin u kutubxona emas — Node 18 dan oldingi versiyalarga fetch qo'shadigan eski "yamoq". Uni boshqa eski paketlar ichida yuklashadi. Haqiqiy tanlov qilinadigan klientlar ichida Axios boshqalardan bir necha barobar oldinda.

Bugun Axios'ni o'rganamiz va oxirida halol javob beramiz: qachon u kerak, qachon fetch yetarli.

2. Axios'ni ulash

2.1 Versiya

Kursdagi hamma misollar Axios 1.20.0 da tekshirilgan (2026-yil sentabr). Kutubxonalar o'zgarib turadi, shuning uchun versiyani har doim aniq ko'rsatamiz.

2.2 Brauzerda — CDN orqali

Brauzerda Axios'ni internetdagi fayldan import qilish mumkin. CDN (Content Delivery Network) — fayllarni dunyo bo'ylab tez tarqatadigan serverlar tarmog'i. cdn.jsdelivr.net — npm paketlarini bepul beradigan CDN. Manzil oxiridagi +esm — "paketni ES modul ko'rinishida ber":

import axios from "https://cdn.jsdelivr.net/npm/axios@1.20.0/+esm";

URL'da versiya aniq: axios@1.20.0. Versiyasiz (axios/+esm) yozsangiz, CDN har safar eng yangisini beradi — bir kun ertalab saytingiz yangi versiya bilan buziladi. Bu darsdagi natija oynalari aynan shu qator bilan ishlaydi: saytning xavfsizlik siyosati natijaga cdn.jsdelivr.net dan skript yuklashga ruxsat beradi.

2.3 Node'da — npm orqali

Node loyihasida kutubxonalar npm bilan o'rnatiladi — uni npm'ga birinchi qadam darsida ko'rgansiz. Mashqlar papkasida yangi loyiha ochamiz:

cd kurs/mashqlar/11
mkdir 23-axios
cd 23-axios
npm init -y
npm install axios@1.20.0

Eslatma: npm init -y — package.json yaratadi, npm install axios@1.20.0 — Axios'ni node_modules papkasiga yuklab, package.json ga yozib qo'yadi. Versiyadagi @1.20.0 — aniq shu versiya; npm buyruqlarini chuqur npm bilan ishlash darsida, 16-qismda o'rganamiz. Keyin package.json ga "type": "module" qatorini qo'shing — ES modullar darsidagi kabi. Shundan so'ng .js fayllarda:

import axios from "axios";
console.log(axios.VERSION); // 1.20.0

Bu darsdagi Node misollari shu papkada, Node 24 bilan sinalgan. Ular saytda "Ishga tushir" tugmasisiz — Axios'ni sayt o'z ichida o'rnatmaydi. Brauzer misollari esa natija oynalarida jonli ishlaydi.

Diqqat: node_modules papkasi juda katta bo'lishi mumkin va u git'ga qo'shilmaydi: .gitignore ga node_modules/ qatorini yozing (.gitignore: to'liq qo'llanma). Uni istalgan vaqt npm install qayta yaratadi.

3. Birinchi so'rovlar

3.1 axios.get va javob obyekti

<p>Natija konsolda ↓</p>
<script type="module">
  import axios from "https://cdn.jsdelivr.net/npm/axios@1.20.0/+esm";

  const javob = await axios.get(
    "https://ilmhamroh.uz/api/mashq/menyu/1",
  );
  console.log(javob.status, javob.statusText);
  console.log(javob.data);
  console.log(javob.data.nom, javob.data.narx);
  console.log(javob.headers["content-type"]);
</script>

Konsolda:

200 
{id: 1, nom: 'Osh', narx: 35000, turkum: 'taom'}
Osh 35000
application/json; charset=utf-8

Uch farqni ko'ring:

• await bitta. fetch da ikkita edi: await fetch() va await javob.json(). Axios javobni o'zi oxirigacha o'qiydi va JSON bo'lsa — o'zi obyektga aylantiradi (JSON.parse qiladi).
• Ma'lumot — javob.data da. Javob obyektida yana status, statusText, headers (kichik harfli nomlar bilan oddiy obyekt), config (so'rov sozlamasi) va request bor.
• statusText bo'sh. Server HTTP/2 orqali javob berdi, HTTP/2 da esa holat matni ("OK") umuman yuborilmaydi (HTTP versiyalari va real-time aloqa). Node'da shu so'rov 200 OK chiqaradi — u HTTP/1.1 ishlatadi. Shuning uchun statusText ga tayanmang.

Brauzerdagi javob.headers da faqat bir nechta sarlavha ko'rinadi: content-type, content-length, cache-control va server ochib qo'yganlari. Bu — CORS mijoz tomondan qoidasi: boshqa saytning sarlavhalarini brauzer yashiradi. Node'da esa hammasi ko'rinadi.

3.2 params — so'rov parametrlari

URL'ga ?turkum=ichimlik ni qo'lda yopishtirish o'rniga, Axios'ga obyekt beriladi:

import axios from "axios";

const url = "https://ilmhamroh.uz/api/mashq/menyu";
const javob = await axios.get(url, {
  params: { turkum: "ichimlik" },
});
console.log(javob.data);
console.log(javob.request.path);

Konsolda:

[ { id: 4, nom: "Ko'k choy", narx: 5000, turkum: 'ichimlik' } ]
/api/mashq/menyu?turkum=ichimlik

javob.request.path — Node'da haqiqatan yuborilgan yo'l. Axios params ni o'zi ?turkum=ichimlik qilib qo'shdi. Maxsus belgilarni (bo'sh joy, &, o'zbekcha ') ham o'zi kodlaydi — qo'lda yozganda bular eng ko'p xato beradigan joy.

3.3 axios.post — obyekt yuborish

import axios from "axios";

const javob = await axios.post("https://ilmhamroh.uz/api/mashq/aks", {
  ism: "Dilshod aka",
  odam: 4,
});
console.log(javob.data.sarlavhalar["content-type"]);
console.log(javob.data.tana);

Konsolda:

application/json
{ ism: 'Dilshod aka', odam: 4 }

Ikkinchi argument — tana. Oddiy obyekt berdik, JSON.stringify va Content-Type: application/json ni Axios o'zi qo'ydi. FormData bersangiz — multipart/form-data qiladi (FormData). Boshqa metodlar ham shunday: axios.put(url, tana), axios.patch(url, tana), axios.delete(url).

Tekshirib ko'ring: const t = await axios.get(url); console.log(t.nom); — nima chiqadi?

4. Axios xatolari

4.1 4xx va 5xx — xato

fetch 404 da ham "muvaffaqiyatli" bajarilardi — javob.ok ni o'zingiz tekshirardingiz. Axios esa holat 2xx bo'lmasa, o'zi xato tashlaydi:

import axios from "axios";

try {
  await axios.get("https://ilmhamroh.uz/api/mashq/menyu/99");
} catch (xato) {
  console.log(xato.name, "|", xato.code);
  console.log(xato.message);
  console.log(xato.response.status, xato.response.data);
}

Konsolda:

AxiosError | ERR_BAD_REQUEST
Request failed with status code 404
404 { xato: 'Taom topilmadi', id: 99 }

Tarjimasi: "So'rov muvaffaqiyatsiz: holat kodi 404." Xato obyekti — AxiosError. Unda:

• xato.response — serverning javobi, xuddi muvaffaqiyatdagi kabi: status, data, headers. Server yuborgan {xato: 'Taom topilmadi'} — xato.response.data da.
• xato.code — Axios'ning qisqa kodi. 4xx uchun ERR_BAD_REQUEST, 5xx uchun ERR_BAD_RESPONSE.
• xato.config — qaysi so'rov edi (URL, metod).

4.2 Javob umuman bo'lmasa

Server javob bermagan holatlarda xato.response — undefined. Unda xato.code ga qaraladi:

Jadvaldagi matnlar Axios 1.20.0 da, haqiqiy so'rovlar bilan olingan. Timeout va bekor qilishni sinaymiz:

import axios from "axios";

const url = "https://ilmhamroh.uz/api/mashq/menyu?kechikish=2000";

try {
  await axios.get(url, { timeout: 500 });
} catch (xato) {
  console.log(xato.code, "|", xato.message, "|", xato.response);
}

try {
  await axios.get(url, { signal: AbortSignal.timeout(500) });
} catch (xato) {
  console.log(xato.code, "|", xato.message);
  console.log(axios.isCancel(xato));
}

Konsolda:

ECONNABORTED | timeout of 500ms exceeded | undefined
ERR_CANCELED | canceled
true

Tarjimasi: "500 ms vaqt chegarasi oshib ketdi" va "bekor qilindi". timeout — Axios'ning o'z sozlamasi (millisekundlarda). signal — Bekor qilish: AbortController dagi standart signal, Axios uni ham tushunadi. E'tibor bering: AbortSignal.timeout ham Axios uchun shunchaki "bekor qilindi" — ERR_CANCELED. Timeout'ni alohida ko'rmoqchi bo'lsangiz, timeout sozlamasini ishlating.

axios.isCancel(xato) — bekor qilishmi yoki haqiqiy xatomi, aniqlaydi. O'tgan darsdagi qoida o'zgarmaydi: bekor qilingan so'rov — foydalanuvchiga xato emas.

Brauzerda tarmoq xatosi va CORS xatosi bir xil ko'rinadi: Network Error. Brauzer xavfsizlik uchun sababini JavaScript'dan yashiradi (CORS mijoz tomondan). Haqiqiy sababi — DevTools konsolida, qizil qatorda.

4.3 Xato turini ajratish

Yuqoridagilarni bitta tartibga keltiramiz. Axios xatosini qayta ishlashning standart shakli:

import axios from "axios";

function xatoniTushuntir(xato) {
  if (!axios.isAxiosError(xato)) return "Dastur xatosi";
  if (axios.isCancel(xato)) return "Bekor qilindi";
  if (xato.response) {
    const { status, data } = xato.response;
    return `Server: ${status} — ${data?.xato ?? "xato"}`;
  }
  if (xato.code === "ECONNABORTED") return "Server javob bermadi";
  return "Internet aloqasini tekshiring";
}

const urllar = [
  "https://ilmhamroh.uz/api/mashq/menyu/99",
  "https://ilmhamroh.uz/api/mashq/holat/500",
  "https://mavjud-emas.invalid/",
];
for (const url of urllar) {
  try {
    await axios.get(url, { timeout: 3000 });
  } catch (xato) {
    console.log(xatoniTushuntir(xato));
  }
}

Konsolda:

Server: 404 — Taom topilmadi
Server: 500 — xato
Internet aloqasini tekshiring

axios.isAxiosError(xato) birinchi turadi: try ichida o'zimizning kodimiz ham xato tashlashi mumkin (masalan, undefined.nom). Uni "Internet yo'q" deb ko'rsatish — foydalanuvchini aldash. data?.xato — /holat/500 ning javobida xato maydoni yo'q, shuning uchun zaxira so'z chiqdi.

Bu tartib o'tgan darsdagi ApiXatosi ning Axios'dagi o'rinbosari. 3-mashqda uni to'liq ApiXatosi ga aylantirasiz.

4.4 validateStatus — qaysi holat "muvaffaqiyat"

Ba'zan 404 xato emas, oddiy javob: "bunday taom yo'q — 'Yo'q' deb ko'rsat". validateStatus — holatni oladigan va true/false qaytaradigan funksiya: true bo'lsa, Axios xato tashlamaydi.

import axios from "axios";

const javob = await axios.get(
  "https://ilmhamroh.uz/api/mashq/menyu/99",
  { validateStatus: (holat) => holat < 500 },
);
console.log(javob.status, javob.data.xato); // 404 Taom topilmadi

Endi 404 try/catch siz keldi, faqat 5xx xato bo'ladi. Standart qiymati — holat >= 200 && holat < 300.

Tekshirib ko'ring: Telefonda internet o'chiq. catch (xato) ichida birinchi qator console.log(xato.response.status). Nima bo'ladi?

5. Instance va baseURL

5.1 axios.create

O'tgan darsdagi apiKlient ni eslang: asosiy URL va sozlamalar bir marta beriladi. Axios'da buning tayyori bor — instance (nusxa): o'z standart sozlamalariga ega alohida Axios.

import axios from "axios";

const api = axios.create({
  baseURL: "https://ilmhamroh.uz/api/mashq",
  timeout: 8000,
  headers: { "X-Sinov": "bahor" },
});

const taom = await api.get("/menyu/2");
console.log(taom.data.nom); // Lag'mon

const aks = await api.get("/aks");
console.log(aks.data.sarlavhalar["x-sinov"]); // bahor

• baseURL — har so'rov URL'ining boshi. api.get("/menyu/2") → https://ilmhamroh.uz/api/mashq/menyu/2. Axios qiya chiziqlarni ham o'zi to'g'rilaydi: baseURL / bilan tugasa ham ikkita // bo'lmaydi.
• timeout — har so'rov uchun standart chegara.
• headers — har so'rovga qo'shiladigan sarlavhalar. /aks ularni qaytaradi — x-sinov keldi.

Har so'rov o'z sozlamasini ham bera oladi va u standartdan ustun: api.get("/menyu", { timeout: 2000 }).

Bitta ilovada bir nechta instance bo'lishi tabiiy: biri o'z serveringizga, biri ob-havo API'siga — har birining baseURL va sarlavhalari o'zi.

6. Interceptor'lar

6.1 Nazorat punkti

Interceptor (ushlab qoluvchi) — har so'rov yuborilishidan oldin yoki har javob kelgandan keyin, sizning kodingizgacha ishlaydigan funksiya. Xuddi aeroportdagi nazorat punkti: har yo'lovchi undan o'tadi, nazoratchi esa tekshiradi, tamg'a bosadi yoki to'xtatadi.

flowchart LR
  K["api.get()"] --> RQ["So'rov<br/>interceptor'lari"]
  RQ --> S[("Server")]
  S --> RS["Javob<br/>interceptor'lari"]
  RS -->|"2xx"| T["then / await"]
  RS -->|"xato"| C["catch"]

Ikki xil interceptor bor:

• So'rov interceptor'i — api.interceptors.request.use(fn). fn so'rov sozlamasini (config) oladi va uni (o'zgartirib) qaytarishi shart. Ishlatilishi: har so'rovga token qo'shish, so'rovni loglash.
• Javob interceptor'i — api.interceptors.response.use(muvaffaqiyat, xato). Birinchi funksiya 2xx javobni, ikkinchisi xatoni oladi. Ishlatilishi: xatoni bitta shaklga keltirish, 401 da tokenni yangilash.

6.2 Jonli misol

Natijada instance, ikki interceptor va uch so'rov. So'rov interceptor'i har so'rovni konsolga yozadi va sarlavha qo'shadi. Javob interceptor'i esa xatoni qisqa matnga aylantiradi:

<p>Natija konsolda ↓</p>
<script type="module">
  import axios from "https://cdn.jsdelivr.net/npm/axios@1.20.0/+esm";

  const api = axios.create({
    baseURL: "https://ilmhamroh.uz/api/mashq",
    timeout: 8000,
  });

  api.interceptors.request.use((config) => {
    config.headers["X-Sinov"] = "bahor";
    console.log("→", config.method.toUpperCase(), config.url);
    return config;
  });

  api.interceptors.response.use(
    (javob) => javob,
    (xato) => {
      const holat = xato.response?.status ?? 0;
      const xabar = xato.response?.data?.xato ?? xato.message;
      return Promise.reject(new Error(`${holat}: ${xabar}`));
    },
  );

  const aks = await api.get("/aks");
  console.log(aks.data.sarlavhalar["x-sinov"]);

  const bron = await api.post("/bronlar", {
    ism: "Dilshod aka", telefon: "+998 90 000 00 00",
    odamlar: 4, sana: "2026-11-15", vaqt: "19:00",
  });
  console.log(bron.status, bron.data.ism, bron.data.odamlar);

  try {
    await api.get("/menyu/99");
  } catch (xato) {
    console.log(xato.message);
  }
</script>

Konsolda:

→ GET /aks
bahor
→ POST /bronlar
201 Dilshod aka 4
→ GET /menyu/99
404: Taom topilmadi

Qatorma-qator:

• So'rov interceptor'i config.headers ga sarlavha qo'shdi va config ni qaytardi. return config ni unutsangiz — so'rov undefined sozlama bilan ketadi va buziladi.
• Javob interceptor'ining birinchi funksiyasi javobni o'zgartirmay qaytaradi. Ikkinchisi — xatoni o'zimizning Error ga aylantiradi. Promise.reject(...) — xato catch ga yetib borishi uchun. Agar xato funksiyasi oddiy qiymat qaytarsa, Axios uni muvaffaqiyat deb hisoblaydi va catch ishlamaydi.
• Endi 404 ning catch i faqat tayyor matnni ko'rdi: 404: Taom topilmadi. AxiosError ning tafsilotlari interceptor ichida qoldi.

6.3 Tartib va olib tashlash

Bir nechta interceptor bo'lsa, tartibi kutilmagan: so'rov interceptor'lari teskari tartibda ishlaydi (oxirgi qo'shilgani birinchi), javob interceptor'lari esa qo'shilgan tartibda. Node'da sinab ko'rdik: avval A, keyin B so'rov interceptor'ini, avval C, keyin D javob interceptor'ini qo'shdik. Ishlash tartibi B, A, C, D bo'ldi. Tartibga bog'liq mantiqni (masalan, "avval token, keyin log") yozganda buni yodda tuting.

use() raqam qaytaradi. Interceptor'ni olib tashlash — api.interceptors.request.eject(raqam). Masalan, foydalanuvchi tizimdan chiqqanda token qo'shuvchi interceptor olib tashlanadi.

Tekshirib ko'ring: Javob interceptor'ining xato funksiyasi return xato.response; deb yozilgan. 404 bo'lganda try/catch dagi catch ishlaydimi?

7. fetch, Axios yoki ky?

Halol solishtirish. ky — fetch ustiga qurilgan kichik klient (2.1.0 versiya). U ham Axios kabi json(), timeout va retry beradi. Interceptor'ning o'rnida esa unda hooks bor — vazifasi bir xil, nomi boshqa.

Jadvaldagi "gzip" — fayl siqilgan holda tarmoqdan qancha hajm bilan keladi (brauzer uni o'zi ochadi). Kichik hajm — sekin internetda tezroq yuklanadi.

Hajm — cdn.jsdelivr.net/npm/<paket>/+esm faylining gzip'langan o'lchami, 2026-10-05.

Qaysi biri qachon:

• fetch — kichik loyiha, bir nechta so'rov, kutubxonasiz bo'lishi kerak bo'lgan joy. O'tgan darsdagi api.js kabi 90 qatorlik o'ram ko'p hollarda yetadi.
• Axios — mavjud loyiha uni ishlatsa (ko'pchilik shunday), interceptor'lar ko'p bo'lsa, fayl yuklash progressi kerak bo'lsa. Uning brauzerdagi asosi — eski XMLHttpRequest (fetch dan oldingi so'rov yuborish usuli; uni eski kodda uchratasiz, o'rganish shart emas). Shuning uchun upload progressi bor, lekin javobni oqim bilan o'qib bo'lmaydi (Streams API). Kerak bo'lsa, adapter: "fetch" sozlamasi bilan fetch ga o'tkaziladi.
• ky — yangi loyiha, zamonaviy fetch ustida, kichik hajm. Vue va Nuxt (React'ga o'xshash boshqa freymvorklar; kursda o'rganmaymiz) dunyosida esa ofetch mashhur.

Bitta loyihada bittasini tanlang. Ikkisi aralash bo'lsa, xatolar ikki xil shaklda keladi — o'tgan darsdagi muammoning o'zi.

8. Hujumchi nigohi

8.1 baseURL ni chetlab o'tish

Bu xato real bo'lgan va 2025-yilda Axios'da tuzatilgan. Uning raqami — CVE-2025-27152. CVE — dasturlardagi ma'lum zaifliklarning umumjahon ro'yxati; har zaiflik shu ro'yxatda o'z raqamini oladi. Holat: instance'da baseURL va Authorization sarlavhasi bor. Yo'l esa foydalanuvchidan keladi — masalan, URL parametridan:

import axios from "axios";

const api = axios.create({
  baseURL: "https://ilmhamroh.uz/api/mashq",
});

console.log(api.getUri({ url: "/menyu/1" }));
console.log(api.getUri({ url: "https://example.com/olish" }));

const xavfsiz = axios.create({
  baseURL: "https://ilmhamroh.uz/api/mashq",
  allowAbsoluteUrls: false,
});
console.log(xavfsiz.getUri({ url: "https://example.com/olish" }));

Konsolda:

https://ilmhamroh.uz/api/mashq/menyu/1
https://example.com/olish
https://ilmhamroh.uz/api/mashq/https://example.com/olish

getUri — Axios so'rov qaysi manzilga ketishini yubormasdan ko'rsatadi. Ikkinchi qatorga qarang: yo'l to'liq URL bo'lsa, Axios baseURL ni tashlab yuboradi. Hujumchi yo'l o'rniga o'z serverini yozadi va so'rov — sarlavhalari, tokeni bilan — unga ketadi. Serverda (Node'da) bu yana ham xavfli: hujumchi sizning serveringiz orqali ichki tarmoqdagi manzillarga so'rov yubortiradi. Bu hujumning nomi — SSRF (Server-Side Request Forgery, "server nomidan soxta so'rov"); backend xavfsizligida chuqur ko'ramiz.

Himoya ikki qavat:

• allowAbsoluteUrls: false — 1.8.2 versiyadan bor. Endi to'liq URL ham baseURL ga qo'shiladi: uchinchi qator.
• Foydalanuvchidan kelgan yo'lni hech qachon to'g'ridan-to'g'ri URL qilmang. Oq ro'yxat ishlating: const ruxsat = new Set(["taom", "ichimlik"]) va faqat undagi qiymatni qo'ying.

8.2 Versiyani qotiring va yangilab turing

Axios — juda ko'p yuklanadigan paket, shuning uchun hujumchilar uchun ham qiziq nishon. Ikki qoida: versiya aniq (axios@1.20.0), va zaiflik e'lon qilinsa — tez yangilash. npm audit buyrug'i o'rnatilgan paketlardagi ma'lum zaifliklarni ko'rsatadi — Ta'minot zanjiri xavfsizligi.

9. Ko'p uchraydigan xatolar

9.1 javob.data ni unutish

const taomlar = await axios.get(url); taomlar.map(...) — TypeError: taomlar.map is not a function. Javob obyekti massiv emas. Tuzatish: const { data: taomlar } = await axios.get(url);.

9.2 Tanani o'zingiz JSON.stringify qilish

axios.post(url, JSON.stringify(obyekt)) — Axios satrni oladi va Content-Type ni application/x-www-form-urlencoded qilib yuboradi (1.20.0 da sinaldi). JSON kutgan server tanani noto'g'ri o'qiydi yoki 415 qaytaradi. Tuzatish: obyektni o'zini bering — Axios o'zi aylantiradi.

9.3 catch da xato.response ni tekshirmaslik

Internet yo'q yoki timeout — xato.response undefined, xato.response.status esa yangi TypeError. Tuzatish: xato.response?.status yoki «Xato turini ajratish» bo'limidagi tartib.

9.4 Interceptor'da return yo'q

So'rov interceptor'i config ni qaytarmasa — so'rov buziladi. Javob interceptor'i xatoni qaytarsa (return xato) — xato muvaffaqiyatga aylanadi. Tuzatish: so'rovda doim return config, javob xatosida doim return Promise.reject(...).

9.5 Versiyasiz CDN

https://cdn.jsdelivr.net/npm/axios/+esm — har safar eng yangisi. Katta versiya 2.0-bob chiqqan kuni saytingiz buzilishi mumkin. Tuzatish: URL'da aniq versiya.

10. Mashqlar

1-mashq (oson): Sahifalangan menyu

Natijada Axios bilan /api/mashq/menyu dan params: { sahifa: 2, hajm: 2 } bilan so'rov yuboring. Javob — {elementlar, sahifa, keyingi, jami}. Taom nomlarini, sahifa raqamini va keyingi qiymatini chiqaring.

<p>Natija konsolda ↓</p>
<script type="module">
  import axios from "https://cdn.jsdelivr.net/npm/axios@1.20.0/+esm";

  const { data } = await axios.get(
    "https://ilmhamroh.uz/api/mashq/menyu",
    { params: { sahifa: 2, hajm: 2 } },
  );
  console.log(data.elementlar.map((t) => t.nom));
  console.log("Sahifa:", data.sahifa, "keyingi:", data.keyingi);
  console.log("Jami:", data.jami);
</script>

(2) ['Manti', "Ko'k choy"]
Sahifa: 2 keyingi: null
Jami: 4

2-mashq (o'rta): data ni ochib beruvchi instance

Instance yarating va javob interceptor'i qo'shing: muvaffaqiyatda butun javob obyekti o'rniga faqat javob.data ni qaytarsin. Shunda await api.get("/menyu/3") to'g'ridan-to'g'ri taomni beradi. /menyu/3 va /menyu?turkum=ichimlik bilan sinang.

<p>Natija konsolda ↓</p>
<script type="module">
  import axios from "https://cdn.jsdelivr.net/npm/axios@1.20.0/+esm";

  const api = axios.create({
    baseURL: "https://ilmhamroh.uz/api/mashq",
    timeout: 8000,
  });
  api.interceptors.response.use((javob) => javob.data);

  const manti = await api.get("/menyu/3");
  console.log(manti.nom, manti.narx);

  const ichimliklar = await api.get("/menyu", {
    params: { turkum: "ichimlik" },
  });
  console.log(ichimliklar.length, ichimliklar[0].nom);
</script>

Manti 30000
1 Ko'k choy

3-mashq (qiyin): Axios bilan apiKlient

O'tgan darsdagi apiKlient({ asosiyUrl, kalit }) ni Axios bilan qayta yozing (royxat va qosh yetarli). Javob interceptor'i har AxiosError ni ApiXatosi ga aylantirsin: holat — xato.response?.status ?? 0; kod — ECONNABORTED → VAQT, bekor qilish → BEKOR, javob bo'lmasa → TARMOQ, 404 → TOPILMADI, 400/422 → NOTOGRI, 5xx → SERVER. Faylni kurs/mashqlar/11/23-axios/klient.js ga saqlang va Node'da sinang: vazifa qo'shing, ro'yxatni oling, bo'sh matn yuboring.

// klient.js — Axios bilan apiKlient
import axios from "axios";

class ApiXatosi extends Error {
  constructor(xabar, sozlama) {
    super(xabar, sozlama);
    this.name = "ApiXatosi";
    this.holat = sozlama?.holat ?? 0;
    this.kod = sozlama?.kod ?? "NOMALUM";
  }
}

function kodniTop(xato) {
  if (axios.isCancel(xato)) return "BEKOR";
  if (xato.code === "ECONNABORTED") return "VAQT";
  const holat = xato.response?.status;
  if (!holat) return "TARMOQ";
  if (holat === 404) return "TOPILMADI";
  if (holat === 400 || holat === 422) return "NOTOGRI";
  if (holat >= 500) return "SERVER";
  return "HTTP";
}

function apiKlient({ asosiyUrl, kalit }) {
  const api = axios.create({ baseURL: asosiyUrl, timeout: 8000 });
  api.interceptors.response.use(
    (javob) => javob.data,
    (xato) => Promise.reject(new ApiXatosi(
      xato.response?.data?.xato ?? xato.message,
      {
        holat: xato.response?.status ?? 0,
        kod: kodniTop(xato),
        cause: xato,
      },
    )),
  );
  const yol = `/vazifalar/${kalit}`;
  return {
    royxat: () => api.get(yol),
    qosh: (matn) => api.post(yol, { matn }),
  };
}

const api = apiKlient({
  asosiyUrl: "https://ilmhamroh.uz/api/mashq",
  kalit: crypto.randomUUID(),
});

const non = await api.qosh("Non olish");
console.log("Qo'shildi:", non.id, non.matn);
const { vazifalar } = await api.royxat();
console.log("Ro'yxatda:", vazifalar.length, "ta");

try {
  await api.qosh("");
} catch (xato) {
  console.log(xato.name, xato.kod, xato.holat, xato.message);
}

Qo'shildi: 1 Non olish
Ro'yxatda: 1 ta
ApiXatosi NOTOGRI 422 Ma'lumot noto'g'ri

git add 11/23-axios/klient.js 11/23-axios/package.json
git commit -m "11/23: apiKlient Axios bilan"

11. Real ishda

• Mavjud loyihalar. O'zbekistondagi ko'p React va Vue loyihalarida src/api/axios.js fayli bor: bitta instance, baseURL muhit o'zgaruvchisidan, so'rov interceptor'ida token. Ishga kirgan birinchi haftangizda shunday faylni ochasiz.
• Token va 401. Interceptor'ning eng mashhur ishi — har so'rovga Authorization qo'shish va 401 da tokenni yangilab, so'rovni qayta yuborish. Bu — keyingi dars.
• TanStack Query bilan. Server holati kutubxonalari Axios'ni ichida ishlatadi: queryFn: () => api.get("/menyu") (TanStack Query I).
• Node'da. Axios backend'da ham ishlatiladi — boshqa servis API'larini chaqirish uchun (to'lov tizimi, SMS). U yerda allowAbsoluteUrls: false va oq ro'yxat ayniqsa muhim.
• Intervyu. "Axios va fetch farqi?", "Interceptor nima va qachon kerak?" — juda ko'p beriladi.

Xulosa

• Axios — tayyor HTTP klient: JSON'ni o'zi o'qiydi/yuboradi (javob.data), params, timeout, baseURL sozlamada.
• Holat 2xx bo'lmasa — AxiosError. Server javobi xato.response da; javob bo'lmasa — xato.code (ECONNABORTED, ERR_CANCELED, ERR_NETWORK).
• axios.create() — o'z sozlamali instance; interceptor'lar — har so'rov va javob uchun nazorat punkti. So'rovda return config, xatoda Promise.reject.
• fetch / Axios / ky — loyihaga qarab; bitta loyihada bittasi. Axios brauzerda javobni oqim bilan o'qimaydi.
• Versiyani qotiring; foydalanuvchi yo'lini URL qilmang yoki allowAbsoluteUrls: false qo'ying.

Keyingi dars: Autentifikatsiyali so'rovlar va token yangilash — Authorization sarlavhasi, muddati tugagan token va bir vaqtda kelgan bir nechta 401 ni bitta yangilash bilan hal qilish.

Manbalar

• Axios hujjatlari: "Request config", "Response schema", "Interceptors", "Handling errors" — axios-http.com/docs
• Axios GitHub: releases (1.20.0), CVE-2025-27152 va allowAbsoluteUrls (1.8.2) — github.com/axios/axios
• ky README (2.x) — github.com/sindresorhus/ky
• npm downloads API — api.npmjs.org/downloads