Async asoslari

Async nima uchun mavjud

Ba'zi ishlar vaqt talab qiladi: serverdan ma'lumot olish, fayl o'qish, taymerni kutish. Agar JavaScript bularni to'xtab kutib tursa, butun sahifa muzlab qolardi. Buning o'rniga, u sekin ishni boshlab yuboradi, ishlashda davom etadi va natija bilan keyinroq shug'ullanadi. Ana shu "keyinroq shug'ullanish" asinxron koddir.

Callback'lar — dastlabki yondashuv

Eng qadimiy pattern — ish tugagach chaqiriladigan funksiyani uzatishdir. setTimeout eng oddiy misol:

console.log("start");
 
setTimeout(() => {
  console.log("2 seconds later");
}, 2000);
 
console.log("end");
 
// Output: start, end, 2 seconds later

E'tibor bering, "end" timeout callback'idan oldin chop etiladi — kod kutmadi. setTimeoutga uzatgan funksiyangiz — bu callback.

Callback'lar ishlaydi, lekin bir nechta async qadamlarni ustma-ust qo'yish o'qish qiyin bo'lgan chuqur ichma-ich joylashgan "callback hell"ga olib keladi. Promise'lar buni tuzatdi.

Promise'lar

Promise hali tayyor bo'lmagan qiymatni ifodalaydi. U uchta holatdan birida bo'ladi: pending, so'ngra yo fulfilled (muvaffaqiyat) yoki rejected (xato). Siz muvaffaqiyat uchun .then(), xatolar uchun .catch() bilan reaksiya bildirasiz:

fetch("/api/user")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("Failed:", error));

Har bir .then oldingi qadamning natijasini oladi va kutiladigan keyingi narsani qaytarishi mumkin. Bu zanjirlash ichma-ich joylashish o'rniga yuqoridan pastga qarab o'qiladi.

async / await — zamonaviy uslub

async/await — bu promise'ga asoslangan kodni oddiy, qadamma-qadam kod kabi yozishga imkon beradigan sintaksis. Aynan buni siz eng ko'p ishlatasiz.

async function loadUser() {
  const response = await fetch("/api/user");
  const data = await response.json();
  console.log(data);
}

• Funksiyani async deb belgilang.
• Promise qaytaradigan har qanday narsadan oldin await qo'ying. Ijro shu yerda u hal bo'lguncha to'xtaydi, so'ngra natija bilan davom etadi.

Bu sinxron kod kabi o'qiladi, lekin ostida u baribir non-blocking — u kutayotganda ilovangizning qolgan qismi ishlashda davom etadi.

try/catch bilan xatolarni boshqarish

await bilan siz nosozliklarni oddiy try/catch bloki yordamida ushlaysiz:

async function loadUser() {
  try {
    const response = await fetch("/api/user");
    const data = await response.json();
    return data;
  } catch (error) {
    console.log("Something went wrong:", error);
  }
}

Birinchi marta ma'lumot olish

fetch — bu API'ni chaqirishning ichki o'rnatilgan usuli. U promise qaytaradi va odatda foydalanish mumkin bo'lgan ma'lumotni olish uchun javobga .json() qo'llaysiz:

async function getPosts() {
  const res = await fetch("https://api.example.com/posts");
  if (!res.ok) {
    throw new Error("Request failed: " + res.status);
  }
  const posts = await res.json();
  return posts;
}

Boshlang'ichlar duch keladigan ikkita nozik jihat:

• fetch 404 yoki 500'da rad etmaydi — res.okni o'zingiz tekshirishingiz kerak.
• Javob tanasi ham async, shuning uchun res.json()ga o'zining alohida awaiti kerak.

Intervyu maslahatlari

• Async'ni "kutayotganda muzlab qolma" deb tushuntiring — sekin ishni boshlab yuboring, natijani keyinroq boshqaring.
• Promise'ning uchta holatini biling: pending → fulfilled yoki rejected.
• try/catch bilan async/awaitni afzal ko'ring; uning ostida promise'lar yotadi.
• fetchga ikkita await kerakligini (javob, so'ngra .json()) va HTTP xatolarida throw qilmasligini eslang — res.okni tekshiring.