Chapter 37 — Fetch API & AJAX

Bu bob bilan PART 5 (DOM & Browser) yakunlanadi. Bu bobda serverdan ma'lumot olish — veb-dasturlashning eng muhim amaliy ko'nikmalaridan birini o'rganamiz. Bu yerda Chapter 27-28'da o'rgangan Promise va async/await bilimlarimiz to'liq amaliy qo'llanilishini topadi.

---

37.1 AJAX nima?

Simple Explanation

AJAX (Asynchronous JavaScript and XML) — sahifani to'liq qayta yuklamasdan, serverdan ma'lumot olish yoki serverga ma'lumot yuborish texnikasi.

Real-Life Analogy

📬 AJAX'siz — bu har safar yangi xat olish uchun butun pochta bo'limiga borishga o'xshaydi (butun sahifa qayta yuklanadi). AJAX bilan — bu shunchaki pochta qutingizni tekshirishga o'xshaydi (faqat kerakli ma'lumot yangilanadi, qolgan sahifa o'zgarmaydi).

Why Does It Exist?

AJAX'siz, foydalanuvchi harakati (masalan, "Ko'proq ko'rsatish" tugmasini bosish) — butun sahifani qayta yuklashni talab qilardi, bu esa sekin va noqulay tajriba yaratardi.

37.2 fetch() — Zamonaviy AJAX vositasi

Simple Explanation

fetch() — serverga so'rov yuborish uchun zamonaviy, Promise asosidagi JavaScript function.

Example — GET so'rov

script.js
JavaScriptNusxalash
01fetch("[https://api.example.com/users](https://api.example.com/users)")
02    .then(response => response.json())
03    .then(data => {
04        console.log(data);
05    })
06    .catch(error => {
07        console.log("Xatolik: " + error);
08    });

async/await bilan (Chapter 28'dan)

script.js
JavaScriptNusxalash
01async function getUsers() {
02    try {
03        let response = await fetch("[https://api.example.com/users](https://api.example.com/users)");
04        let data = await response.json();
05        console.log(data);
06    } catch (error) {
07        console.log("Xatolik: " + error);
08    }
09}

🔗 Connection
Bu — Chapter 28.1'da ko'rgan misolning to'liq, real amaliy ko'rinishi. fetch() — Promise qaytaradi, shuning uchun uni .then() yoki await bilan ishlatish mumkin.

37.3 ⚠️ Qiyin mavzu: fetch() ikki bosqichli javob berish

Simple Explanation

fetch()ning ishlash mexanizmi ko'pchilikni chalg'itadi, chunki natijani olish uchun ikki marta await (yoki .then()) kerak bo'ladi.

Nega bu qiyin?

script.js
JavaScriptNusxalash
01let response = await fetch(url);
02let data = await response.json(); // Nega bu yerda YANA await kerak?

Nima uchun bunday? (Technical Explanation)

1. Birinchi await fetch(url) — server bilan "aloqa o'rnatilishi va sarlavhalar (headers) kelishi"ni kutadi. Bu bosqichda, response object'i allaqachon mavjud, lekin uning tanasi (body) hali to'liq yuklab olinmagan bo'lishi mumkin (agar ma'lumot katta bo'lsa).
2. Ikkinchi await response.json() — javobning tanasini to'liq o'qib, uni JavaScript object'iga aylantirishni kutadi. Bu — alohida, potentsial "sekin" amal, chunki katta ma'lumot hajmi uchun vaqt kerak bo'lishi mumkin.

Diagram

code.text
TEXTNusxalash
01fetch(url)
02    │
03    ▼ 1-bosqich: server bilan aloqa, sarlavhalar keladi
04response object (hali "tana" to'liq emas)
05    │
06    ▼ 2-bosqich: response.json() — tanani o'qish va parse qilish
07data (haqiqiy JavaScript object)

💡 Key Idea
response.json() — Chapter 19'da o'rgangan JSON.parse()ga o'xshash ishni bajaradi, lekin u to'g'ridan-to'g'ri fetch javobining tanasi (odatda JSON formatidagi matn) bilan ishlaydi va Promise qaytaradi.

37.4 fetch() muvaffaqiyatsizlikni qanday belgilaydi

⚠️ Qiyin mavzu: fetch() 404/500 xatoliklarini "xatolik" deb hisoblamaydi!

Simple Explanation

Bu — fetch()ning eng ko'p chalkashtiriladigan xususiyati: fetch() faqat tarmoq butunlay ishlamay qolganda (masalan, internet yo'q) catchga o'tadi. Agar server 404 (topilmadi) yoki 500 (server xatosi) qaytarsa, fetch() buni hali ham "muvaffaqiyatli" so'rov deb hisoblaydi!

Muammoli misol

script.js
JavaScriptNusxalash
01async function getUser(id) {
02    let response = await fetch(`/api/users/${id}`);
03    let data = await response.json();
04    return data; // Agar server 404 qaytarsa ham, bu yerga yetib boradi!
05}

Yechim — response.ok ni tekshirish

script.js
JavaScriptNusxalash
01async function getUser(id) {
02    let response = await fetch(`/api/users/${id}`);
03 
04    if (!response.ok) {
05        throw new Error(`Server xatoligi: ${response.status}`);
06    }
07 
08    let data = await response.json();
09    return data;
10}

Jadval — response'ning muhim propertylari

⚠️ Common Mistake
response.okni tekshirishni unutish — production kodida eng ko'p uchraydigan fetch xatolaridan biri. Server xatolik qaytarganda ham, kod "muvaffaqiyatli" deb davom etib, keyinchalik tushunarsiz xatoliklarga olib keladi.

37.5 POST so'rov yuborish

Simple Explanation

Serverga ma'lumot yuborish uchun, fetch()ga qo'shimcha sozlamalar (options) berish kerak.

Example

script.js
JavaScriptNusxalash
01async function createUser(userData) {
02    let response = await fetch("[https://api.example.com/users](https://api.example.com/users)", {
03        method: "POST",
04        headers: {
05            "Content-Type": "application/json"
06        },
07        body: JSON.stringify(userData)
08    });
09 
10    if (!response.ok) {
11        throw new Error("Yaratishda xatolik: " + response.status);
12    }
13 
14    return await response.json();
15}
16 
17createUser({ name: "Ali", age: 25 })
18    .then(newUser => console.log("Yaratildi: ", newUser))
19    .catch(error => console.log(error.message));

How It Works

1. method: "POST" — bu GET emas, POST so'rovi ekanini bildiradi.
2. headers — serverga yuborilayotgan ma'lumot formati JSON ekanini "aytadi".
3. body: JSON.stringify(userData) — Chapter 19'da o'rgangan JSON.stringify() orqali, JavaScript object'i serverga tushunarli JSON string formatiga aylantiriladi.

🔗 Connection
Bu misol — Chapter 18 (Error Handling), Chapter 19 (JSON), Chapter 27-28 (Promise/async-await) — barcha oldingi bilimlarni birlashtirgan holda, real dasturlashda qanday ishlatilishini ko'rsatadi.

37.6 Bir nechta so'rovni birgalikda yuborish

Example — Promise.all() bilan (Chapter 27.6'dan)

script.js
JavaScriptNusxalash
01async function loadDashboard(userId) {
02    try {
03        let [user, posts, notifications] = await Promise.all([
04            fetch(`/api/users/${userId}`).then(r => r.json()),
05            fetch(`/api/users/${userId}/posts`).then(r => r.json()),
06            fetch(`/api/users/${userId}/notifications`).then(r => r.json())
07        ]);
08 
09        console.log(user, posts, notifications);
10    } catch (error) {
11        console.log("Yuklashda xatolik: " + error.message);
12    }
13}

Explanation

Bu — Chapter 28.3'da o'rgangan "mustaqil amallarni parallel bajarish" tamoyilining to'g'ridan-to'g'ri amaliy qo'llanilishi: uchta so'rov bir-biriga bog'liq bo'lmagani uchun, ular ketma-ket emas, parallel yuboriladi — bu sahifa yuklanish tezligini sezilarli oshiradi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
fetch("https://jsonplaceholder.typicode.com/users/1") orqali ma'lumot oling va uni .then() zanjiri bilan konsolga chiqaring.
Required Concepts:

• fetch(), .then()
  Hint:
  .then(response => response.json()).then(data => console.log(data))

🟡 Exercise 2 — Medium

Task:
Yuqoridagi so'rovni async/await va try/catch bilan qayta yozing, response.okni tekshirib, xato bo'lsa mos xabar chiqaring.
Required Concepts:

• async/await
• response.ok
  Hint:
  Chapter 37.4'dagi misolga o'xshab yozing.

🔴 Exercise 3 — Hard

Task:
Promise.all() yordamida ikkita mustaqil fetch so'rovini (masalan, ikkita turli foydalanuvchi ma'lumotini) bir vaqtda yuboring va natijalarni birgalikda chiqaring. Xatolikni to'g'ri boshqaring.
Required Concepts:

• Promise.all() + fetch
• try/catch
  Hint:
  Chapter 37.6'dagi misolga o'xshab yozing.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01async function getData() {
02    let response = await fetch("[https://api.example.com/nonexistent](https://api.example.com/nonexistent)");
03 
04    console.log(response.ok);
05    console.log(response.status);
06}

Agar nonexistent manzili mavjud bo'lmasa (server 404 qaytarsa), nima bo'ladi?

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> false 404

Why?
fetch() — server javob berayotgan ekan (garchi 404 bilan bo'lsa ham), bu tarmoq xatosi emas, shuning uchun catchga tushmaydi. response.ok — false bo'ladi (chunki 404 — 200-299 oralig'ida emas), response.status esa aniq 404 qiymatini ko'rsatadi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor — dasturchi 404 xatoligini kutmoqda, lekin kod buni "sezmayapti":

script.js
JavaScriptNusxalash
01async function getUser(id) {
02    let response = await fetch(`/api/users/${id}`);
03    let data = await response.json();
04    return data;
05}
06 
07getUser(99999) // mavjud bo'lmagan ID
08    .then(data => console.log("Foydalanuvchi: ", data))
09    .catch(error => console.log("Xatolik: ", error));
10// "Xatolik" hech qachon chiqmaydi, garchi 404 qaytarilsa ham

Your Task:

• Nima uchun .catch() ishga tushmayotganini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: fetch() — 404 statusini "muvaffaqiyatli tarmoq javobi" deb hisoblaydi, shuning uchun Promise reject bo'lmaydi, va .catch() ishga tushmaydi. Kod response.json()ni chaqirishga urinadi, garchi server aslida xatolik qaytargan bo'lsa ham.

Yechim:

script.js
JavaScriptNusxalash
01async function getUser(id) {
02    let response = await fetch(`/api/users/${id}`);
03 
04    if (!response.ok) {
05        throw new Error(`Foydalanuvchi topilmadi: ${response.status}`);
06    }
07 
08    let data = await response.json();
09    return data;
10}
11 
12getUser(99999)
13    .then(data => console.log("Foydalanuvchi: ", data))
14    .catch(error => console.log("Xatolik: ", error.message));
15// Endi "Xatolik: Foydalanuvchi topilmadi: 404" to'g'ri chiqadi

</details>

📌 Chapter Summary

• AJAX — sahifani qayta yuklamasdan serverdan ma'lumot olish texnikasi.
• fetch() — Promise asosidagi, zamonaviy AJAX vositasi.
• fetch() javobini olish — ikki bosqichli: avval fetch(), keyin response.json().
• fetch() — faqat tarmoq xatosida reject bo'ladi, 404/500ni avtomatik xato deb hisoblamaydi.
• response.ok/response.status — server javobini to'g'ri tekshirish uchun ishlatiladi.

🎯 Key Takeaways

• fetch()dan olingan javobni ishlatishdan oldin, har doim response.okni tekshiring.
• Ma'lumotni JSON'ga aylantirish uchun response.json()ni ham awaitlash (yoki .then()) kerak.
• POST so'rovlar uchun method, headers, body sozlamalarini to'g'ri belgilash zarur.
• Mustaqil so'rovlarni Promise.all() bilan parallel yuborish — sahifa tezligini oshiradi.
• Bu bob — kitobning Chapter 14 (HOF), 18 (Error Handling), 19 (JSON), 27-28 (Promise/async-await) bilimlarini birlashtirgan yakuniy amaliy qo'llanilishi.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01// GET
02async function getData(url) {
03    let response = await fetch(url);
04    if (!response.ok) throw new Error(response.status);
05    return await response.json();
06}
07 
08// POST
09async function postData(url, data) {
10    let response = await fetch(url, {
11        method: "POST",
12        headers: { "Content-Type": "application/json" },
13        body: JSON.stringify(data)
14    });
15    if (!response.ok) throw new Error(response.status);
16    return await response.json();
17}

---