Parallel asinxron amallar

await operatori davom etishdan oldin bitta Promise’ni kutadi.

Agar bir nechta asinxron operatsiyalar bir-biriga bog‘liq bo‘lmasa, ularni birma-bir kutish kerak bo‘lgandan sekinroq bo‘lishi mumkin.

Buning o‘rniga siz barcha operatsiyalarni bir vaqtning o‘zida boshlashingiz va ularni birgalikda kutishingiz mumkin.

Ketma-ket amallar

Har bir operatsiya oldingisiga bog‘liq bo‘lsa, bir nechtasini ishlating await operatorlar.

Misol

// async function to load data
async function loadData() {
  let response1 = await fetch("customer.json");
  let customer = await response1.json();

  let response2 = await fetch("products.json");
  let products = await response2.json();

  let text = "";
  text += JSON.stringify(customer);
  text += JSON.stringify(products);
}

// Call the async load function
loadData();

O‘zingiz sinab ko‘ring »

response.json()

response.json() — Fetch API’ning o‘rnatilgan metodi.

U xom HTTP javob oqimini o‘qiydi, JSON matnini tahlil qiladi va siz aslida kodingizda foydalanishingiz mumkin bo‘lgan tugallangan JavaScript obyekti yoki massivi sifatida hal qiladi.

Mustaqil amallar

Agar asinxron operatsiyalar mustaqil bo‘lsa, ular bir vaqtning o‘zida boshlanishi mumkin.

Bunga parallel bajariladigan vazifalar deyiladi.

1-misol

// async function to load data
async function loadData() {
  let customerPromise = fetch("customer.json");
  let productsPromise = fetch("products.json");

  let customer = await customerPromise;
  let products = await productsPromise;

  let text = "";
  text += JSON.stringify(customer);
  text += JSON.stringify(products);
}

// Call the async load function
loadData();

O‘zingiz sinab ko‘ring »

Uchala yuklab olish ham darhol boshlanadi.

await operatorlari faqat natijalar kerak bo‘lganda kutiladi.

2-misol

// async function to load data
async function loadData() {
  let customerPromise = fetch("customer.json");
  let productsPromise = fetch("products.json");

  let customer = await customerPromise;
  let products = await productsPromise;

  let text =
  "<h3>Customer</h3>" +
  customer.name + ", " +
  customer.city +

  "<h3>Products</h3>" +
  products[0].name + ", " +
  products[1].name + ", " +
  products[2].name;
}

// Call the async load function
loadData();

O‘zingiz sinab ko‘ring »

Promise.all()

Promise.all() usuli bir nechta Promiselarning bajarilishini kutadi.

Har bir Promise bajarilganda hal qilinadigan yagona Promise-ni qaytaradi.

Misol

// async function to load data
async function loadData() {
  let responses = await Promise.all([
    fetch("customer.json"),
    fetch("products.json"),
    fetch("news.json")
  ]);
}

// Call the async load function
loadData();

O‘zingiz sinab ko‘ring »

JSON javoblarini o‘qish

Promise.all() ni response.json() bilan birgalikda ishlatishingiz mumkin.

Misol

// async function to load data
async function loadData() {
  let responses = await Promise.all([
    fetch("customer.json"),
    fetch("products.json"),
    fetch("news.json")
  ]);
  let data = await Promise.all(
    responses.map(response => response.json())
  );
}

// Call the async load function
loadData();

O‘zingiz sinab ko‘ring »

Promise.all() xatolari

Agar bitta Promise rad etilsa, Promise.all() tomonidan qaytarilgan Promise ham rad etiladi.

Misol

// async function to load data
async function loadData() {
  try {
    let data = await Promise.all([
    fetch("missing1"),
    fetch("missing2"),
    fetch("missing3")
    ]);
  }
  catch(err) {
    myDisplayer(err.message);
  }
}

// Call the async load function
loadData();

O‘zingiz sinab ko‘ring »

Eslatma

fetch() 404 Not Found kabi HTTP xatolarida o‘z Promise’ini rad etmaydi.

Bu Response obyekti bilan hal qilinadi.

Promise.all() HTTP xatolarida rad etilishi uchun response.ok’ni tekshiring va xatoni o‘zingiz chiqaring (throw).

Misol

// async function to get file
async function getFile(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(response.status + " " + response.statusText);
  }
  return response.text();
}

// async function to load data
async function loadData() {
  try {
    let data = await Promise.all([
    getFile("missing1"),
    getFile("missing2"),
    getFile("missing3")
    ]);
  }
  catch(err) {
    myDisplayer(err.message);
  }
}
// Call the async load function
loadData();

O‘zingiz sinab ko‘ring »

Yuqoridagi misol Promise.all() va xatolarni to‘g‘ri boshqarishni ko‘rsatadi.

Promise.allSettled()

Promise.allSettled() usuli har bir Promise tugashini kutadi.

Promise.all() dan farqli o‘laroq, u bitta Promise rad etilganda to‘xtamaydi.

Misol

let results = await Promise.allSettled([
  fetch("a.txt"),
  fetch("b.txt"),
  fetch("missing.txt") ]);

Har bir natijada fulfilled yoki rejected holati mavjud.

Promise.any()

Promise.any() usuli birinchi bajarilgan Promise-ni qaytaradi.

Har bir Promise rad etilmasa, rad etilgan Promiselar e’tiborga olinmaydi.

Misol

let fastest = await Promise.any([
  fetch("server1/data"),
  fetch("server2/data"),
  fetch("server3/data")
]);

Promise.race()

Promise.race() usuli birinchi bajarilgan Promise-ni qaytaradi.

Birinchi Promise bajarilgan yoki rad etilgan bo‘lishi mumkin.

Misol

let result = await Promise.race([
fetch("server1/data"),
fetch("server2/data")
]);

Qaysi metoddan foydalanish kerak?

Metod	Nimani kutadi	Odatiy qo‘llanilishi
`Promise.all()`	Hammasi bajarilishini	Load everything
`Promise.allSettled()`	Hammasi yakunlanishini	Accept failures
`Promise.any()`	First fulfilled	Fastest successful response
`Promise.race()`	First settled	Taymautlar va poyga holatlari

Metod	Bittasi rad etilsa, muvaffaqiyatsiz tugaydimi?	Qaytadi
`Promise.all()`	Ha	Qiymatlar massivi
`Promise.allSettled()`	Yo‘q	Natija obyektlari massivi
`Promise.any()`	Faqat hammasi rad etilsa	First fulfilled value
`Promise.race()`	Agar birinchisi rad etilish bilan yakunlansa	First settled result

Xulosa

Bir amal boshqasiga bog‘liq bo‘lsa, ketma-ket await operatorlaridan foydalaning.
Start independent asynchronous operations together whenever possible.
Har bir amal muvaffaqiyatli bo‘lishi shart bo‘lsa, Promise.all()’dan foydalaning.
Har bir natijaga erishmoqchi bo‘lsangiz, hatto ba’zilari muvaffaqiyatsiz bo‘lsa ham, Promise.allSettled() dan foydalaning.
Birinchi muvaffaqiyatli natija kerak bo‘lganda Promise.any() dan foydalaning.
Birinchi Promise-ni bajarish kerak bo‘lganda Promise.race() dan foydalaning.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish