Panggilan Balik lwn. Janji lwn. Async/Await: Perbandingan Terperinci

Pengenalan:
Pengaturcaraan tak segerak ialah asas pembangunan JavaScript moden, membolehkan tugasan dilaksanakan serentak tanpa menyekat utas utama. Dari masa ke masa, JavaScript telah berkembang dengan penyelesaian yang lebih elegan untuk mengendalikan operasi tak segerak. Dalam artikel ini, kami akan meneroka evolusi JavaScript tak segerak, bermula daripada panggilan balik tradisional dan maju kepada janji dan sintaks async/menunggu.

1. Fungsi Panggilan Balik: Secara tradisinya, JavaScript menggunakan fungsi panggil balik untuk mengendalikan operasi tak segerak. Panggilan balik membolehkan anda menentukan fungsi yang akan dilaksanakan sebaik sahaja tugas tak segerak selesai. Walau bagaimanapun, apabila pangkalan kod semakin besar dan lebih kompleks, pendekatan berasaskan panggilan balik membawa kepada isu seperti neraka panggil balik dan kebolehbacaan kod yang lemah.

contoh:

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

Output:
Apabila anda menjalankan kod, outputnya ialah:

kishan
Anuj
jatin

langkah 2

Janji lebih baik daripada panggilan balik untuk mengendalikan operasi tak segerak kerana ia menyediakan cara kerja yang lebih bersih, terurus dan tahan ralat dengan kod async. Inilah sebabnya Janji dianggap lebih baik:

1. Elakkan Neraka Panggilan Balik Panggil balik: Bersarang berbilang panggilan balik menghasilkan kod bersarang dalam dan sukar dibaca (biasanya dikenali sebagai "neraka panggilan balik"). Janji: Janji rantai .then() memanggil, memastikan kod itu rata dan boleh dibaca

1. Pengendalian Ralat
   Panggilan balik: Ralat mesti dikendalikan secara eksplisit pada setiap peringkat, yang terdedah kepada kesilapan.
   Janji: Dengan .catch(), anda boleh menangani ralat di satu tempat

2. Kebolehbacaan yang Lebih Baik
   Janji mempunyai struktur yang jelas menggunakan .then() dan .catch(), menjadikan kod lebih mudah difahami, nyahpepijat dan diselenggara.

3. Merangkai Berbilang Panggilan Async
   Janji menjadikan operasi tak segerak berurutan rantaian lancar

contoh

const datas = [
  { name: "kishan", profession: "software Engineer" },
  { name: "Anuj", profession: "software Engineer" },
];

function getDatas() {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.forEach((data) => {
        console.log(data.name);
      });
      resolve(); // Signal completion
    }, 1000);
  });
}

function createdData(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.push(newData);
      resolve(); // Signal completion
    }, 2000);
  });
}

function logCompletion() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("All tasks completed!");
      resolve();
    }, 500);
  });
}

// Usage with an Additional Task
createdData({ name: "jatin", profession: "software Engineer" })
  .then(getDatas)
  .then(logCompletion) // New Task
  .catch((err) => console.error(err));

Cara Ia Berfungsi:
CreatedData:
Menambah kemasukan data baharu pada tatasusunan data selepas 2 saat.
getDatas:
Log semua nama dalam tatasusunan data selepas 1 saat.
logPenyelesaian (Tugas Baharu):
Log "Semua tugas selesai!" selepas 500 milisaat.

Output:
Apabila anda menjalankan kod yang dikemas kini, outputnya ialah:

kishan
Anuj
jatin
All tasks completed!

Mengapa Berjanji Memudahkan Ini:
Setiap tugasan mengembalikan Janji, membolehkan anda menambah, menyusun semula atau mengalih keluar langkah dalam rantaian dengan mudah.
Struktur yang bersih memastikan urutan dikekalkan dan mudah diikuti.

langkah 3

Menggunakan async/wait memudahkan sintaks Promises, menjadikan kod lebih mudah dibaca dan lebih dekat dengan aliran segerak semasa masih tidak segerak. Begini rupa kod anda apabila ditulis semula dengan async/wait:

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

Faedah async/menunggu:
Kebolehbacaan:
Kod berbunyi seperti logik segerak, langkah demi langkah.
Tiada rantai atau sarang.
Pengendalian Ralat:
Gunakan try...catch blocks untuk mekanisme pengendalian ralat yang terpusat dan konsisten.
Kebolehskalaan:
Menambah tugasan baharu semudah menambah barisan menunggu yang lain.

Output:
Apabila anda menjalankan kod, anda akan mendapat:

kishan
Anuj
jatin

Atas ialah kandungan terperinci Panggilan Balik lwn. Janji lwn. Async/Await: Perbandingan Terperinci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!