MohirDox

Ko'rinishi

Asinxron JavaScriptni Debug qilish ​

Asinxron natijalar biroz kechroq sodir bo'lgani uchun, ulardagi xatolarni topish (debug) biroz qiyinroq bo'lishi mumkin. Ushbu bo'limda fetch(), promislar, async va await bilan ishlashda yuzaga keladigan muammolarni amaliy yechish yo'llarini ko'rib chiqamiz.

Asinxron Xatolar

Asinxron xatolar ko'pincha "ko'rinmas" bo'ladi, chunki kod asosiy oqim ishlashni tugatganidan keyin fonda xato berishi mumkin.

Nega asinxron xatolar "ko'rinmas" bo'ladi? ​

Asinxron kod ko'pincha sizning asosiy funksiyangiz ishini bitirib bo'lganidan so'nggina xato beradi. Bu esa xuddi hech narsa bo'lmagandek tuyulishiga olib keladi.

Misol ​

js
async function loadData() {
  let response = await fetch('mavjud-bolmagan-fayl.json')
  let data = await response.json()
  console.log(data)
}

loadData()
console.log('Tayyor!')

"Tayyor!" xabari fetch xato berishidan oldinroq ekranga chiqadi.

1-qoida: Har doim xatoni ushlang (catch) ​

Yangi boshlovchilar ko'pincha "unhandled promise rejection" (boshqarilmagan promis xatosi) bilan duch kelishadi. Buning oldini olish uchun har doim try...catch ishlating.

To'g'ri uslub: ​

js
async function loadData() {
  try {
    let response = await fetch('data.json')
    let data = await response.json()
    console.log(data)
  } catch (error) {
    console.log('Xato yuz berdi: ', error)
  }
}

2-qoida: response.ok ni tekshiring ​

Muhim: fetch() metodi 404 yoki 500 kabi HTTP xatolarida xato (reject) qaytarmaydi. U faqat tarmoq ulanishi bo'lmasa (internet yo'q bo'lsa) reject qiladi. Shuning uchun response.ok xususiyatini tekshirish shart.

Misol: ​

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

    if (!response.ok) {
      console.log('HTTP Xatosi:', response.status) // Masalan: 404
      return
    }

    let data = await response.json()
    console.log(data)
  } catch (error) {
    console.log("Tarmoq xatosi (Internet yo'q)")
  }
}

3-qoida: To'g'ri ma'lumotni log qiling ​

Dasturchilar ko'p hollarda hali Promise holatidagi obyektni console.log qilishadi. Natijani emas, status va headerni tekshirish ko'proq ma'lumot beradi.

Misol: ​

js
async function loadData() {
  let response = await fetch('data.json')
  console.log('Status: ', response.status)
  console.log('Content-Type: ', response.headers.get('content-type'))
}

Network (Tarmoq) panelidan foydalaning ​

Brauzerning Network paneli har bir so'rovni ko'rsatadi. Bu fetch muammolarini hal qilishning eng tez yo'lidir.

  • URL to'g'riligini tekshiring.
  • Status kodini ko'ring (200, 404, 500).
  • Serverdan kelgan javobni (Response body) ko'ring.

Tavsiya

Ko'p asinxron xatolar JavaScript-ning o'zida emas, balki noto'g'ri URL yoki server xatofida bo'ladi.

Await qatorlarida To'xtash nuqtalari (Breakpoints) ​

Siz await qatorlariga breakpoint qo'yishingiz mumkin. Bu asinxron qadamlar orasida qiymatlar qanday o'zgarayotganini ko'rish imkonini beradi.

Checklist ​

  • [ ] Konsolda qizil xatolar bormi?
  • [ ] try...catch ishlatilganmi?
  • [ ] response.ok tekshirilganmi?
  • [ ] Network panelida so'rov yo'qolib qolmadimi?
  • [ ] await kalit so'zi unutilmadimi? (Eng ko'p uchraydigan xato).
Keyingi qadam

Navbatdagi bo'limda Promislarning barcha metodlari haqida to'liq ma'lumotnoma bilan tanishamiz. Promislar ma'lumotnomasi »