Rumah >hujung hadapan web >tutorial js >Apakah janji -janji dalam JavaScript, dan bagaimana mereka boleh digunakan untuk mengendalikan operasi tak segerak?
Memahami janji JavaScript
Dalam JavaScript, janji adalah objek yang mewakili penyelesaian akhirnya (atau kegagalan) operasi tak segerak, dan nilai yang terhasil. Daripada secara langsung mengembalikan nilai, fungsi tak segerak mengembalikan janji. Janji ini bertindak sebagai pemegang tempat untuk keputusan akhirnya. Manfaat utama ialah ia menyediakan cara yang lebih bersih dan lebih mudah untuk mengendalikan operasi tak segerak berbanding dengan fungsi panggil balik tradisional.
Mengendalikan operasi tak segerak dengan janji
Janji boleh berada di salah satu daripada tiga negeri:
Janji menggunakan kaedah .then()
untuk mengendalikan penyelesaian yang berjaya dan kaedah .catch()
untuk mengendalikan penolakan. Kaedah .then()
mengambil dua hujah: fungsi untuk melaksanakan jika janji itu dipenuhi, dan fungsi pilihan untuk melaksanakan jika janji ditolak (walaupun ini lebih baik dikendalikan dengan .catch()
untuk kejelasan). Kaedah .catch()
secara khusus mengendalikan janji yang ditolak.
Inilah contoh mudah:
<code class="javascript">function fetchData(url) { return new Promise((resolve, reject) => { fetch(url) .then(response => response.json()) .then(data => resolve(data)) .catch(error => reject(error)); }); } fetchData('https://api.example.com/data') .then(data => { console.log('Data received:', data); }) .catch(error => { console.error('Error fetching data:', error); });</code>
Contoh ini menunjukkan bagaimana fetchData
mengembalikan janji. Kaedah .then()
mengendalikan pengambilan data JSON yang berjaya, dan .catch()
mengendalikan sebarang kesilapan semasa proses pengambilan. Pendekatan berstruktur ini meningkatkan kebolehbacaan dan kebolehpercayaan kod tak segerak.
Janji vs Callbacks: Perbandingan Pembacaan dan Pengekalkan
Callbacks, sementara berfungsi, sering membawa kepada struktur bersarang yang dikenali sebagai "neraka panggil balik" ketika berurusan dengan pelbagai operasi tak segerak. Struktur yang sangat bersarang ini menjadikan kod sukar dibaca, difahami, dan diselenggarakan. Janji menawarkan peningkatan yang ketara dalam hal ini.
Kebolehbacaan yang lebih baik: Janji menggunakan struktur yang bersih dan linear. Daripada panggil balik bersarang, rantaian kaedah .then()
bersama -sama secara berurutan, menjadikan aliran operasi tak segerak lebih mudah untuk diikuti. Kod ini menjadi lebih deklaratif dan lebih mudah untuk menghuraikan secara visual.
Pengekalkan yang dipertingkatkan: Struktur linear rantaian janji juga meningkatkan kebolehkerjaan. Menambah atau mengubahsuai operasi asynchronous dalam rantaian janji adalah lebih mudah dan kurang rawan ralat daripada mengubahsuai panggilan balik yang sangat bersarang. Pemisahan kejayaan dan pengendalian kesilapan yang jelas (melalui .then()
dan .catch()
) juga membuat debugging dan penyelesaian masalah lebih mudah.
Pertimbangkan contoh ini yang menggambarkan perbezaannya:
Neraka panggilan balik:
<code class="javascript">fetchData(url1, (data1) => { fetchData(url2, (data2) => { fetchData(url3, (data3) => { // Process data1, data2, data3 }, error3 => { // Handle error3 }); }, error2 => { // Handle error2 }); }, error1 => { // Handle error1 });</code>
Rantai Janji:
<code class="javascript">fetchData(url1) .then(data1 => fetchData(url2)) .then(data2 => fetchData(url3)) .then(data3 => { // Process data1, data2, data3 }) .catch(error => { // Handle errors from any fetchData call });</code>
Pendekatan berasaskan janji jelas lebih mudah dibaca dan dikekalkan.
Kaedah Janji Biasa dan Aplikasi Praktikal Mereka
Beyond .then()
dan .catch()
, beberapa kaedah berguna lain meningkatkan fungsi janji:
.then(onFulfilled, onRejected)
: Seperti yang dibincangkan sebelum ini, kaedah ini mengendalikan yang dipenuhi dan (pilihan) menolak negeri -negeri janji. onFulfilled
menerima nilai yang telah diselesaikan, sementara onRejected
menerima sebab penolakan..catch(onRejected)
: Ini adalah satu singkat untuk .then(null, onRejected)
, yang direka khusus untuk mengendalikan janji -janji yang ditolak. Ia memudahkan pengendalian kesilapan dengan memusatkan pengendalian penolakan..finally(onFinally)
: Kaedah ini melaksanakan fungsi panggil balik tanpa mengira sama ada janji itu dipenuhi atau ditolak. Ia berguna untuk tugas pembersihan, seperti menutup sambungan atau melepaskan sumber.Promise.all([promise1, promise2, ...])
: Kaedah ini mengambil pelbagai janji dan mengembalikan janji baru yang menyelesaikan apabila semua janji input telah diselesaikan. Nilai yang diselesaikan adalah pelbagai nilai yang diselesaikan dari janji input. Sekiranya ada janji input yang ditolak, janji yang dihasilkan juga menolak.Promise.race([promise1, promise2, ...])
: Kaedah ini mengambil pelbagai janji dan mengembalikan janji baru yang menyelesaikan atau menolak sebaik sahaja salah satu daripada janji input menyelesaikan atau menolak.Promise.resolve(value)
: Mewujudkan janji yang segera diselesaikan dengan value
yang diberikan.Promise.reject(reason)
reason
Contoh praktikal:
<code class="javascript">// Promise.all Promise.all([fetchData('url1'), fetchData('url2')]) .then(results => { console.log('Data from both URLs:', results); }) .catch(error => { console.error('Error fetching data:', error); }); // Promise.race Promise.race([fetchData('url1'), fetchData('url2')]) //Faster URL wins .then(result => { console.log('First data received:', result); }) .catch(error => console.error(error)); // Promise.finally fetchData('url') .then(data => console.log(data)) .catch(error => console.error(error)) .finally(() => console.log('Data fetching complete'));</code>
Amalan terbaik untuk menggunakan janji
Mengelakkan perangkap biasa ketika bekerja dengan janji memerlukan amalan pengekodan yang penuh perhatian:
.then()
. Sentiasa masukkan blok .catch()
untuk mengendalikan kesilapan yang berpotensi dengan anggun. Mengabaikan kesilapan boleh membawa kepada tingkah laku aplikasi yang tidak dijangka..then()
rantai: Nesting yang berlebihan boleh membuat kod sukar untuk dibaca dan diselenggara. Pertimbangkan menggunakan async/menunggu (pendekatan yang lebih moden yang dibina di atas janji -janji) untuk meratakan struktur.Promise.all()
untuk operasi selari: Apabila pelbagai operasi asynchronous adalah bebas, gunakan Promise.all()
untuk menjalankannya secara serentak dan meningkatkan prestasi..then()
blok, menyatukan pengendalian ralat dalam satu .catch()
blok pada akhir rantai.try...catch
blok dalam fungsi async (apabila menggunakan async/menunggu): Ini membolehkan pengendalian ralat yang lebih berstruktur dalam kod asynchronous.Promise.finally()
: Gunakan finally
untuk tugas pembersihan yang harus selalu dilaksanakan, tanpa mengira kejayaan atau kegagalan.Dengan mematuhi amalan terbaik ini, pemaju dapat memanfaatkan kuasa janji dengan berkesan sambil mengurangkan isu -isu yang berpotensi dalam pengaturcaraan JavaScript yang tidak segerak. Ingat bahawa kod yang jelas dan berstruktur adalah yang paling penting untuk membina aplikasi yang mantap dan boleh dipelihara.
Atas ialah kandungan terperinci Apakah janji -janji dalam JavaScript, dan bagaimana mereka boleh digunakan untuk mengendalikan operasi tak segerak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!