Asinxron kodni debug qilish

Asinxron nosozliklar

Asinxron kodni debug qilish sinxron kodga qaraganda qiyinroq bo‘lishi mumkin.

Kod ko‘pincha kutilganidan kechroq bajariladi va bir vaqtning o‘zida bir nechta asinxron operatsiyalar bajarilishi mumkin.

Ushbu bobda asinxron JavaScript-da keng tarqalgan muammolarni topish va tuzatish usullari ko‘rsatilgan.

Bu bobda fetch(), promise’lar va async/await’ni debug qilishning amaliy usullari ko‘rsatilgan.

Async debug kodning to‘xtash joyini topishdir.

So‘ng u nima uchun to‘xtaganini aniqlash.

Hodisalarni loglash

Asinxron kodni debug qilishning eng oson yo‘li bu sodir bo‘lganda jurnalga kirishdir.

console.log()’dan foydalaning

console.log("Before fetch");

const promise = fetch("fetch.txt");

console.log("After fetch");

O‘zingiz sinab ko‘ring »

Ko‘rsatish funksiyasidan foydalaning

myDisplayer("Before fetch");

const promise = fetch("fetch.txt");

myDisplayer("After fetch");

O‘zingiz sinab ko‘ring »

Eslatma

console.log() ko‘pincha Promise’ning joriy holatini quyidagicha ko‘rsatadi:

<pending>
<fulfilled>
<rejected>

Ushbu ma’lumot debug vositasi tomonidan taqdim etiladi. Bu JavaScript tilining bir qismi emas.

Nega JavaScript ham shunday qila olmaydi?

Quyidagi kabi standart xususiyatlar yo‘q:

promise.state
promise.status

Ular shunchaki mavjud emas.

Promise’ning state (holat) qismi uning ommaviy (public) API’siga kirmaydi.

Asinxron xatolar ko‘rinmas bo‘lishi mumkin

Asinxron kod ko‘pincha funksiyangiz allaqachon qiymat qaytargandan keyin xatoga uchraydi.

Shu sababli go‘yo hech narsa sodir bo‘lmagandek tuyuladi.

Misol

// Async function to download a file
async function loadText(file) {
const response = await fetch(file);
myDisplayer(response);
}

myDisplayer("Start");

// Try to load a missing file
loadText("missing.txt");

myDisplayer("Done");

O‘zingiz sinab ko‘ring »

Done xabari loadText() muvaffaqiyatsiz tugasa ham chiqariladi.

Buning sababi — fetch() keyinroq muvaffaqiyatsiz tugaydi.

1-qoida: xatolarni doimo qayta ishlang

Unhandled promise rejections confuse beginners.

Xatolarni erta va aniq qayta ishlang.

Promise’larni qayta ishlash uchun try...catch’dan foydalaning.

Misol

// Async function to download a file
async function loadData(file) {
  try {
    let response = await fetch(file);
    let data = await response.json()
    myDisplayer(JSON.stringify(data));
  } catch (error) {
    myDisplayer(error);
  }
}

// Call async function
loadData("customer.json")

O‘zingiz sinab ko‘ring »

Eslatma

Yuqoridagi kod tarmoq xatolari va JSON tahlil (parsing) xatolarini ushlaydi.

U 404 (fayl topilmadi) kabi HTTP xatolarini ushlamaydi.

2-qoida: response.ok’ni tekshiring

Fetch 404 kabi HTTP xatolarida rad etilmaydi.

You must check response.ok.

Misol

// Async function to download a file
async function loadData(file) {
  try {
    let response = await fetch(file);

    if (!response.ok) {
      console.log("HTTP Error:", response.status);
      return;
    }

    let data = await response.json()
    myDisplayer(JSON.stringify(data));
  } catch (error) {
    myDisplayer(error);
  }
}

O‘zingiz sinab ko‘ring »

Yuqoridagi kod HTTP xatolarini tarmoq xatolaridan ajratib turadi.

Ko‘pgina xatolar JavaScript xatosi emas.

Ular URL va server javob xatoliklari.

3-qoida: kerakli narsalarni log qiling

Promise-ni ro‘yxatga olish ma’lumotlarni jurnalga yozish bilan bir xil emas.

Avval javob va holatni log qiling.

Misol

// Async function to download a file
async function loadData(file) {
  let response = await fetch(file);
  myDisplayer(response.status);
  myDisplayer(response.headers.get("content-type"));
}

O‘zingiz sinab ko‘ring »

Yuqoridagi kod server kutgan narsangizni qaytarganligini bildiradi.

Keng tarqalgan javob sarlavhalari

Header	Tavsif
Content-Type	Javob turi (text/html, application/json va h.k.)
Content-Length	Baytlardagi javob hajmi
Cache-Control	Javob qanday keshlanishi mumkinligi
Expires	Keshlangan javob muddati qachon tugashi
Last-Modified	Resurs oxirgi marta qachon o‘zgartirilgan
ETag	Keshlash uchun ishlatiladigan resurs versiyasi identifikatori
Date	Server javobni yaratgan vaqt
Server	Veb-server haqidagi ma’lumot
Access-Control-Allow-Origin	CORS policy
Content-Encoding	Ishlatilgan siqish usuli (gzip, br va h.k.)

Brauzerning Network yorlig‘idan foydalaning

Tarmoq yorlig‘i - bu brauzeringizning dasturchi vositalaridagi panel.

Bu sizning veb-sahifangiz tomonidan qilingan barcha tarmoq so‘rovlarini ko‘rsatadi.

Bu asinxron JavaScript’ni debug qilish uchun eng foydali vositalardan biri, chunki u kodingiz fetch()’dan foydalanganda, rasmlarni yuklaganda, JSON’ni yuklab olganda yoki serverga ma’lumot yuborganda aynan nima sodir bo‘layotganini ko‘rish imkonini beradi.

Dasturchi vositalaridan qanday foydalanish kerak:

Veb-saytni oching
Press F12, or
Sahifada sichqonchaning o‘ng tugmasini bosing va Inspect’ni tanlang.
So‘ng Network yorlig‘ini tanlang.
Sahifani yangilang

Tarmoq yorlig‘i ilovangiz tomonidan qilingan har bir so‘rovni ko‘rsatadi:

Qaysi fayllar so‘ralgan
Whether they succeeded
HTTP status codes
Download times

Misol

Faraz qilaylik, kodingiz quyidagicha:

const response = await fetch("customer.json");

Ba’zi mumkin bo‘lgan natijalar

Nomi	holati	Turi	Size	Time
customer.json	200	fetch	548 Bytes	134ms
customer.json	404	fetch
customer.json	Failed

Bu fetch() nima uchun muvaffaqiyatsiz tugaganini taxmin qilishga urinishdan ancha oson.

To‘xtash nuqtalaridan (breakpoint) foydalaning

Zamonaviy brauzerlar JavaScript bajarilishini to‘xtatib turish imkonini beradi.

Amalga oshirish to‘xtatilganda, siz o‘zgaruvchilar, Promiselar va chaqiruvlar stekini (Call Stack) tekshirishingiz mumkin.

Example

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

Bajarish tuzatuvchiga yetganda, DevTools avtomatik ravishda pauza qiladi.

await’dagi to‘xtash nuqtalari

await satrlarda to‘xtash nuqtalarini o‘rnatishingiz mumkin.

Bu asenkron qadamlardan oldin va keyin qiymatlarni tekshirish imkonini beradi.

Misol

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

Birinchi await qatoriga to‘xtash nuqtasi qo‘ying.

Step over and inspect response.

Keng tarqalgan asinxron xatolar

await ni unutish boshlovchilarning eng keng tarqalgan xatosidir.

Misol

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

Bu JSON emas, balki Promise-ni qayd qiladi.

Misol

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

Promise zanjirlarini debug qilish

Promiselar zanjirning istalgan joyida barbod bo‘lishi mumkin.

Qaerda bajarilmasligini aniqlash uchun qadamlar orasiga jurnallarni qo‘shing.

Misol

fetch("data.json")
.then(function(response) {
  console.log("Got response");
  return response.json();
})
.then(function(data) {
  console.log("Got data");
  console.log(data);
})
.catch(function(error) {
  console.log("Failed");
  console.log(error);
});

Bu qaysi qadam muvaffaqiyatsiz ekanligini ko‘rsatadi.

Bajarilish tartibini tushuning

Misol

myDisplayer("Start");

setTimeout(function() {myDisplayer("Timer")},1000);

myDisplayer("End");

Natija

Start
End
Timer

O‘zingiz sinab ko‘ring »

Parallel amallarni debug qilish

Natija

const customer = fetch("customer.json");
const products = fetch("products.json");
const news = fetch("news.json");

Uchala so‘rov ham darhol boshlanadi
Brauzer ularni istalgan tartibda tugatishi mumkin
Bu normal holat

response.ok’ni tekshiring

Ko‘plab yangi boshlovchilar buni unutadi.

Wrong:

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

const text = await response.text();

Better:

if (!response.ok) {
console.log(response.status);
}

Promise rad etilishlarini qayta ishlang

Misol

fetch("missing.txt")
.then(function(response){
return response.text();
})
.catch(function(err){
console.log(err);

});

Quyidagilar orasidagi farqni tushuntiring:

Rejected Promise
HTTP error

finally()’dan foydalaning

Misol

showSpinner();
try {
...
}
finally {
hideSpinner();
}

Tozalash kodi finally() ichida bo‘lishi kerak.

Debug qilish bo‘yicha qo‘llanma

Add try...catch around awaited code.
Check both response.ok and response.status.
await qatorlarida to‘xtash nuqtalaridan foydalaning.
Network yorlig‘idan foydalaning.

Debug qilish uchun nazorat ro‘yxati

Promise bajarildimi (resolve)?
Did you forget await?
Did you check response.ok?
Sizning kodingiz async funksiyasi ichidami?
So‘rov "Tarmoq" yorlig‘ida paydo bo‘ldimi?
Konsolda xatolar haqida xabar berilganmi?
Voqealar siklini bloklayapsizmi?

Xulosa

Bajarilishni kuzatish uchun console.log()’dan foydalaning.
Inspect Promise objects while debugging.
Rad etilgan Promise’larni qayta ishlash uchun try...catch’dan foydalaning.
So‘rovlarni tekshirish uchun brauzerning Network yorlig‘idan foydalaning.
O‘zgaruvchilar va bajarilishni tekshirish uchun to‘xtash nuqtalarini qo‘ying.
Check response.ok after every fetch().

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish