MohirDox

Ko'rinishi

JavaScript Asinxron Callbacklar ​

"Men sizga keyinroq qaytib qo'ng'iroq qilaman!" — Callback shunday prinsipda ishlaydigan funksiyadir.

Callback nima?

Callback — bu boshqa funksiyaga argument sifatida uzatilgan va u tugagach bajarilishi kutilayotgan funksiyadir. Bu usul JavaScript-da asinxron natijalarni boshqarishning eng birinchi (eski) yechimi bo'lgan.

Nima uchun Callback kerak? ​

Asinxron kodlar biroz kechroq tugaydi. Shuning uchun natijani darhol qaytarib bo'lmaydi.

Misol: Vaqt muammosi ​

js
let result

setTimeout(function () {
  result = 5
}, 1000)

// Natija bu yerda hali tayyor bo'lmagan bo'ladi
console.log(result) // undefined

Callback g'oyasi ​

Muammoning yechimi — kodni natija tayyor bo'lgandan keyin ishga tushirishdir. Buning uchun biz JavaScript-ga "ishni bitirganingda ushbu funksiyani chaqir" deb ayta olamiz.

Misol: To'g'ri yondashuv ​

js
function displayResult(value) {
  console.log('Natija: ' + value)
}

function calculate(num1, num2, myCallback) {
  let sum = num1 + num2
  // Hisoblash tugadi, endi callback-ni chaqiramiz:
  myCallback(sum)
}

calculate(5, 5, displayResult)

Asinxron Callback-lar va Xatolarni boshqarish ​

Asinxron kodlar ishlamay qolishi mumkin (masalan, internet uzilishi). Callbacklar odatda "xato birinchi" (error-first) uslubida yoziladi:

Misol ​

js
function getData(callback) {
  let success = true

  if (success) {
    callback(null, 'Muvaffaqiyatli!') // Xato yo'q (null)
  } else {
    callback('Xatolik yuz berdi', null) // Xato bor
  }
}

getData(function (error, data) {
  if (error) {
    console.error(error)
    return
  }
  console.log(data)
})

Callback-larning kamchiliklari ​

Callbacklar juda muhim, ammo ularni bir-birining ichiga juda ko'p darajada yozish (nesting) kodni o'qishga o'та qiyin qilib qo'yadi. Dasturchilar buni "Callback Hell" (Callback jahannami) deb atashadi.

Misol (Callback Hell) ​

js
step1(function (r1) {
  step2(r1, function (r2) {
    step3(r2, function (r3) {
      console.log(r3)
    })
  })
})

Debug qilish qiyinligi

Bunday "piramida" ko'rinishidagi kodlarda xatoning qayerda ekanligini topish va uni tuzatish juda murakkab jarayonga aylanadi.

Callback muqobillari ​

Zamonaviy JavaScript (ES6+) asinxron callbacklar o'rniga ancha qulay va tartibliroq bo'lgan Promislar va Async/Await sintaksisini taqdim etadi. Keyingi bo'limlarda aynan shu texnologiyalarni o'rganamiz.

Qachon Callback ishlatish kerak?

Array metodlarida (masalan, map(), filter()) va oddiy hodisalarda (addEventListener) callbacklar hali ham eng yaxshi va asosiy usul hisoblanadi.