Async/Await vs Promises: Panduan Mudah untuk Pemula JavaScript

Pernahkah anda berasa seperti sedang menunggu giliran di kedai kopi untuk JavaScript mengambil latte anda? Pengaturcaraan tak segerak selalunya boleh berasa seperti itu—berbilang pesanan diproses pada masa yang sama boleh menyebabkan anda terperangkap menunggu. Nasib baik, alatan seperti Janji dan async/menunggu memastikan proses kekal lancar dan cekap, membenarkan kod anda terus bergerak tanpa berlengah-lengah.

Dalam panduan ini, kami akan membahagikan cara Promises berfungsi, sebab async/wait diperkenalkan dan cara ia memudahkan menulis kod tak segerak. Sama ada anda seorang pemula yang cuba memahami konsep ini atau mencari kejelasan tentang masa untuk menggunakan setiap pendekatan, artikel ini akan membantu anda menguasai asasnya.

Apakah Janji?

Janji ialah konsep asas dalam JavaScript untuk mengendalikan operasi tak segerak. Pada asasnya, Janji mewakili nilai yang mungkin tersedia kini, kemudian atau tidak pernah. Anggap ia seperti nombor penjejakan untuk pakej: walaupun anda belum mempunyai pakej itu, nombor penjejakan itu memberi anda keyakinan bahawa ia sedang dalam perjalanan (atau memberitahu anda jika berlaku kesilapan).

Berdasarkan naratif "sekarang, kemudian atau tidak", Janji sebenarnya beroperasi di salah satu daripada tiga keadaan:

• Belum selesai: Operasi tak segerak belum selesai lagi.
• Dipenuhi: Operasi telah berjaya diselesaikan, dan Janji kini memegang hasilnya.
• Ditolak: Kesilapan telah berlaku, dan Janji memberikan ralat.

Mencipta dan bekerja dengan Promises melibatkan API yang mudah. Begini cara anda boleh mentakrifkan Janji:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = { id: 1, name: "JavaScript Basics" };
    resolve(data); // Simulates a successful operation
    // reject("Error: Unable to fetch data"); // Simulates a failure
  }, 1000);
});

Untuk mengendalikan keputusan, anda boleh rantaikan kaedah .then(), .catch(), dan .finally() ke objek Promise:

fetchData
  .then((data) => {
    console.log("Data received:", data);
  })
  .catch((error) => {
    console.error(error);
  })
  .finally(() => {
    console.log("Operation complete.");
  });

Panggil balik dalam kaedah then() dilaksanakan apabila Promise diselesaikan dengan hasil yang berjaya. Panggilan balik dalam kaedah .catch() dilaksanakan apabila Promise menyelesaikan dengan hasil yang gagal dan panggilan balik dalam kaedah finally() dilaksanakan selepas Promise telah diselesaikan, tanpa mengira keputusan resolusi.

Faedah Janji

Janji menyediakan alternatif yang lebih bersih kepada panggilan balik bersarang dalam, sering dirujuk sebagai "neraka panggil balik". Daripada menyusun panggilan balik, Promises membenarkan rantaian, menjadikan aliran operasi lebih mudah untuk diikuti:

doTask1()
  .then((result1) => doTask2(result1))
  .then((result2) => doTask3(result2))
  .catch((error) => console.error("An error occurred:", error));

Begini rupa kod yang sama ini jika ia ditulis menggunakan panggilan balik tradisional:

doTask1((error1, result1) => {
  if (error1) {
    console.error("An error occurred:", error1);
    return;
  }
  doTask2(result1, (error2, result2) => {
    if (error2) {
      console.error("An error occurred:", error2);
      return;
    }
    doTask3(result2, (error3, result3) => {
      if (error3) {
        console.error("An error occurred:", error3);
        return;
      }
      console.log("Final result:", result3);
    });
  });
});

Mengelirukan, bukan? Inilah sebabnya Promises menjadi pengubah permainan dalam piawaian pengekodan JavaScript apabila ia diperkenalkan.

Kekurangan Janji

Walaupun Promises bertambah baik pada fungsi panggil balik tradisional, ia tidak datang tanpa cabaran unik mereka sendiri. Walaupun faedahnya, mereka boleh menjadi sukar digunakan dalam senario yang rumit, mengakibatkan kod verbose dan kesukaran penyahpepijatan.

Walaupun dengan rantaian .then(), Promises boleh mengakibatkan kod bersepah apabila berurusan dengan berbilang operasi tak segerak. Contohnya, mengurus operasi berurutan dengan blok .then() dan pengendalian ralat menggunakan .catch() boleh berasa berulang dan lebih sukar untuk diikuti.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = { id: 1, name: "JavaScript Basics" };
    resolve(data); // Simulates a successful operation
    // reject("Error: Unable to fetch data"); // Simulates a failure
  }, 1000);
});

Walaupun lebih bersih daripada panggilan balik bersarang, sintaks rantaian masih bertele-tele, terutamanya apabila logik pengendalian ralat tersuai yang terperinci diperlukan. Selain itu, terlupa untuk menambah .catch() pada penghujung rantai boleh menyebabkan kegagalan senyap, menjadikan penyahpepijatan rumit.

Selain itu, jejak tindanan dalam Promises tidak seintuitif seperti dalam kod segerak. Apabila ralat berlaku, surih tindanan mungkin tidak menunjukkan dengan jelas dari mana isu itu berasal dalam aliran tak segerak anda.

Akhir sekali, walaupun Promises membantu mengurangkan panggilan balik neraka, ia masih boleh mengakibatkan kerumitan apabila tugas saling bergantung. Blok .then() bersarang boleh masuk semula untuk kes penggunaan tertentu, membawa kembali beberapa cabaran kebolehbacaan yang ingin mereka selesaikan.

Masukkan async/menunggu

Pengaturcaraan tak segerak dalam JavaScript mengambil lonjakan besar ke hadapan dengan pengenalan async/menunggu dalam ES2017 (ES8). Dibina di atas Promises, async/wait membolehkan pembangun menulis kod tak segerak yang kelihatan dan berkelakuan lebih seperti kod segerak. Ini menjadikannya penukar permainan sebenar untuk meningkatkan kebolehbacaan, memudahkan pengendalian ralat dan mengurangkan keterlaluan.

Apakah async/menunggu?

Async/wait ialah sintaks yang direka untuk menjadikan kod tak segerak lebih mudah difahami dan diselenggara.

Kata kunci async digunakan untuk mengisytiharkan fungsi yang sentiasa mengembalikan Janji. Dalam fungsi ini, kata kunci menunggu menjeda pelaksanaan sehingga Janji diselesaikan atau ditolak. Ini menghasilkan aliran yang kelihatan linear dan intuitif, walaupun untuk operasi tak segerak yang kompleks.

Berikut ialah contoh cara async/menunggu memudahkan contoh kod yang sama yang anda lihat di atas:

fetchData
  .then((data) => {
    console.log("Data received:", data);
  })
  .catch((error) => {
    console.error(error);
  })
  .finally(() => {
    console.log("Operation complete.");
  });

Async/await menghapuskan keperluan untuk rantai .then(), membenarkan kod mengalir secara berurutan. Ini menjadikannya lebih mudah untuk mengikuti logik, terutamanya untuk tugas yang perlu dilaksanakan satu demi satu.

Dengan Janji, ralat mesti ditangkap pada setiap peringkat rantai menggunakan .catch(). Async/menunggu, sebaliknya, menyatukan pengendalian ralat menggunakan cuba/tangkap, mengurangkan pengulangan dan meningkatkan kejelasan.

Async/wait menghasilkan lebih banyak jejak tindanan intuitif daripada Promises. Apabila ralat berlaku, jejak mencerminkan hierarki panggilan fungsi sebenar, menjadikan penyahpepijatan kurang mengecewakan. Pada keseluruhannya, async/menunggu terasa lebih "semula jadi" kerana ia sejajar dengan cara kod segerak ditulis.

Membandingkan Janji dan async/menunggu

Seperti yang telah anda lihat, Async/menunggu bersinar apabila melibatkan kebolehbacaan, terutamanya untuk operasi berjujukan. Janji, dengan rantaian .then() dan .catch() mereka, dengan cepat boleh menjadi verbose atau kompleks. Sebaliknya, kod async/tunggu adalah lebih mudah untuk diikuti kerana ia meniru struktur segerak.

Fleksibiliti

Janji masih ada tempatnya, terutamanya untuk tugasan serentak. Kaedah seperti Promise.all() dan Promise.race() adalah lebih cekap untuk menjalankan berbilang operasi tak segerak secara selari. Async/wait boleh mengendalikan kes sedemikian juga, tetapi ia memerlukan logik tambahan untuk mencapai hasil yang sama.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = { id: 1, name: "JavaScript Basics" };
    resolve(data); // Simulates a successful operation
    // reject("Error: Unable to fetch data"); // Simulates a failure
  }, 1000);
});

Ralat pengendalian

Walaupun pengendalian ralat terpusat dengan satu .catch() berfungsi dengan baik untuk rantaian Linear Promises, adalah disyorkan untuk menggunakan panggilan .catch yang diedarkan untuk jenis ralat yang berbeza merentas rantaian untuk kebolehbacaan terbaik.

Sebaliknya, blok cuba/tangkap menawarkan struktur yang lebih semula jadi untuk mengendalikan ralat, terutamanya apabila menangani tugasan berurutan.

Prestasi

Dari segi prestasi, async/menunggu pada asasnya adalah bersamaan dengan Promises kerana ia dibina di atasnya. Walau bagaimanapun, untuk tugasan yang memerlukan keselarasan, Promise.all() boleh menjadi lebih cekap kerana ia membenarkan berbilang Promise dilaksanakan secara selari, gagal dengan pantas jika Promise menolak.

Bila Guna Yang

Jika tugas anda melibatkan banyak operasi serentak, seperti mengambil data daripada berbilang API secara serentak, Promises kemungkinan besar adalah pilihan yang lebih baik. Jika kod tak segerak anda tidak melibatkan banyak rantaian, Promises juga akan sesuai dalam situasi itu kerana kesederhanaannya.

Sebaliknya, async/menunggu cemerlang dalam situasi di mana banyak tugasan perlu dilaksanakan secara berurutan atau apabila kebolehbacaan dan kebolehselenggaraan menjadi keutamaan. Contohnya, jika anda mempunyai satu siri operasi bergantung, seperti mengambil data, mengubahnya dan menyimpannya, async/wait menawarkan struktur yang bersih dan segerak. Ini memudahkan untuk mengikuti aliran operasi dan memudahkan pengendalian ralat terpusat dengan blok cuba/tangkap. Async/await amat berguna untuk pemula atau pasukan yang mengutamakan kod boleh dibaca.

Kesimpulan

JavaScript menawarkan dua alatan berkuasa untuk mengurus operasi tak segerak: Janji dan async/menunggu. Janji telah merevolusikan cara pembangun mengendalikan tugas tak segerak, menyelesaikan isu seperti neraka panggil balik dan membolehkan rantaian. Async/wait build on Promises, menyediakan sintaks yang lebih bersih yang terasa lebih semula jadi dan intuitif, terutamanya untuk tugasan yang berurutan.

Sekarang anda telah meneroka kedua-dua pendekatan, anda sudah bersedia untuk memilih yang terbaik untuk keperluan anda. Cuba tukar fungsi berasaskan Janji kepada tidak segerak/menunggu dan perhatikan perbezaan kebolehbacaan!

Untuk maklumat lanjut, lihat dokumentasi MDN Promise atau percubaan dengan kotak pasir pengekodan interaktif!

Atas ialah kandungan terperinci Async/Await vs Promises: Panduan Mudah untuk Pemula JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!