Asinxron koddagi xatolar

Asynchronous programming introduces new concepts:

Callbacks

Promises

async/await

Ko‘pgina boshlang‘ich xatolar asinxron kod har doim ham siz kutgan tartibda bajarilmasligi sababli sodir bo‘ladi.

Ushbu bobda eng ko‘p uchraydigan xatolar va ulardan qanday qochish kerakligi tasvirlangan.

1-xato: await’ni unutish

fetch() metodi Promise qaytaradi.

Agar kutishni unutib qo‘ysangiz, yuklab olingan ma’lumotlar o‘rniga siz Promise olasiz.

Wrong

const response = fetch("demo.txt");

To‘g‘ri

const response = await fetch("demo.txt");

2: await’ni async funksiyadan tashqarida ishlatish

await kalit so‘zidan faqat async funksiyasi ichida yoki JavaScript modulining yuqori darajasida foydalanish mumkin.

Wrong

function load() {
let response = await fetch("demo.txt");
}

To‘g‘ri

async function load() {
let response = await fetch("demo.txt");
}

3: fetch() HTTP xatolarida muvaffaqiyatsiz tugaydi deb o‘ylash

fetch() qaytargan Promise server javob berganda bajariladi (fulfilled).

404 topilmadi kabi HTTP xatosi Promise-ni rad etmaydi.

Always check response.ok.

To‘g‘ri

const response = await fetch("demo.txt");
if (!response.ok) {
throw new Error(response.status);
}

4: Callback-larni o‘ylash asinxrondir

Callback — boshqa funksiyaga uzatilgan oddiy funksiya.

Callback darhol yoki keyinroq chaqirilishi mumkin.

callback-ning o‘zi kodni asinxron qilmaydi.

Synchronous

numbers.forEach(show);

Asynchronous

setTimeout(show,1000);

Asinxron xatti-harakat callback’dan emas, setTimeout()’dan kelib chiqadi.

5: Voqealar davrini bloklash

Uzoq davom etadigan JavaScript taymerlar, foydalanuvchi hodisalari va ekran yangilanishlarini bloklaydi.

Misol

function wait() {
let i = 4e9;
while(--i > 0);
}

6: ekran darhol yangilanishini kutish

DOM-ni o‘zgartirish har doim ham ekranni darhol yangilamaydi.

Brauzer odatda sahifani qayta bo‘yashdan oldin joriy JavaScript vazifasi tugashini kutadi.

Misol

myDisplayer("Start");
wait();
myDisplayer("Done");

Bilasizmi?

innerHTML bilan elementni o‘zgartirish DOMni darhol yangilaydi, lekin brauzer odatda ekranni qayta bo‘yashdan oldin joriy JavaScript vazifasi tugashini kutadi.

Shuning uchun uzoq muddatli JavaScript DOM allaqachon o‘zgargan bo‘lsa ham, sahifani muzlatib qo‘yishi mumkin.

7: mustaqil vazifalarni birin-ketin bajarish

Agar amallar mustaqil bo‘lsa, ularni birgalikda boshlang.

Wrong

await fetch("a.json");
await fetch("b.json");
await fetch("c.json");

To‘g‘ri

await Promise.all([
  fetch("a.json"),
  fetch("b.json"),
  fetch("c.json")
]);

8: forEach() ichida await’dan foydalanish

forEach() usuli asinxron Callback-larni kutmaydi.

Wrong

files.forEach(async function(file){
await upload(file);
});

To‘g‘ri

for (const file of files) {
await upload(file);
}

9: xatolarni qayta ishlashni unutish

Promise’lar rad etilishi mumkin.

Always handle possible errors.

To‘g‘ri

try {
const response = await fetch(url);
}
catch(err) {
console.log(err);
}

10: setTimeout(..., 0) darhol ishlaydi deb o‘ylash

Nol millisekundlik taymaut "imkon qadar tezroq bajar" degan ma’noni anglatadi.

Callback hali ham joriy JavaScript vazifasi tugashini kutadi.

Misol

console.log("A");
setTimeout(() => console.log("B"),0);
console.log("C");

Checklist

Before writing asynchronous code, ask yourself:

Did I forget await?
Did I check response.ok?
Bu vazifalar parallel ravishda bajarilishi mumkinmi?
Bu voqea siklini bloklashi mumkinmi?
Am I handling rejected Promises?
Menga haqiqatan ham callback kerakmi?

Xulosa

Asenkron API nimani qaytarishini tushuning.
fetch() Promise qaytarishini yodda tuting.
Use await correctly.
HTTP xatolarini tekshiring.
Voqealar siklini bloklamang.
Mustaqil vazifalarni parallel bajaring.
Always handle errors.

Keyingi bob

Keyingi sahifada professional kabi asinxron kodni qanday tuzatish kerakligi ko‘rsatilgan.

Siz to‘xtash nuqtalari, ro‘yxatga olish naqshlari va nima uchun asinxron xatolar ko‘rinmasligini bilib olasiz.

Debugging Asynchronous JavaScript

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish