Async/await

JavaScript async va await

"async and await make promises easier"

Asinx va await kalit so‘zlari Promise-ga asoslangan kodni o‘qishni osonlashtiradi.

They let asynchronous code look much like ordinary synchronous code.

Ichki tomondan async va await baribir Promise’lardan foydalanadi.

async kalit so‘zi

Funksiya oldidagi async kalit so‘zi funksiyaning promise qaytarishini ta’minlaydi.

Oddiy qiymatni qaytarsangiz ham, bu to‘g‘ri.

Agar funksiya qiymatni qaytarsa, JavaScript avtomatik ravishda ushbu qiymatni Promise-ga o‘tkazadi.

Misol

// Create an async function
async function hello() {
return "Hello World!";
}

// Call the async function
hello().then(function(value) {
myDisplayer(value);
});

O‘zingiz sinab ko‘ring »

Kutish kalit so‘zi

await Kalit so‘z Promise-ning bajarilishini kutmoqda.

U faqat async funksiyasi ichida yoki JavaScript modulining yuqori darajasida ishlatilishi mumkin.

async funksiyasi kutilayotgan vaqtda dasturning qolgan qismi ishlashni davom ettirishi mumkin.

Misol

// Create an async function
async function getData() {
  let response = await fetch("fetch.txt");
  let text = await response.text();
  myDisplayer(text);
}

// Call the async function
getData();

O‘zingiz sinab ko‘ring »

Kutish paytida nima bo‘ladi?

await kalit so‘zi faqat joriy async funksiyani to‘xtatib turadi.

U JavaScript’ni to‘xtatmaydi.

Boshqa kodlar, taymerlar, hodisalar va foydalanuvchi o‘zaro aloqalari va’da kutilayotgan vaqtda davom etishi mumkin.

Misol

myDisplayer("Start");

// Create an async function
async function getData() {
await fetch("fetch.txt");
myDisplayer("Done");
}

// Call the async function
getData();

myDisplayer("Continue");

Natija:

Start
Continue
Done

O‘zingiz sinab ko‘ring »

Eslatma

JavaScript kutmaydi.

async funksiya kutadi.

Promise va await’ni solishtirish

Promise versiyasi

// Fetch function
fetch("fetch.txt")
.then(function(response) {
return response.text();
})
.then(function(text) {
myDisplayer(text);
});

O‘zingiz sinab ko‘ring »

async/await

// Asyn function
async function getData() {
  let response = await fetch("fetch.txt");
  let text = await response.text();
  myDisplayer(text);
}
// Call async function
getData();

O‘zingiz sinab ko‘ring »

Eslatma

Ikkala misol ham aynan bir xil ishni bajaradi.

Ikkinchi misolni o‘qish osonroq, chunki so‘zlar bajarilish tartibida paydo bo‘ladi.

Xatolarni qayta ishlash

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

Misol

async function getData() {
  try {
    let response = await fetch("fetch.txt");
    let text = await response.text();
    myDisplayer(text);
  } catch(err) {
    myDisplayer(err);
  }
}

O‘zingiz sinab ko‘ring »

Eslatma

Kutilgan (await qilingan) promise’lardagi xatolar oddiy xatolar kabi ushlanadi.

Bir nechta await

Ko‘plab yangi boshlovchilar await’lar ketma-ket bajarilishini tushunmaydi.

Misol

let a = await fetch("a.txt");
let b = await fetch("b.txt");
let c = await fetch("c.txt");

O‘zingiz sinab ko‘ring »

Har bir await oldingi operatsiya tugashini kutadi.

Agar operatsiyalar bir-biriga bog‘liq bo‘lmasa, ularni birin-ketin bajarish kerak bo‘lgandan sekinroq bo‘lishi mumkin.

Keyingi bobda asinxron operatsiyalarni parallel ravishda qanday bajarish kerakligi tushuntiriladi.

Xulosa

async functions always return Promises.
await Promise yakunlanishini kutadi.
await joriy async funksiyasini pauza qiladi, JavaScript-ning hammasi emas.
try...catch handles Promise errors.
async va await Promise’ga asoslangan kodni o‘qishni osonlashtiradi.

Qo‘shimcha misollar

Misol

async function myFunction() {
return "Hello";
}

Xuddi shunday:

function myFunction() {
return Promise.resolve("Hello");
}

Natija then() bilan ishlanadi, chunki bu Promise:

myFunction().then(
function(value) { /* code if successful */ },
function(value) { /* code if some error */ }
);

Misol

async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(value) {myDisplayer(value);}
);

O‘zingiz sinab ko‘ring »

Yoki oddiyroq, chunki siz normal qiymatni kutmoqdasiz (xato emas, oddiy javob):

Misol

async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);

O‘zingiz sinab ko‘ring »

Nima uchun asinxron va kutish mavjud

Promise zanjirlari uzun bo‘lib ketishi mumkin.

async va await joylashtirishni kamaytirish va o‘qishni yaxshilash uchun yaratilgan.

Promise’lar misoli

// Three functions to run in steps
function step1() {
  return Promise.resolve("A");
}
function step2(value) {
  return Promise.resolve(value + "B");
}
function step3(value) {
  return Promise.resolve(value + "C");
}

// Run the three functions in steps
step1()
.then(function(value) {
  return step2(value);
})
.then(function(value) {
  return step3(value);
})
.then(function(value) {
  myDisplayer(value);
});

O‘zingiz sinab ko‘ring »

async va await bilan bir xil oqimni o‘qish osonroq.

Misol

// Function to run the three functions in steps
async function run() {
  let v1 = await step1();
  let v2 = await step2(v1);
  let v3 = await step3(v2);
  myDisplayer(v3);
}

run();

O‘zingiz sinab ko‘ring »

Boshlanuvchilar uchun keng tarqalgan xatolar

await’ni async funksiyadan tashqarida ishlatish xatoga olib keladi.

Forgetting try...catch can hide async errors.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish