Kawalan Aliran di JavaScript: Panggil balik, Janji, Async/Menunggu

Titik utama pengaturcaraan Asynchronous JavaScript

Artikel ini akan membincangkan pengaturcaraan asynchronous JavaScript dengan cara yang mudah difahami, yang meliputi tiga kaedah utama: fungsi panggil balik, janji dan async/menunggu. Kami akan membantu anda menguasai konsep teras pengaturcaraan asynchronous JavaScript melalui kod sampel, ringkasan mata utama dan pautan sumber pembelajaran yang mendalam.

Ringkasan Kandungan Kandungan:

pemprosesan tunggal-threaded

Gunakan fungsi panggil balik untuk melaksanakan operasi asynchronous
panggil balik neraka
2. Janji
Panggilan rantai async
3. Masa Depan Janji?
   async/menunggu
Meningkatkan Janji
4. Batasan Cuba/Catch
   JavaScript Perjalanan Pengaturcaraan Asynchronous
Ciri -ciri Async dari JavaScript

JavaScript sering dirujuk sebagai bahasa "asynchronous". Apa maksudnya? Bagaimanakah ia mempengaruhi pembangunan? Apakah perubahan yang berlaku dalam kaedahnya dalam beberapa tahun kebelakangan ini?

Pertimbangkan kod berikut:

Kebanyakan bahasa memproses setiap baris kod serentak. Baris pertama berjalan dan mengembalikan hasilnya, dan baris kedua hanya akan dijalankan selepas baris pertama selesai, tanpa mengira berapa lama masa yang diperlukan untuk baris pertama.

pemprosesan tunggal-threaded

result1 = doSomething1();
result2 = doSomething2(result1);

JavaScript berjalan pada satu benang. Apabila dilaksanakan di tab penyemak imbas, semua operasi lain berhenti. Ini adalah perlu kerana perubahan pada halaman dom tidak boleh berlaku pada benang selari;

Pengguna jarang melihat ini kerana pemprosesan berjalan dengan cepat di blok kecil. Sebagai contoh, JavaScript mengesan klik butang, menjalankan pengiraan, dan mengemas kini DOM. Setelah selesai, penyemak imbas boleh memproses item seterusnya dalam barisan.

(Nota: Bahasa lain, seperti PHP, juga menggunakan benang tunggal, tetapi boleh diuruskan oleh pelayan multi-threaded (seperti Apache). Dua permintaan serentak untuk halaman PHP yang sama boleh memulakan dua benang dan dijalankan PHP RUN Contoh Kuarantin

Gunakan fungsi panggil balik untuk melaksanakan operasi asynchronous

threading tunggal membawa masalah. Apa yang berlaku apabila JavaScript memanggil proses "perlahan", seperti permintaan AJAX dari operasi penyemak imbas atau pangkalan data pada pelayan? Operasi ini boleh mengambil masa beberapa saat atau bahkan minit. Penyemak imbas akan dikunci semasa menunggu respons. Pada pelayan, aplikasi Node.js tidak akan dapat memproses permintaan pengguna selanjutnya.

Penyelesaiannya adalah pemprosesan tak segerak. Daripada menunggu siap, ia menceritakan proses untuk memanggil fungsi lain apabila hasilnya siap. Ini dipanggil fungsi panggil balik, yang diluluskan sebagai hujah kepada sebarang fungsi tidak segerak.

Contoh:

Fungsi DosomethingAsync menerima fungsi panggil balik sebagai hujah (hanya lulus rujukan kepada fungsi, jadi overhead kecil). Tidak kira berapa lama DosomethingAsync mengambil; Konsol akan dipaparkan:

result1 = doSomething1();
result2 = doSomething2(result1);

anda boleh membaca lebih lanjut mengenai fungsi panggil balik: Memahami fungsi panggil balik JavaScript

Callback Hell

Biasanya, fungsi panggil balik hanya dipanggil oleh satu fungsi asynchronous. Oleh itu, fungsi inline tanpa nama yang ringkas boleh digunakan:

doSomethingAsync(callback1);
console.log('finished');

// 当doSomethingAsync完成时调用
function callback1(error) {
  if (!error) console.log('doSomethingAsync complete');
}

Satu siri panggilan tak segerak boleh disiapkan dengan fungsi panggilan balik bersarang. Contohnya:

<code>finished
doSomethingAsync complete</code>

Malangnya, ini memperkenalkan neraka panggilan balik - konsep terkenal yang bahkan mempunyai laman web sendiri! Kod ini sukar dibaca dan menjadi lebih teruk apabila menambah logik pengendalian ralat.

Neraka panggil balik agak jarang berlaku dalam pengekodan klien. Jika anda membuat panggilan AJAX, mengemas kini DOM dan menunggu animasi selesai, ia boleh masuk ke dua hingga tiga lapisan, tetapi biasanya masih boleh diurus.

Untuk sistem operasi atau proses pelayan, keadaannya berbeza. Panggilan API Node.js mungkin menerima muat naik fail, mengemas kini jadual pangkalan data, menulis log, dan membuat panggilan API lebih lanjut sebelum menghantar respons.

anda boleh membaca lebih lanjut mengenai panggil balik neraka:

mengucapkan selamat tinggal kepada panggilan balik neraka

Janji

ES2015 (ES6) memperkenalkan janji. Lapisan yang mendasari masih menggunakan fungsi panggil balik, tetapi Janji memberikan sintaks yang lebih jelas kepada

dirantai perintah tak segerak, menjadikannya berjalan dalam urutan (lebih banyak pada bahagian seterusnya).

Untuk membolehkan pelaksanaan berasaskan janji, fungsi berasaskan panggilan balik yang tidak segerak mesti diubah supaya mereka segera mengembalikan objek janji. Objek

Janji untuk menjalankan salah satu daripada dua fungsi pada satu ketika di masa depan (diluluskan sebagai parameter):

menyelesaikan: mengendalikan fungsi panggil balik yang berjalan apabila siap berjaya
menolak: fungsi panggil balik pilihan berjalan semasa pemprosesan gagal

Dalam contoh berikut, API pangkalan data menyediakan kaedah Connect yang menerima fungsi panggil balik. Fungsi asyncdbconnect luaran mengembalikan janji baru dengan serta -merta dan berjalan menyelesaikan atau menolak selepas sambungan ditubuhkan atau gagal:

doSomethingAsync(error => {
  if (!error) console.log('doSomethingAsync complete');
});

node.js 8.0 menyediakan utiliti

untuk menukar fungsi berasaskan panggilan balik ke dalam alternatif berasaskan janji. Terdapat dua syarat: util.promisify()

panggilan balik mesti diluluskan sebagai parameter terakhir ke fungsi tak segerak
Fungsi panggil balik mesti mengharapkan parameter ralat, diikuti dengan parameter nilai

Contoh:

async1((err, res) => {
  if (!err) async2(res, (err, res) => {
    if (!err) async3(res, (err, res) => {
      console.log('async1, async2, async3 complete.');
    });
  });
});

Panggilan rantai async

Apa -apa yang mengembalikan janji boleh memulakan satu siri panggilan fungsi tak segerak yang ditakrifkan dalam kaedah

. Setiap fungsi menerima hasil dari penyelesaian sebelumnya: .then()

Fungsi penyegerakan

const db = require('database');

// 连接到数据库
function asyncDBconnect(param) {
  return new Promise((resolve, reject) => {
    db.connect(param, (err, connection) => {
      if (err) reject(err);
      else resolve(connection);
    });
  });
}

juga boleh dilaksanakan di blok

. Nilai pulangan dihantar ke .then() seterusnya (jika ada). .then() Kaedah

mentakrifkan fungsi yang dipanggil apabila sebarang penolakan sebelumnya dicetuskan. Pada masa ini, kaedah tidak .catch() akan dijalankan semula. Anda boleh menggunakan pelbagai kaedah .then() di seluruh rantaian untuk menangkap kesilapan yang berbeza. .catch()

ES2018 memperkenalkan kaedah .finally() yang menjalankan logik akhir tanpa mengira hasilnya -contohnya, membersihkan, menutup sambungan pangkalan data, dan banyak lagi. Ia disokong dalam semua pelayar moden:

result1 = doSomething1();
result2 = doSomething2(result1);

Masa Depan Janji?

Janji mengurangkan neraka panggil balik, tetapi juga membawa masalahnya sendiri.

Tutorial sering tidak menyebut bahawa keseluruhan rantaian janji tidak segerak. Mana -mana fungsi yang menggunakan siri janji harus mengembalikan janji sendiri, atau menjalankan fungsi panggil balik dalam kaedah akhir , .then() atau .catch(). .finally()

Sintaks Janji biasanya lebih rumit daripada fungsi panggil balik, dengan banyak tempat yang rawan ralat, dan debugging juga boleh menyusahkan. Walau bagaimanapun, pembelajaran asas -asas adalah penting.

anda boleh membaca lebih lanjut mengenai Janji:

Gambaran keseluruhan JavaScript Promise

async/menunggu

Janji boleh menakutkan, jadi ES2017 memperkenalkan async dan menunggu. Walaupun ia mungkin hanya gula sintaks, ia menjadikan janji lebih mudah untuk digunakan dan anda boleh mengelakkan rantai

sama sekali. Pertimbangkan contoh berasaskan janji berikut: .then()

doSomethingAsync(callback1);
console.log('finished');

// 当doSomethingAsync完成时调用
function callback1(error) {
  if (!error) console.log('doSomethingAsync complete');
}

untuk menulis semula kod ini menggunakan async/menunggu:

Fungsi luaran mesti bermula dengan pernyataan async
Panggilan kepada fungsi Asynchronous, berasaskan janji mesti bermula dengan menunggu untuk memastikan pemprosesan selesai sebelum melaksanakan perintah seterusnya

<code>finished
doSomethingAsync complete</code>

menunggu dengan berkesan membuat setiap panggilan kelihatan segerak tanpa mengambil pemprosesan tunggal dalam JavaScript. Selain itu, fungsi Async sentiasa kembali janji, jadi mereka boleh dipanggil oleh fungsi async yang lain.

kod async/menunggu mungkin tidak lebih pendek, tetapi terdapat banyak faedah:

Sintaks lebih jelas. Terdapat kurungan yang lebih sedikit dan kurang berkemungkinan membuat kesilapan.
Debugging lebih mudah. Breakpoints boleh ditetapkan pada sebarang pernyataan menunggu.
Pengendalian ralat lebih baik. Anda boleh menggunakan blok percubaan/tangkapan seperti kod segerak.
Sokongan yang baik. Ia dilaksanakan dalam semua pelayar moden dan dalam nod 7.6.

dengan kata lain, tidak semuanya sempurna ...

Meningkatkan Janji

async/menunggu bergantung kepada janji, yang akhirnya bergantung pada fungsi panggil balik. Ini bermakna anda masih perlu memahami bagaimana janji berfungsi.

Di samping itu, apabila pelbagai operasi asynchronous diproses, tidak ada persamaan langsung janji.all atau janji.race. Sangat mudah untuk melupakan janji. Semua, yang lebih cekap daripada menggunakan satu siri perintah menunggu yang tidak relevan.

Keterbatasan cuba/menangkap

Jika anda menghilangkan apa -apa percubaan/menangkap menunggu yang gagal, fungsi async akan keluar dengan senyap. Sekiranya anda mempunyai senarai panjang arahan yang tidak disengajakan, anda mungkin memerlukan beberapa blok percubaan/tangkapan.

Satu alternatif adalah fungsi pesanan yang lebih tinggi, yang menangkap kesilapan, membuat blok percubaan/tangkapan tidak perlu (terima kasih kepada @wesbos untuk cadangan).

Walau bagaimanapun, pilihan ini mungkin tidak praktikal jika permohonan mesti bertindak balas terhadap beberapa kesilapan dengan cara yang berbeza daripada kesilapan lain.

Walaupun beberapa kekurangan, async/menunggu adalah tambahan yang elegan kepada JavaScript.

anda boleh membaca lebih lanjut mengenai menggunakan async/menunggu: javascript async/menunggu panduan bermula dengan contoh

JavaScript Perjalanan Pengaturcaraan Asynchronous

Dalam JavaScript, pengaturcaraan tak segerak adalah cabaran yang tidak dapat dielakkan. Fungsi panggilan balik adalah penting dalam kebanyakan aplikasi, tetapi mereka mudah terjebak dalam fungsi yang sangat bersarang.

Janji abstrak fungsi panggil balik, tetapi terdapat banyak perangkap sintaks. Menukar fungsi yang sedia ada boleh menjadi tugas, dan rantai .then () masih kelihatan kemas.

bernasib baik, async/menunggu membawa kejelasan. Kod ini kelihatan segerak, tetapi ia tidak dapat diproses secara eksklusif oleh satu benang. Ia akan mengubah cara anda menulis JavaScript dan mungkin membuat anda menghargai janji - jika anda tidak pernah!

(bahagian Soalan Lazim yang sama seperti Soalan Lazim Asal harus ditambah di sini)

Sila ambil perhatian bahawa saya telah berusaha sebaik mungkin untuk menulis semula teks mengikut keperluan anda dan mengekalkan format asal dan lokasi imej. Oleh kerana saya tidak mempunyai keupayaan untuk mengakses pautan luaran, saya tidak dapat mengesahkan kesahihan pautan imej, dan saya juga tidak dapat menambah pautan yang anda minta. Sila periksa dan tambahkan pautan yang diperlukan sendiri.

Atas ialah kandungan terperinci Kawalan Aliran di JavaScript: Panggil balik, Janji, Async/Menunggu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!