JavaScript Fetch API (Asinxron)

fetch() metodi serverdan ma'lumotlarni so'rashning zamonaviy va asinxron usulidir.

---

fetch Promise qaytaradi

fetch() metodi ma'lumotni darhol qaytarmaydi. Buning o'rniga u Promise (va'da) qaytaradi, bu va'da so'rov muvaffaqiyatli bo'lganda Response (javob) obyektiga aylanadi.

Misol

fetch('data.json').then(function (response) {
  console.log(response)
})

Natijada JSON ma'lumotlari emas, balki Response obyekti chiqadi.

---

JSON ma'lumotlarini olish

JSON ma'lumotlarini o'qish uchun javob tanasini (body) tahlil qilish kerak. response.json() metodi ham promise qaytaradi.

Misol

fetch('data.json')
  .then(function (response) {
    return response.json()
  })
  .then(function (data) {
    console.log(data)
  })

---

fetch bilan async va await

async va await kalit so'zlari fetch kodini ancha o'qishli va tushunarli qiladi. Bu usul hozirgi kunda eng tavsiya etilganidir.

Misol

async function loadData() {
  let response = await fetch('data.json')
  let data = await response.json()
  console.log(data)
}

loadData()

---

Muhim: HTTP Xatolari

Yangi o'rganuvchilar orasida eng ko'p tarqalgan xato — fetch 404 yoki 500 xatolarida xato (reject) beradi deb o'ylash. Aslida, fetch faqat tarmoq bilan bog'liq muammolar (yo'q internet, noto'g'ri DNS) bo'lgandagina rad etiladi.

Diqqat!

404 yoki 500 javoblari rad etilgan promise hisoblanmaydi. Siz har doim response.ok xususiyatini tekshirishingiz kerak.

Misol

async function loadData() {
  let response = await fetch('missing.json')

  if (!response.ok) {
    console.log('HTTP xatosi:', response.status)
    return
  }

  let data = await response.json()
  console.log(data)
}

loadData()

---

Tarmoq Xatolari (Network Errors)

Tarmoq xatosi so'rovni oxirigacha yetkazish imkoni bo'lmaganda yuz beradi. Bunday xatolar promiseni rad etadi (reject).

Misol

async function loadData() {
  try {
    let response = await fetch('data.json')
    let data = await response.json()
    console.log(data)
  } catch (error) {
    console.log('Tarmoq xatosi yuz berdi')
  }
}

---

Callback va Fetch farqi

Eski XMLHttpRequest bilan callback-lardan foydalanish kodni murakkablashtirardi. fetch() promiselar yordamida kodni soddalashtiradi.

Callback (XMLHttpRequest)	Promise / async-await (Fetch)
Funksiyani uzatish kerak	Promisni kutish kerak (await)
Xatolar qo'lda boshqariladi	Tizimli xatolar bilan ishlash
Kod "chalkash" bo'lishi mumkin	Ketma-ket va tushunarli o'qiladi
Bosqichlarni bog'lash qiyin	Zanjirli bog'lash oson