Rumah > hujung hadapan web > tutorial js > Panggilan balik

Panggilan balik

Patricia Arquette
Lepaskan: 2024-10-19 22:34:02
asal
250 orang telah melayarinya

Dalam JavaScript kami mempunyai cara yang berbeza untuk mengendalikan panggilan tak segerak.
Ia membolehkan anda mengendalikan tugas tak segerak seperti mengambil data daripada pelayan, membaca fail atau menunggu acara.

Panggilan balik

Ini ialah fungsi yang memanggil fungsi lain.
Mari lihat contoh supaya kita dapat memahaminya dengan lebih baik:

Panggilan balik

  • Memanggil getUser() dengan fungsi id dan panggil balik yang akan mencetak id, nama dan e-mel pengguna. Panggilan balik akan dilaksanakan sebaik sahaja operasi getUser tak segerak selesai.

Fungsi getUser():

  • id: Ini ialah id pengguna yang anda ingin dapatkan yang diluluskan daripada panggilan getUser(1, ...).

  • panggilan balik: Ini ialah fungsi yang akan dipanggil selepas "data pengguna" diambil (disimulasikan di sini oleh fungsi setTimeout()).

  • Di dalam fungsi setTimeout() fungsi panggil balik() dipanggil selepas kelewatan, menghantar objek pengguna olok-olok sebagai hujahnya: { id: id, nama: 'Diana', e-mel: 'Diana@test. com' }.

Aliran Pelaksanaan:

  1. getUser(1, pengguna => { console.log('Pengguna', pengguna); }); dipanggil.
  2. Di dalam getUser(), kelewatan 3 saat dicetuskan menggunakan setTimeout().
  3. Selepas 3 saat: Mesej 'Mengambil pengguna daripada DB...' dilog masuk ke konsol. Fungsi panggil balik digunakan dengan objek pengguna { id: 1, nama: 'Diana', e-mel: 'Diana@test.com' }.
  4. Fungsi panggil balik log Pengguna dan pengguna objek ke konsol.

Output Akhir:

Panggilan balik

Panggilan Balik Neraka

Corak neraka panggil balik - ini berlaku apabila berbilang operasi tak segerak bergantung antara satu sama lain, yang membawa kepada panggilan balik bersarang dalam. Apabila sarang meningkat, kod menjadi lebih sukar untuk dibaca, diselenggara dan nyahpepijat. Mari lihat contoh:

Panggilan balik

Jom pecahkan:

  • Mengambil Pengguna: Di sini, kami memulakan panggilan tak segerak yang pertama, getUser(1), yang mensimulasikan pengambilan data pengguna daripada pangkalan data. Setelah data diambil, fungsi panggil balik dilaksanakan, mengelog butiran pengguna ke konsol.
getUser(1, user => {
    console.log('User', user);
    // ...
});
Salin selepas log masuk
Salin selepas log masuk

Mengambil Pesanan Pengguna:
Di dalam panggilan balik untuk getUser(), kami membuat satu lagi panggilan tak segerak ke getOrders(user.id), mensimulasikan pengambilan pesanan pengguna daripada pangkalan data. Ini memerlukan sarang panggilan balik lain di dalam yang pertama. Setelah pesanan diambil, pesanan direkodkan.

getUser(1, user => {
    console.log('User', user);
    // ...
});
Salin selepas log masuk
Salin selepas log masuk
  • Mengambil Butiran Pesanan: Selepas mengambil pesanan, kami perlu mendapatkan butiran satu pesanan tertentu (pesanan[1]). Ini membawa kepada peringkat ketiga bersarang, di mana getOrdersDetails() dipanggil untuk mengambil butiran pesanan, dan kemudian log mereka ke konsol.
getOrders(user.id, orders => {
    console.log(`${user.name}'s orders`, orders);
    // ...
});

Salin selepas log masuk

Struktur Kod (Bersarang):

Panggilan balik

Perhatikan bagaimana setiap operasi tak segerak bergantung pada operasi sebelumnya, menghasilkan struktur bersarang dalam. Menyukarkan kod untuk:

  1. Baca: Sukar untuk mengikuti aliran logik apabila panggilan balik bersarang dalam.

  2. Ralat pengendalian: Sukar untuk mengendalikan ralat pada berbilang peringkat panggilan balik.

3.Nyahpepijat: Mengenal pasti tempat ralat berlaku menjadi lebih kompleks apabila banyak peringkat panggilan balik terlibat.

Ia juga menjadikan kod "Gandingan ketat" - setiap fungsi bergantung pada output sebelumnya, yang bermaksud kod itu digandingkan rapat, mengurangkan kebolehgunaan semula.

Keputusan:
Panggilan balik

Mengelakkan Neraka Panggilan Balik:
Neraka panggilan balik boleh dielakkan dengan menggunakan ciri JavaScript moden seperti Janji dan async/menunggu. Kaedah ini membolehkan kod tak segerak ditulis dengan cara yang lebih mudah dibaca dan berurutan.

Atas ialah kandungan terperinci Panggilan balik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan