Memulai dengan Janji JavaScript

Kode asinkron berguna untuk melakukan tugas yang sedang membuang-buang waktu tapi tentu saja tidak tanpa kontra. Penggunaan kode Async fungsi panggilan balik untuk memproses hasilnya, namun fungsi panggilan balik tidak dapat mengembalikan nilai bahwa fungsi JavaScript khas bisa.

Dengan demikian, mereka tidak hanya menghilangkan kemampuan kita untuk mengendalikan pelaksanaan fungsi tetapi juga membuat penanganan kesalahan sedikit merepotkan. Di sinilah tempat Janji obyek masuk, karena bertujuan untuk mengisi beberapa lubang dalam pengkodean asinkron.

Janji secara teknis a objek internal standar dalam JavaScript, artinya itu datang bawaan untuk JavaScript. Digunakan untuk mewakili hasil akhirnya dari blok kode asinkron (atau alasan mengapa kode gagal) dan memiliki metode untuk mengontrol eksekusi kode asinkron.

Sintaksis

Kita bisa menciptakan contoh dari Janji obyek menggunakan baru kata kunci:

 Janji baru (fungsi (menyelesaikan, menolak) ); 

Fungsinya dilewatkan sebagai parameter ke Janji() konstruktor dikenal sebagai pelaksana. Itu memegang kode asinkron dan memiliki dua parameter Fungsi mengetik, disebut sebagai menyelesaikan dan menolak fungsi (lebih lanjut tentang ini sebentar lagi).

Negara bagian Janji obyek

Itu keadaan awal dari a Janji objek disebut tertunda. Dalam keadaan ini, hasil perhitungan asinkron tidak ada.

Status pending awal berubah menjadi terpenuhi nyatakan kapan perhitungannya berhasil. Itu hasil perhitungan tersedia di negara ini.

Dalam hal perhitungan asinkron gagal, itu Janji objek bergerak ke ditolak nyatakan dari awal tertunda negara. Dalam kondisi ini, alasan kegagalan perhitungan (mis. pesan kesalahan) tersedia.

Untuk pergi dari tertunda untuk terpenuhi negara, menyelesaikan() disebut. Untuk pergi dari tertunda untuk ditolak negara, menolak() disebut.

Itu kemudian dan menangkap metode

Ketika negara perubahan dari tertunda untuk terpenuhi, pengendali acara Janji objek kemudian metode dieksekusi. Dan, ketika negara perubahan dari tertunda untuk ditolak, pengendali acara Janji objek menangkap metode dieksekusi.

Contoh 1

“Tidak Dijanjikan” kode

Asumsikan ada hello.txt file yang mengandung “Halo” kata. Begini cara kami dapat menulis permintaan AJAX ambil file itu dan perlihatkan isinya, tanpa menggunakan Janji obyek:

 function getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () coba switch (this.status) case 200: document.write (this.response); istirahat; kasus 404: lempar 'File Tidak Ditemukan'; default: melempar 'Gagal mengambil file';  catch (err) console.log (err);  getTxt (); 

Jika konten file sudah berhasil diambil, yaitu. kode status respons adalah 200, teks responsnya adalah ditulis ke dalam dokumen. Jika file tersebut tidak ditemukan (status 404), Sebuah “Berkas tidak ditemukan” pesan kesalahan dilemparkan. Kalau tidak, a pesan kesalahan umum menunjukkan kegagalan mengambil file yang dilemparkan.

“Dijanjikan” kode

Sekarang, ayo Promisikan kode di atas:

 function getTxt () mengembalikan Promise baru (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: diselesaikan (this.response); case 404: reject ('File Not Found'); default: reject ('Gagal to ambil file ');;);  getTxt (). lalu (fungsi (txt) document.write (txt);). catch (fungsi (err) console.log (err);); 

Itu getTxt () fungsi sekarang dikodekan ke mengembalikan contoh baru dari Janji obyek, dan fungsi pelaksananya menyimpan kode asinkron dari sebelumnya.

Ketika kode status respons adalah 200, itu Janji aku s terpenuhi oleh panggilan menyelesaikan() (tanggapan dilewatkan sebagai parameter menyelesaikan()). Ketika kode status 404 atau yang lain, kode Janji aku s ditolak menggunakan menolak() (dengan pesan kesalahan yang sesuai sebagai parameter menolak()).

Itu penangan acara untuk kemudian() dan menangkap() metode dari Janji objek adalah ditambahkan di akhir.

Ketika Janji aku s terpenuhi, pawang kemudian() Metode dijalankan. Argumennya adalah parameter lulus dari menyelesaikan(). Di dalam event handler, teks respons (diterima sebagai argumen) adalah ditulis ke dalam dokumen.

Ketika Janji aku s ditolak, pengendali acara menangkap() Metode dijalankan, mencatat kesalahan.

Itu keuntungan utama dari kode yang Dijanjikan di atas adalah penanganan kesalahan. Alih-alih melemparkan Pengecualian Tidak Berhasil - seperti dalam versi Non-Dijanjikan - pesan kegagalan yang sesuai dikembalikan dan dicatat.

Tapi, bukan hanya itu saja kembali dari pesan kegagalan tetapi juga dari hasil perhitungan asynchronous itu bisa benar-benar menguntungkan bagi kita. Untuk melihat itu, kita perlu memperluas contoh kita.

Contoh 2

“Tidak Dijanjikan” kode

Alih-alih hanya menampilkan teks dari hello.txt, aku ingin menggabungkannya dengan “Dunia” kata dan menampilkannya di layar setelah batas waktu 2 detik. Berikut kode yang saya gunakan:

 function getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () coba switch (this.status) case 200: document.write (concatTxt (this.response))); istirahat; kasus 404: lempar 'File Tidak Ditemukan'; default: melempar 'Gagal mengambil file';  catch (err) console.log (err);  function concatTxt (res) setTimeout (function () return (res + 'World'), 2000);  getTxt (); 

Pada kode status 200, the concatTxt () fungsi dipanggil ke menyatukan teks respons dengan “Dunia” kata sebelum menuliskannya ke dalam dokumen.

Tapi, kode ini tidak akan berfungsi seperti yang diinginkan. Itu setTimeout () fungsi panggilan balik tidak dapat mengembalikan string bersambung. Apa yang akan dicetak ke dokumen adalah tidak terdefinisi karena itu apa concatTxt () kembali.

“Dijanjikan” kode

Jadi, agar kode berfungsi, mari Promisikan kode di atas, termasuk concatTxt ():

 function getTxt () mengembalikan Promise baru (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: diselesaikan (this.response); case 404: reject ('File Not Found'); default: reject ('Gagal to ambil file ');;);  function concatTxt (txt) return New Promise (fungsi (resolusikan, tolak) setTimeout (function () resol (txt + 'World');, 2000););  getTxt (). then ((txt) => return concatTxt (txt);). then ((txt) => document.write (txt);). catch ((err) => console. log (err);); 

Seperti getTxt (), itu concatTxt () berfungsi juga mengembalikan yang baru Janji obyek alih-alih teks gabungan. Itu Janji dikembalikan oleh concatTxt () aku s diselesaikan di dalam fungsi panggilan balik dari setTimeout ().

Mendekati akhir kode di atas, pengendali acara yang pertama kemudian() Metode berjalan ketika Janji dari getTxt () aku s terpenuhi, yaitu ketika file tersebut berhasil diambil. Di dalam pawang itu, concatTxt () disebut dan Janji dikembalikan oleh concatTxt () dikembalikan.

Penangan acara yang kedua kemudian() Metode berjalan ketika Janji dikembalikan oleh concatTxt () aku s terpenuhi, yaitu dua detik waktu habis sudah berakhir dan menyelesaikan() disebut dengan string bersambung sebagai parameternya.

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

Dalam versi yang Dijanjikan ini, the “Halo Dunia” string akan berhasil dicetak ke dokumen.