‫-: Sekarang mari kita bicara
‫tentang masalah yang dapat muncul ketika kita menggunakan terlalu banyak fungsi panggilan balik.
‫Dan untuk
‫melakukan itu, kita akan melakukan contoh
‫kecil untuk mengilustrasikan efek ini.
‫Sekarang ingat bahwa jika Anda sudah terbiasa dengan
‫Promises dan Async/Await dan secara
‫umum, Asynchronous Java
‫Script, silakan lewati saja bagian ini
‫dan tandai semua video sebagai selesai
‫sehingga Anda masih bisa menyelesaikan 100
‫persen kursus.
‫Tetapi jika Anda
‫ingin mempelajari semua tentang Asynchronous
‫Java Script dan bagaimana menggunakannya di OJS, mari kita lanjutkan.
‫Jadi
‫silakan dan dapatkan file starter untuk proyek
‫ini dari file kursus.
‫Saya sudah memilikinya di sini di desktop
‫saya, jadi folder ini di sini.
‫Dan hanya file ini di
‫sana, jadi hanya itu yang kita perlukan untuk memulai.
‫Dan saya memilikinya di sini di VS Code yang sudah dibuka
‫dan apa yang akan kita
‫lakukan untuk memulai adalah membuat NX. berkas .JS.
‫Sama seperti sebelumnya.
‫Sekarang yang akan kita lakukan adalah
‫ini, kita akan menggunakan ini,
‫file anjing ini di sini, file teks ini.
‫Dan dari sini kita akan membaca jenis anjing.
‫Dan kemudian kita akan melakukan permintaan
‫HTTP untuk mendapatkan gambar acak anjing dengan jenis ini.
‫Dan kemudian simpan gambar acak itu ke
‫file teks lain.
‫Jadi ini adalah proses tiga langkah
‫dan semua ini akan melibatkan fungsi panggilan balik.
‫Dan pada akhirnya kita akan melihat masalah yang kita miliki
‫ketika kita menggunakan semua fungsi panggilan balik ini
‫di dalam satu sama lain.
‫Oke?
‫Jadi untuk itu kita akan menggunakan
‫API yang cukup populer.
‫Yang lebih seperti API yang menyenangkan.
‫Tapi untuk hal
‫semacam ini ada baiknya untuk menggunakannya.
‫Jadi itu ANJING. CEO, API.
‫Jadi tekan saja Dog API di sini.
‫Kemudian
‫di sini, dokumentasi.
‫Dan yang kami inginkan adalah mendapatkan anjing acak,
‫atau jenis tertentu.
‫Jadi klik berdasarkan breed di sini.
‫Dan di
‫bawah sini, di sini adalah titik akhir API yang akan kita tekan.
‫Jadi ini URL ini di sini.
‫Jadi ketika Anda mengklik ambil di
‫sini, setiap kali Anda mendapatkan gambar baru, oke?
‫Jadi di
‫bagian ini kita sebenarnya akan melakukan permintaan
‫HTTP seperti yang kita pelajari
‫sebelumnya di bagian sebelumnya.
‫Oke.
‫Jadi yang harus
‫kita lakukan adalah membuat permintaan HTTP ke URL ini dan
‫kemudian itu akan mengembalikan gambar kita.
‫Oke?
‫Tapi untuk sekarang, mari kita mulai dengan bagian
‫di mana kita membaca file dan mendapatkan konten dari
‫file itu.
‫Jadi di index. js, sekali lagi kita membutuhkan paket
‫atau modul sistem file.
‫Jadi FS
‫dan membutuhkan modul FS di sini.
‫Dan seperti sebelum kita melakukan fs. readfile dan
‫kami melakukan versi asinkron.
‫Oke.
‫Ingat bahwa di sini kita melewati lokasi file dan
‫kemudian fungsi panggilan
‫balik yang akan dipanggil segera setelah kita selesai membaca file.
‫Jadi kami memiliki string template kami di sini.
‫Dan kemudian kami menggunakan dirname seperti yang kami lakukan sebelumnya.
‫Jadi nama direktori saat ini.
‫/anjing. txt.
‫Oke dan kemudian fungsi panggilan
‫kembali kami yang argumen pertama seperti biasa adalah kesalahan.
‫Dan kemudian data yang sebenarnya ada di file.
‫Dan untuk memastikannya, mari
‫kita log ke konsol tentunya.
‫Jadi string template
‫lain sehingga kami dapat menampilkan data kami dengan baik di sini.
‫Oke.
‫Mulai terminal di
‫sini dan angkat
‫sedikit.
‫Jadi saya menggunakan nodemon seperti yang saya lakukan sebelumnya
‫dan kemudian index. js.
‫Oke jadi breed adalah retriever.
‫Dan itulah yang kita miliki di sini di file ini.
‫Oke jadi retriever adalah jenis yang akan kita cari.
‫Sekarang di dalam fungsi
‫panggilan balik ini, kita ingin melakukan permintaan HTTP
‫yang baru saja kita bicarakan sebelumnya.
‫Dan sebenarnya ada cara untuk
‫melakukannya dengan
‫modul asli tanpa JS.
‫Tetapi lebih mudah menggunakan paket NPM untuk itu.
‫Dan masih banyak lagi,
‫tapi yang akan kita gunakan disebut Super Agent.
‫Nanti kita akan menggunakan yang lain
‫tapi untuk saat ini Super Agent baik-baik saja untuk itu, oke.
‫Dan untuk benar-benar mengunduh modul ini menggunakan NPM, kita
‫akan mulai dengan membuat file paket Jason.
‫Ingat itu?
‫Jadi biarkan saya menyelesaikan ini dan
‫melakukan NPM di dalamnya.
‫Dan tekan saja enter pada semua ini.
‫Ini tidak penting.
‫Oke.
‫Kami hanya ingin paket ini. jason
‫file sehingga benar-benar menyimpan nama paket
‫yang kita gunakan.
‫Jadi kami selalu melakukan itu setiap kali kami memulai proyek baru.
‫Dan sekarang instal NPM,
‫atau kita bisa menggunakan I, yang sama dan kemudian
‫nama paketnya.
‫Jadi tidak ada yang baru di sana kan?
‫Sekarang untuk menggunakan
‫paket ini, kita membuat
‫variabel baru yang kemudian akan berisi fungsi Super Agent
‫yang diperlihatkan modul ini kepada kita.
‫Sekarang mari kita lanjutkan dan benar-benar menggunakan fungsi Agen
‫Super itu.
‫Jadi untuk melakukan permintaan get,
‫kami hanya menggunakan metode get di atasnya.
‫Jadi dapatkan dan kemudian kita membutuhkan URL itu.
‫Oke jadi ini yang saya tunjukkan sebelumnya.
‫Jadi cukup salin
‫dan tempel di sini
‫ke dalam string template.
‫Karena sekarang kita sebenarnya akan mengganti
‫breed ini di sini.
‫Oke, jadi kami tidak
‫menginginkan itu tetapi kami ingin
‫menggunakannya, yang kami dapatkan dari file kami.
‫Jadi dalam hal ini adalah data.
‫Benar?
‫Jadi seperti
‫ini, kita sebenarnya bisa melakukan permintaan HTTP get.
‫Sekarang untuk mendapatkan data,
‫kita sebenarnya juga harus menggunakan metode akhir ini.
‫Dan di sinilah kita akan meneruskan
‫fungsi panggilan balik.
‫Jadi sekali lagi itu adalah kesalahan,
‫panggilan pertama kembali dan
‫kemudian kami meneruskan hasilnya juga.
‫Jadi dalam fungsi
‫ini, pertama-tama
‫mari kita log hasilnya ke konsol.
‫Jadi data yang kita dapatkan ada pada variabel respon.
‫Jadi yang ini di sini.
‫Dan kemudian di atasnya adalah tubuh.
‫Jadi di situlah respon yang sebenarnya.
‫Oke, sekarang mari kita benar-benar pergi ke depan dan menguji itu.
‫Dan sekarang dengan penyimpanan ini, itu benar-benar turun.
‫Jadi sekali
‫lagi itu karena ekstensi sebelumnya yang kita atur tadi.
‫Dan mungkin Anda juga
‫memperhatikan bagaimana ia menggantikan tanda kutip normal yang saya miliki di
‫sini dengan tanda
‫kutip ganda ini dan juga memasukkan titik koma di sini.
‫Dan sebenarnya di bagian terakhir,
‫atau di salah
‫satu bagian terakhir, kami mengaturnya agar
‫kami selalu memiliki tanda kutip tunggal.
‫Jadi untuk menjaga agar kode kita tetap
‫konsisten di sini, mari
‫kita lanjutkan dan dengan sangat cepat membuat file konfigurasi yang lebih cantik.
‫Jadi ingat itu lebih cantik.
‫Kemudian di sana kami memiliki kutipan tunggal.
‫Setel ke benar.
‫Dan juga ingat lebar cetak.
‫Dan atur ke 80.
‫Oke, simpan saja.
‫Simpan yang ini lagi.
‫Dan jadi Anda lihat kami memiliki kutipan tunggal kami sekarang kembali.
‫Jadi itu terlihat jauh lebih bagus menurut saya.
‫Sekali lagi jika Anda tidak suka dengan cara
‫ini, Anda tentu saja dapat menggunakan pengaturan Anda sendiri.
‫Baiklah.
‫Bagaimanapun,
‫potongan kode di sini
‫sekarang seharusnya sudah melakukan permintaan HTTP.
‫Jadi mari
‫kita benar-benar mengujinya.
‫Dan memang,
‫kami benar-benar memiliki gambar ini di sini.
‫Jadi sebenarnya
‫yang kita inginkan ada di
‫dalam sobat ini di properti pesan.
‫Jadi pesan
‫titik.
‫Jadi seperti ini.
‫Jadi di sini kita memiliki gambar retriever kita.
‫Mari kita lanjutkan dan benar-benar mengubah breed di sini.
‫Dan aku tidak terlalu baik dengan anjing.
‫Mari kita gunakan jenis ini di sini yang saya
‫tahu, Labrador.
‫Aku bahkan tidak tahu bagaimana mengatakannya.
‫Tapi saya
‫pikir itu dia, itu ada.
‫Mari kita simpan di sini lagi.
‫Dan sekarang kita memiliki gambar lain.
‫Kami benar-benar dapat mengklik ini di sini dan
‫itu akan membuka gambar itu untuk kami.
‫Oke.
‫Jadi untuk melakukan permintaan HTTP ini di sini, kami
‫membutuhkan data yang kami dapatkan sebelumnya.
‫Jadi potongan data ini.
‫Jadi kami perlu melakukan permintaan ini di
‫dalam fungsi panggilan balik ini dari
‫fungsi membaca file, bukan?
‫Jadi Anda sudah memiliki fungsi panggilan balik di sini.
‫Jadi yang ini di dalam panggilan balik.
‫Tapi sekarang kita benar-benar akan menambahkan satu lagi.
‫Karena sekarang kami ingin menyimpan string ini di sini
‫ke dalam file teks baru.
‫Dan jadi kita akan melakukannya di sini.
‫Dan kemudian itu lagi akan memiliki fungsi
‫panggilan balik lagi.
‫Oke, masuk akal?
‫Jadi
‫fs
‫writefile dan kemudian nama filenya.
‫Sebut saja gambar anjing yang satu itu. teks.
‫Kemudian data yang ingin kita simpan ke file
‫yang diistirahatkan. tubuh. pesan.
‫Dan kemudian fungsi panggilan balik.
‫Dan yang ini tentu saja tidak akan memiliki data
‫apa pun, tetapi kami memiliki kesalahan lagi.
‫Mari kita log sesuatu ke konsol
‫seperti gambar anjing acak yang
‫disimpan ke file.
‫Berikan save, kemudian akan
‫dijalankan kembali dan ini adalah file gambar kita.
‫Dan sebenarnya Anda dapat melihat bahwa kode
‫VS menampilkan gambar itu di sini untuk kami.
‫Berikan lagi simpan di sini, itu
‫kemudian akan menjalankan kembali kode kami
‫dan sekarang kami memiliki, memang kami
‫memiliki gambar yang berbeda.
‫Baiklah.
‫Jadi kode kita benar-benar berfungsi.
‫Mari kita tambahkan pegangan kesalahan kecil
‫di sini jika terjadi kesalahan.
‫Sebagai contoh, katakanlah kita menambahkan beberapa nama aneh di sini.
‫Jalankan ini lagi.
‫Dan sekarang tidak akan dapat menemukan gambar
‫untuk itu.
‫Dan itu akan benar-benar menghasilkan kesalahan di sini.
‫Jadi, kita harus
‫selalu melakukan penanganan kesalahan semacam ini di
‫awal
‫dan mengatakan jika ada kesalahan,
‫dan kita bisa mencatat kesalahan. pesan.
‫Dan sebenarnya kita juga harus mengatakan
‫bahwa kita ingin segera kembali dari fungsi ini jika ada kesalahan.
‫Jadi itu akan kembali dan masuk
‫ke konsol, kesalahan ini.
‫Dan tidak ada lagi yang akan terjadi kemudian.
‫Oke.
‫Jadi dikatakan lagi, tidak ditemukan di sini.
‫Dan itu tidak menyimpan apa pun
‫ke file karena kami sudah kembali dari fungsi di sini.
‫Oke?
‫Dan hal yang sama sebenarnya
‫di sini jika ada kesalahan saat menyimpan file ke disk.
‫Mari kita kembali ke sini, berikan penyelamatan
‫lagi.
‫Dan sekarang ini berfungsi dengan baik lagi.
‫Oke.
‫Jadi ini hanyalah
‫contoh kecil
‫untuk menunjukkan kepada Anda betapa mudahnya berakhir dengan panggilan
‫balik di dalam panggilan balik di dalam panggilan balik.
‫Dan itu tentu saja karena, kita
‫sudah tahu bahwa di
‫Note JS, kita harus selalu menggunakan kode asinkron, bukan?
‫Kami akhirnya menggunakan panggilan balik di dalam
‫panggilan balik di dalam panggilan balik.
‫Dan terkadang itu
‫bisa lebih dalam dari yang kita miliki di sini.
‫Anda tentu saja
‫dapat memiliki 10 level di dalam satu sama lain.
‫Sekarang semua panggilan ini kembali,
‫mereka membuat kode kita terlihat sedikit berantakan.
‫Itu membuatnya sulit untuk dipahami dan juga secara
‫umum, sulit untuk dipertahankan.
‫Sekali lagi mungkin tidak pada level ini dengan hanya tiga panggilan balik
‫di dalam satu sama lain.
‫Tetapi jika kita membuatnya lebih dalam, itu bisa
‫dengan cepat menjadi mimpi
‫buruk untuk mempertahankan kode seperti ini.
‫Dan itulah mengapa pola
‫ini disebut panggilan balik neraka.
‫Sangat mudah
‫untuk mengidentifikasi bentuk segitiga ini dalam kode kita.
‫Itu yang kita miliki di sini.
‫Seperti bentuk segitiga semacam ini.
‫Setiap kali Anda melihat ini, itu pertanda bahwa Anda
‫pada dasarnya sedang
‫dalam panggilan balik neraka.
‫Oke?
‫Dan Anda
‫mungkin akan melihat atau mendengar istilah ini ketika
‫Anda melakukan riset Note JS atau semacamnya.
‫Namun saat ini, ini sebenarnya satu-satunya cara
‫yang kami ketahui, tentang cara menulis kode asinkron
‫pada saat ini.
‫Tapi kita akan menyimpannya di sepanjang sisa
‫bagian kecil ini.
‫Jadi kita akan belajar bagaimana menggunakan
‫sesuatu yang disebut Promises.
‫Dan itu pada akhirnya akan
‫memecahkan masalah kita
‫dan membuat kode kita lebih mudah dibaca dan dipelihara.
‫Jadi mari kita lakukan itu di sisa bagian.