Bermula dengan Janji JavaScript

Kod tak segerak berguna untuk melaksanakan tugas yang ada mengambil masa tetapi, tentu saja, itu tidak bersalah. Penggunaan kod Async fungsi panggil balik untuk memproses keputusannya, namun fungsi panggil balik tidak dapat mengembalikan nilai bahawa fungsi JavaScript biasa boleh.

Oleh itu, mereka bukan sahaja mengambil keupayaan kita untuk mengawalnya pelaksanaan fungsi tersebut tetapi juga membuat pengendalian ralat sedikit kerumitan. Ini adalah di mana Janji objek datang dalam, kerana ia bertujuan untuk mengisi sebahagian daripada berlubang dalam kod tak segerak.

Janji secara teknikal a objek dalaman piawai dalam JavaScript, bermakna ia datang terbina dalam untuk JavaScript. Ia digunakan untuk mewakili hasil akhirnya blok kod asynchronous (atau sebab mengapa kod gagal) dan mempunyai kaedah untuk mengawalnya pelaksanaan kod asynchronous.

Sintaks

Kita boleh buat contohnya Janji objek menggunakan baru kata kunci:

 Janji baru (fungsi (menyelesaikan, menolak) ); 

Fungsinya diluluskan sebagai parameter kepada Janji () pembina dikenali sebagai pelaksana. Ia memegang kod asynchronous dan mempunyai dua parameter iaitu Fungsi jenis, dirujuk sebagai selesaikan dan menolak fungsi (lebih banyak lagi pada masa ini).

Negeri Janji objek

The keadaan awal a Janji objek dipanggil yang belum selesai. Dalam keadaan ini, keputusan pengiraan tidak segerak tidak wujud.

Perubahan tertunda awal berubah kepada dipenuhi nyatakan apabila pengiraan adalah berjaya. The hasil perhitungan boleh didapati di negeri ini.

Sekiranya pengiraan tak segerak gagal, yang Janji objek bergerak ke ditolak nyatakan dari awalnya yang belum selesai negeri. Dalam keadaan ini, sebab kegagalan pengiraan (mis. mesej ralat) disediakan.

Untuk pergi dari sini yang belum selesai kepada dipenuhi negeri, menyelesaikan () dipanggil. Untuk pergi dari sini yang belum selesai kepada ditolak negeri, menolak () dipanggil.

The kemudian dan tangkapan kaedah

Apabila negeri itu perubahan dari yang belum selesai kepada dipenuhi, penganjur acara Janji objek kemudian kaedah dilaksanakan. Dan, apabila negeri itu perubahan dari yang belum selesai kepada ditolak, penganjur acara Janji objek tangkapan kaedah dilaksanakan.

Contoh 1

“Tidak Dijanjikan” kod

Anggapkan ada a hello.txt fail yang mengandungi “Hello” perkataan. Inilah caranya kita boleh menulis permintaan AJAX ambil fail itu dan tunjukkan kandungannya, tanpa menggunakan Janji objek:

 fungsi getTxt () let xhr = XMLHttpRequest baru (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('teks / kosong'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (this.response); pecah; kes 404: buang 'Fail Not Found'; lalai: buang 'Gagal mengambil fail';  catch (err) console.log (err);  getTxt (); 

Jika kandungan fail tersebut telah berjaya diambil, i.e. kod status tindak balas adalah 200, teks tindak balas adalah yang ditulis dalam dokumen itu. Jika fail itu tidak dijumpai (status 404), a “Fail tidak dijumpai” mesej ralat dibuang. Jika tidak, a mesej ralat umum menunjukkan kegagalan mengambil fail dibuang.

“Promosi” kod

Sekarang, mari Promarkan kod di atas:

 fungsi getTxt () return new Promise (fungsi (menyelesaikan, menolak) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resolve (this.response); case 404: reject ('Fail Not Found' mengambil fail ');;);  getTxt (), kemudian (function (txt) document.write (txt);). catch (function (err) console.log (err);); 

The getTxt () fungsi kini dikodkan kembali contoh baru dari Janji objek, dan fungsi pelaksananya memegang kod asynchronous dari sebelumnya.

Apabila kod status tindak balas adalah 200, yang Janji adalah dipenuhi oleh memanggil menyelesaikan () (sambutan diluluskan sebagai parameter menyelesaikan ()). Apabila kod status adalah 404 atau yang lain, yang Janji adalah ditolak menggunakan menolak () (dengan mesej ralat yang sesuai sebagai parameter menolak ()).

The pengendali acara untuk kemudian () dan tangkapan () kaedah daripada Janji objek adalah ditambah pada akhir.

Apabila Janji adalah dipenuhi, penganjur kemudian () kaedah dijalankan. Hujahnya adalah parameter yang diluluskan dari menyelesaikan (). Di dalam pengendali acara, teks tindak balas (diterima sebagai hujah) adalah yang ditulis dalam dokumen itu.

Apabila Janji adalah ditolak, penganjur acara tangkapan () kaedah dijalankan, pembalakan kesilapan.

The kelebihan utama versi Kod Promisifikasi di atas adalah pengendalian ralat. Daripada membuang Pengecualian Uncaught sekitar - seperti dalam versi Non-Promised - yang mesej kegagalan yang sesuai dikembalikan dan dilog masuk.

Tetapi, itu bukan sekadar kembali daripada mesej kegagalan tetapi juga hasil pengiraan tak segerak yang boleh memberi manfaat kepada kita. Untuk melihatnya, kami perlu mengembangkan contoh kami.

Contoh 2

“Tidak Dijanjikan” kod

Daripada hanya memaparkan teks dari hello.txt, saya mahu menggabungkannya dengan “Dunia” perkataan dan memaparkannya pada skrin selepas masa 2 saat. Inilah kod yang saya gunakan:

 fungsi getTxt () let xhr = XMLHttpRequest baru (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('teks / kosong'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (concatTxt (this.response)); pecah; kes 404: buang 'Fail Not Found'; lalai: buang 'Gagal mengambil fail';  catch (err) console.log (err);  fungsi concatTxt (res) setTimeout (function () return (res + 'World'), 2000);  getTxt (); 

Pada kod status 200, yang concatTxt () fungsi dipanggil untuk menggabungkan teks tindak balas dengan “Dunia” perkataan sebelum menulisnya ke dalam dokumen.

Tetapi, kod ini tidak akan berfungsi seperti yang dikehendaki. The setTimeout () fungsi panggil balik tidak boleh mengembalikan rentetan yang disambungkan. Apa yang akan dicetak pada dokumen itu ialah undefined kerana itu apa concatTxt () pulangan.

“Promosi” kod

Jadi, untuk membuat kod kerja, mari Promarkan kod di atas, termasuk concatTxt ():

 fungsi getTxt () return new Promise (fungsi (menyelesaikan, menolak) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resolve (this.response); case 404: reject ('Fail Not Found' mengambil fail ');;);  fungsi concatTxt (txt) kembali Janji baru (fungsi (menyelesaikan, menolak) setTimeout (function () resolve (txt + 'World');, 2000););  getTxt (), kemudian (txt) => return concatTxt (txt);). kemudian (txt) => document.write (txt); log (sesat);); 

Seperti getTxt (), yang concatTxt () fungsi juga pulangan yang baru Janji objek bukannya teks bersambung. The Janji dikembalikan oleh concatTxt () adalah diselesaikan di dalam fungsi panggil balik balik setTimeout ().

Berhampiran akhir kod di atas, pengendali peristiwa yang pertama kemudian () kaedah berjalan apabila Janji daripada getTxt () adalah dipenuhi, iaitu ketika fail itu diambil berjaya. Di dalam pengendali itu, concatTxt () dipanggil dan juga Janji dikembalikan oleh concatTxt () dikembalikan.

Pengendali peristiwa kedua kemudian () kaedah berjalan apabila Janji dikembalikan oleh concatTxt () adalah dipenuhi, iaitu dua saat tamat masa selesai dan menyelesaikan () dipanggil dengan rentetan yang disatukan sebagai parameternya.

Akhirnya, tangkapan () menangkap semua pengecualian dan mesej kegagalan dari kedua Janji.

Dalam versi Promosi ini, “Hai dunia” rentetan akan berjaya dicetak kepada dokumen itu.