Promise və asinxron əməliyyatlar

Asinxron nəticə ilə işləmək

Sinxron JavaScript kodu cari icra axınında ardıcıllıqla işləyir. Taymer və şəbəkə işi gözlənərkən brauzer digər işləri görə bilər. Promise gələcək nəticənin təmsilidir: pending vəziyyətindən fulfilled və ya rejected vəziyyətinə keçir; bir dəfə tamamlandıqdan sonra vəziyyəti dəyişmir.

const delay = milliseconds => new Promise((resolve, reject) => {
  if (!Number.isFinite(milliseconds) || milliseconds < 0) {
    reject(new Error('Yanlış gecikmə'));
    return;
  }
  setTimeout(resolve, milliseconds);
});
delay(1000).then(() => console.log('done')).catch(console.error);
async function run() {
  try {
    const values = await Promise.all([
      delay(200).then(() => 'birinci'),
      delay(50).then(() => 'ikinci')
    ]);
    console.log(values); // ['birinci', 'ikinci']
  } catch (error) { console.error(error.message); }
}
run();

Nümunə

Zəncir, taymer və səhvlər

then yeni Promise qaytarır; içindəki nəticəni növbəti addıma ötürmək üçün return et. Atılan xəta və rədd növbəti catch-ə keçir. async funksiya həmişə Promise qaytarır; await cari async funksiyanın davamını gözlədir, bütün brauzeri dayandırmır.

Promise.all nəticələri giriş sırası ilə verir. Biri rədd ediləndə ümumi nəticə rədd olur, digər işlər avtomatik dayanmır. setTimeout bir dəfə, setInterval təkrar planlayır; clearTimeout və clearInterval ilə təmizlə. Gecikmə dəqiq vaxt zəmanəti deyil. Sonsuz sinxron dövr isə event loop-un növbədəki işi emal etməsini əngəlləyə bilər.

Əlavə qeydlər və mənbələr

Uzun çəkən işi gözləyərkən proqramın davam etməsini asinxron model təmin edir. Promise-in pending, fulfilled və rejected vəziyyətlərini, then/catch zəncirini və Promise.all ilə bir neçə işi birlikdə gözləməyi öyrən.

Niyə vacibdir?

API tətbiqlərin bir-biri ilə məlumat mübadiləsi aparması üçün razılaşdırılmış interfeysdir.

Əvvəlki biliklər

DOM və brauzer hadisələri

Bu mövzuda

setTimeout, setInterval və təmizləmə
Promise, resolve və reject
Promise.all və async/await

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Tamamlanma və nəticə sırasını ayır

Gecikmələri dəyiş. Nəticə sırasının niyə dəyişmədiyini addımlarda gör.

A işinin gecikməsi 5B işinin gecikməsi 1

Hədəf: A işinin gecikməsini 0 et.

Canlı nəticə

Giriş"A: 5 saniyə""B: 1 saniyə"

Nəticə"A""B"

Mənbə kodu

await Promise.all([requestA, requestB])

Addım-addım izlə

1 saniyə → B tamamlanır
5 saniyə → A tamamlanır

Özün sına

Saniyə sayını qəbul edən gecikmə Promise-i yaz. İki məlumat sorğusunu Promise.all ilə gözlə və biri uğursuz olanda ümumi xətanı göstər.

Nəticəni necə yoxlayım?

Gecikmə Promise-i vaxtdan sonra həll olunur; paralel işdə nəticə sırası və bir xətanın təsiri izah edilir.

Gözlənilən nəticə

Təxminən 1 saniyədən sonra done, sonra 3 istifadəçi və 2 post sayı görünür.
Bir faylın yolunu səhv yazanda ümumi xəta görünür; mənfi saniyə rədd edilir.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Gecikmə Promise qaytarır. Promise.all nəticələri verilən sorğu sırası ilə qaytarır; bir rədd cavabı ümumi catch-ə keçir.

main.js

function delay(seconds) {
  if (!Number.isFinite(seconds) || seconds < 0) return Promise.reject(new RangeError('Etibarsız saniyə'));
  return new Promise(resolve => setTimeout(() => resolve('done'), seconds * 1000));
}
async function read(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}
async function run() {
  console.log(await delay(1));
  const [users, posts] = await Promise.all([
    read('/examples/frontend/users.json'), read('/examples/frontend/posts.json')
  ]);
  console.log(users.length, posts.length);
}
run().catch(error => console.error(`Yüklənmədi: ${error.message}`));

examples/frontend/users.json

[
  {
    "id": 1,
    "name": "Aysel",
    "email": "aysel@example.test"
  },
  {
    "id": 2,
    "name": "Murad",
    "email": "murad@example.test"
  },
  {
    "id": 3,
    "name": "Leyla",
    "email": "leyla@example.test"
  }
]

examples/frontend/posts.json

[
  {
    "id": 1,
    "userId": 1,
    "title": "İlk veb səhifəm",
    "body": "HTML və CSS ilə ilk addımlar."
  },
  {
    "id": 2,
    "userId": 2,
    "title": "JavaScript praktikası",
    "body": "Massivlər və funksiyalar."
  }
]

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.