Menavigasi JavaScript: Async / Await

pengaturcaraan tak segerak JavaScript boleh mencabar bagi pemula, tetapi menguasainya adalah penting untuk menguasai bahasa.

Sebagai pembangun yang agak baharu, nuansa sintaksis JavaScript boleh menjadi menarik dan menggembirakan pada masa lain. Satu aspek JavaScript yang saya ambil sedikit masa untuk benar-benar faham ialah mengendalikan kod tak segerak. Tiada cara tunggal untuk mengendalikan kod tak segerak dalam JavaScript, dan walaupun ini boleh mengelirukan bagi pemula, memahami cara biasa untuk menulis kod tak segerak telah terbukti penting untuk kemajuan saya dalam pembangunan.

Dua kaedah yang paling biasa ialah menggunakan async/await atau then/catch. Setiap kaedah mempunyai nilai tersendiri, tetapi sejak async/await muncul pada ES2017, ia secara amnya dianggap sebagai pengganti yang lebih cekap. Mari kita lihat dahulu apa yang dipanggil pendahulu then/catch.

Kemudian/Tangkap

Kaedah

then/catch telah lama menjadi cara standard untuk mengendalikan Janji. Berikut ialah contoh:

<code class="language-javascript">fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });</code>

Selepas mendapat data daripada API luaran, .then() digunakan untuk mengendalikan Promise yang telah selesai, manakala .catch() mengendalikan sebarang ralat yang berlaku semasa operasi tak segerak. Walaupun pendekatan ini berfungsi, ia boleh menjadi menyusahkan apabila berbilang panggilan tak segerak perlu dirantai, kerana setiap .then() menambah tahap lekukan dan kerumitan. Ini menjadikan program ini mengelirukan walaupun untuk bukan pemula!

Async/Tunggu

async/awaitMemudahkan cara menulis kod tak segerak. Menggunakan async/await, operasi tak segerak boleh ditulis dengan cara yang hampir kelihatan segerak, menjadikan kod lebih mudah dibaca dan difahami. Berikut ialah contoh:

<code class="language-javascript">async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}</code>

Kata kunci

async (sentiasa diletakkan sebelum permulaan fungsi) digunakan untuk menentukan fungsi yang mengembalikan Janji. Kata kunci await menjeda pelaksanaan fungsi sehingga Janji selesai, sama seperti memerlukan segala-galanya selepasnya dijeda. Dengan cara ini, aliran kod kelihatan berurutan.

Pendekatan ini membolehkan anda mengelakkan panggilan balik yang bersarang dalam dan mengelirukan serta meningkatkan kebolehbacaan kod. Walau bagaimanapun, async/await tidak menghapuskan ralat sepenuhnya - anda masih memerlukan pengendalian ralat yang betul, yang membawa kita ke topik seterusnya.

Cuba/Tangkap

Dalam async/await, blok try/catch menyediakan cara yang lebih bersih untuk mengendalikan ralat. Daripada merantai .catch() panggilan, anda boleh merangkumkan niat anda dalam blok try dan mengendalikan ralat dalam satu blok catch. Pendekatan ini memastikan logik pengendalian ralat terikat rapat dengan kod yang berkaitan, menjadikannya lebih mudah untuk nyahpepijat dan diselenggara.

Berikut ialah contoh try/catch digunakan dengan async/await:

<code class="language-javascript">fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });</code>

Struktur ini memastikan bahawa semua kesilapan disepadukan, dan kod tetap boleh dibaca. Ia biasanya dianggap lebih intuitif, terutamanya bagi pemaju yang beralih dari paradigma pengaturcaraan segerak.

Tambah: Pengendali Tugasan Selamat

Operator Tugasan Keselamatan () adalah alat yang lebih baru yang dapat meningkatkan kejelasan kod JavaScript, terutama ketika memproses nilai lalai. Simbol pengkomputeran ini diberikan kepada pembolehubah hanya apabila pembolehubah adalah batal atau tidak ditentukan. Ini adalah contoh: ??=

Dalam konteks operasi asynchronous, simbol operasi ini dapat membantu menetapkan nilai pengembalian dana apabila pemprosesan tidak dapat ditakrifkan atau respons kepada Null.

<code class="language-javascript">async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}</code>

Adakah lebih baik untuk menjadi mudah?

Apabila menulis JavaScript, terdapat hampir hampir tugasan antara kesederhanaan dan kebolehbacaan. Walaupun kaedah kadang -kadang membawa kepada kod yang lebih pendek, kebolehbacaan dan penyelenggaraan

menjadikannya pilihan yang lebih kuat dalam kebanyakan kes penggunaan. Menggunakan , struktur mudah adalah peningkatan seragam kod tak segerak.

then/catch Prinsip yang sama juga boleh digunakan untuk pengendali seperti try/catch. Walaupun mereka boleh membuat kod anda lebih ringkas, penggunaan yang berlebihan ciri -ciri ini kadang -kadang boleh mengaburkan niat kod, terutamanya untuk pemaju yang lebih baru. async/await

Jadi, kesederhanaan selalu lebih baik? Mungkin tidak! Walaupun kod mudah kelihatan elegan, kejelasan harus selalu disukai. Apabila anda terus mengasah kemahiran JavaScript anda, adalah penting untuk mendapatkan keseimbangan antara kesederhanaan dan kebolehbacaan, supaya kod anda bukan sahaja berkuasa, tetapi juga mudah untuk bekerjasama.

Atas ialah kandungan terperinci Menavigasi JavaScript: Async / Await. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!