Kuasai Janji JavaScript: Soalan Output Rumit Setiap Pembangun Mesti Tahu! (Bahagian 1)

Janji JavaScript ialah bahagian penting dalam pembangunan web moden. Mereka membenarkan kami mengendalikan operasi tak segerak dengan bersih dan cekap. Walau bagaimanapun, janji selalunya boleh bertindak dengan cara yang mengejutkan, terutamanya apabila digabungkan dengan gelung acara dan tugasan mikro. Artikel ini ialah Bahagian 1 daripada siri dua bahagian di mana kami menangani soalan keluaran berasaskan janji yang rumit untuk mempertajam kemahiran JavaScript anda.

Menjelang penghujung siri ini, anda akan mendapat pemahaman yang lebih mendalam tentang cara janji berinteraksi dengan gelung acara JavaScript. Mari selami lima soalan rumit pertama!

Soalan 1: Resolusi Janji Asas

console.log("Start");

const promise1 = new Promise((resolve) => {
  console.log("Promise started");
  resolve("Resolved");
});

promise1.then((result) => {
  console.log(result);
});

console.log("End");

Output:

Start
Promise started
End
Resolved

Penjelasan:

1. Konsol.log("Mula") pertama dilaksanakan.
2. Pelaksana janji berjalan serta-merta, log Promise bermula.
3. Blok .then() dijadualkan sebagai microtask selepas kod semasa selesai dilaksanakan.
4. console.log("End") berjalan seterusnya.
5. Akhir sekali, log panggil balik .then() Selesai apabila baris gilir microtask diproses.

Soalan 2: Janji Bersarang

const promise2 = new Promise((resolve) => {
  resolve("Resolved 1");
});

promise2.then((result) => {
  console.log(result);
  return new Promise((resolve) => {
    resolve("Resolved 2");
  });
}).then((result) => {
  console.log(result);
});

Output:

Resolved 1
Resolved 2

Penjelasan:

1. Yang pertama .then() log Resolved 1 dan mengembalikan janji baharu.
2. Yang kedua .then() menunggu janji yang dikembalikan untuk diselesaikan, log Resolved 2.

Soalan 3: Janji Berantai dengan Penyelesaian Segera

const promise3 = Promise.resolve();

promise3
  .then(() => {
    console.log("Then 1");
  })
  .then(() => {
    console.log("Then 2");
  })
  .then(() => {
    console.log("Then 3");
  });

Output:

Then 1
Then 2
Then 3

Penjelasan:

1. Apabila janji diselesaikan dengan segera (Promise.resolve()), pengendali .then()nya akan beratur dalam baris gilir microtask.
2. Setiap .then() mengembalikan janji baharu yang diselesaikan selepas panggilan balik dijalankan, menghasilkan pelaksanaan berurutan Then 1, Then 2 dan Then 3.

Soalan 4: Pengendalian Penolakan

const promise4 = new Promise((_, reject) => {
  reject("Error occurred");
});

promise4
  .then(() => {
    console.log("This will not run");
  })
  .catch((error) => {
    console.log("Caught:", error);
  })
  .then(() => {
    console.log("This will still run");
  });

Output:

Caught: Error occurred
This will still run

Penjelasan:

1. Janji ditolak dengan mesej "Ralat berlaku".
2. Blok .catch() menangkap ralat dan log Ditangkap: Ralat berlaku.
3. Selepas .catch(), .then() seterusnya masih berjalan kerana ia dianggap sebagai janji yang telah diselesaikan melainkan tangkapan melempar lagi.

Soalan 5: Mencampur Async/Menunggu dengan Janji

async function asyncFunc() {
  console.log("Async function started");
  return "Async result";
}

asyncFunc().then((result) => {
  console.log(result);
});

console.log("Synchronous log");

Output:

Async function started
Synchronous log
Async result

Penjelasan:

1. Apabila asyncFunc dipanggil, ia segera merekodkan fungsi Async bermula.
2. Nilai pulangan fungsi async ialah janji, jadi .then() dijadualkan sebagai microtask.
3. console.log("Log segerak") berjalan seterusnya, diikuti dengan resolusi janji yang merekodkan hasil Async.

Kesimpulan:

Dalam bahagian pertama ini, kami merangkumi asas janji JavaScript dan meneroka cara penyelesaian janji, rantaian dan pengendalian penolakan berfungsi. Memahami gelung acara dan baris gilir microtask adalah penting untuk menguasai janji, dan soalan ini menyerlahkannya. Nantikan Bahagian 2, di mana kita akan menyelami tingkah laku janji yang lebih maju, termasuk Promise.race, Promise.all dan banyak lagi!

Pengambilan Utama:

• Penyelesaian janji sentiasa tak segerak dan pengendali .then() diproses selepas kod segerak semasa.
• Setiap .then() mengembalikan janji baharu, membenarkan rantaian.
• catch() mengendalikan penolakan janji, dan panggilan .then() seterusnya akan tetap dilaksanakan.

Nantikan Bahagian 2 siri ini, di mana kami menangani helah janji yang lebih maju!

Atas ialah kandungan terperinci Kuasai Janji JavaScript: Soalan Output Rumit Setiap Pembangun Mesti Tahu! (Bahagian 1). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!