JavaScript Fetch API

Fetch API haqida

fetch() — serverdan ma'lumot so'rashning zamonaviy usuli.

• fetch() asinxron ishlaydi va promise (va'da) qaytaradi.
• Zamonaviy ilovalar ma'lumot olish uchun asinxron koddan foydalanadi.
• fetch() bunga eng keng tarqalgan misoldir.

fetch Promise qaytaradi

fetch() funksiyasi ma'lumotning o'zini qaytarmaydi. U keyinchalik javobga (response) aylanadigan promise qaytaradi.

Misol

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

Natijada JSON ma'lumotlari emas, balki Response obyekti hosil bo'ladi.

---

JSON ma'lumotlarini olish

JSON ma'lumotlarini olish uchun javob tanasini (body) o'qishingiz kerak. response.json() ham promise qaytaradi.

Misol

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

Eslatma

Yuqoridagi kod promise-lar zanjiri (chain) hisoblanadi.

---

fetch bilan async va await

async va await kalit so'zlari fetch kodini o'qishni osonlashtiradi. Bu yangi boshlovchilar uchun tavsiya etilgan usuldir.

Misol

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

loadData()

---

Muhim: HTTP xatolari

Yangi boshlovchilar tez-tez 404 yoki 500 xatolarida fetch ishlamay qoladi (fail bo'ladi) deb o'ylashadi. Aslida fetch faqat tarmoq xatolari (network errors) bo'lgandagina rad etiladi (reject).

Diqqat!

404 javobi rad etilgan promise emas. 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 bajarib bo'lmaganda (masalan, internet uzilganda yoki DNS xatosi bo'lganda) yuz beradi. Tarmoq xatolari promiseni rad etadi.

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')
  }
}

---

fetch-da keng tarqalgan xatolar

Ehtiyot bo'ling!

await so'zini unutib qoldirish sizga ma'lumot o'rniga promiseni qaytaradi.

Misol (xato usul)

async function loadData() {
  let response = await fetch('data.json')
  let data = response.json() // await tushirib qoldirildi
  console.log(data) // Bu yerda promise chiqadi
}

---

Callback va Fetch farqi

Eski XMLHttpRequest bilan callback-lardan foydalanish ancha murakkab va uzun kod talab qiladi. fetch() esa promislar va async/await yordamida kodni sodda va tushunarli qiladi.

Callback	Promise / async-await
Keyinroq bajariladigan funksiyani uzatasiz	Promisni kutasiz (await)
Xatolar qo'lda boshqariladi	O'rnatilgan xatolar tizimi
Kod ichma-ich bo'lib ketishi mumkin	Normal kod kabi o'qiladi
Bosqichlarni bog'lash qiyin	Bosqichlarni bog'lash oson