Menggunakan Janji dalam JavaScript

Dari waktu ke waktu kami menerbitkan materi yang terkait dengan penggunaan janji dalam JavaScript.


Mengapa perhatian begitu terpusat pada janji? Kami percaya bahwa intinya adalah bahwa teknologi ini sangat diminati, dan cukup sulit untuk dipahami.

Karena itu, jika Anda ingin lebih memahami janji-janji itu, kami menawarkan Anda terjemahan dari artikel berikutnya tentang topik ini. Penulisnya mengatakan bahwa ia telah mengembangkan Java dan PHP selama 10 tahun terakhir, tetapi selama ini ia telah tertarik dengan JavaScript. Baru-baru ini, ia memutuskan untuk serius terlibat dalam JS, dan janji menjadi subjek pertama yang membuatnya tertarik.



Kami percaya bahwa materi ini akan menarik bagi pengembang pemula yang merasa bahwa, meskipun mereka menggunakan janji, mereka tidak memahaminya dengan cukup baik. Ada kemungkinan bahwa kisah seseorang yang melihat JavaScript dengan tampilan segar dan ingin menjelaskan kepada orang lain apa yang dia pahami, tidak percaya bahwa beberapa hal dapat dimengerti oleh semua orang dan tanpa penjelasan, akan membantu pemula dalam menguasai mekanisme JavaScript.

JavaScript melalui mata pemula

Siapa pun yang mulai menulis dalam JavaScript, mungkin merasakan apa yang disebut "tidak pada tempatnya". Beberapa mengatakan bahwa JS adalah bahasa pemrograman yang sinkron, yang lain mengatakan bahwa itu tidak sinkron. Seorang pemula mendengar tentang kode yang memblokir utas utama, dan tentang kode yang tidak memblokirnya, tentang pola desain berbasis peristiwa, tentang siklus hidup peristiwa, tentang tumpukan panggilan fungsi, tentang antrian acara dan kenaikannya, tentang polyfill. Dia belajar bahwa ada hal-hal seperti Babel, Angular, React, Vue, dan segudang perpustakaan lainnya. Jika Anda baru saja mengenali diri sendiri dalam "pemula" - jangan khawatir tentang hal itu. Anda bukan yang pertama maupun yang terakhir. Bahkan ada istilah untuk ini - yang disebut "kelelahan JavaScript". Lucas F Costa dengan tepat berbicara tentang hal ini: " Kelelahan JavaScript adalah sesuatu yang dapat diamati ketika orang menggunakan alat yang mereka tidak perlu untuk memecahkan masalah yang tidak mereka miliki ."

Tapi jangan bicara tentang hal-hal yang menyedihkan. Jadi, JavaScript adalah bahasa pemrograman sinkron, yang, berkat mekanisme panggilan balik, memungkinkan Anda memanggil fungsi dengan cara yang sama seperti dalam bahasa asinkron.

Sebuah cerita sederhana tentang janji

Kata janji diterjemahkan menjadi janji. Obyek janji dalam pemrograman, yang kita sebut "janji," sangat mirip dengan janji yang biasa orang berikan satu sama lain dalam kehidupan nyata. Jadi mari kita bicara tentang janji-janji ini terlebih dahulu.

Di Wikipedia, Anda dapat menemukan definisi kata "janji" berikut: "kewajiban, persetujuan seseorang untuk memenuhi sesuatu atau, sebaliknya, tidak melakukan". Dalam kamus Ozhegov, "janji" adalah "komitmen sukarela untuk melakukan sesuatu."

Jadi apa yang kita ketahui tentang janji?

1. Sebuah janji memberi Anda jaminan bahwa sesuatu akan dilakukan. Tidak masalah siapa yang melakukan ini: orang yang membuat janji, atau orang lain, atas permintaan orang yang membuat janji. Sebuah janji memberi keyakinan pada sesuatu, berdasarkan keyakinan ini, orang yang menerima janji itu, misalnya, dapat membuat beberapa rencana.
2. Sebuah janji bisa dipenuhi atau tidak.
3. Jika janji itu dipenuhi, maka, sebagai hasilnya, Anda mengharapkan sesuatu yang dapat Anda gunakan di masa depan untuk melakukan tindakan apa pun atau mengimplementasikan rencana apa pun.
4. Jika janji itu tidak dipenuhi, maka Anda akan ingin mencari tahu mengapa orang yang memberikannya tidak dapat memenuhinya. Setelah Anda menemukan alasan untuk apa yang terjadi dan Anda akan yakin bahwa janji itu belum dipenuhi, Anda dapat memikirkan apa yang harus dilakukan selanjutnya, atau bagaimana cara mengatasi situasi tersebut.
5. Setelah Anda dijanjikan sesuatu, yang Anda miliki hanyalah semacam jaminan. Anda tidak dapat memanfaatkan apa yang dijanjikan segera. Anda dapat menentukan sendiri apa yang perlu Anda lakukan jika janji itu dipenuhi (oleh karena itu, Anda akan menerima janji itu), dan apa yang perlu Anda lakukan jika ternyata rusak (dalam hal ini Anda tahu alasan untuk apa yang terjadi, dan karena itu Anda dapat memikirkan rencana cadangan tindakan )
6. Kemungkinan orang yang membuat janji itu akan menghilang begitu saja. Dalam kasus-kasus seperti itu, ada baiknya janji itu terikat pada semacam jangka waktu. Misalnya, jika orang yang memberi Anda janji tidak muncul dalam 10 hari, Anda dapat mengasumsikan bahwa ia memiliki beberapa masalah dan ia melanggar janji. Akibatnya, bahkan jika orang yang membuat janji memenuhi itu dalam 15 hari, itu tidak masalah, jadi Anda sudah bertindak pada rencana alternatif, tidak mengandalkan janji.

Sekarang beralih ke JavaScript.

Janji JavaScript

Saya punya satu aturan: ketika melakukan JavaScript, saya selalu membaca dokumentasi yang dapat ditemukan di MDN. Tampaknya bagi saya bahwa sumber daya ini lebih baik dibandingkan dengan yang lain dalam hal spesifisitas dan kejelasan presentasi. Oleh karena itu, ketika mempelajari janji, saya membiasakan diri dengan materi yang relevan dan bereksperimen dengan kode untuk membiasakan diri dengan konstruksi sintaks yang baru.

Untuk memahami janji-janji itu, Anda harus berurusan dengan dua hal utama. Yang pertama adalah penciptaan janji. Yang kedua adalah memproses hasil yang dikembalikan oleh janji. Meskipun sebagian besar kode yang kita tulis ditujukan untuk bekerja dengan janji yang dibuat, misalnya, oleh perpustakaan tertentu, pemahaman penuh tentang mekanisme kerja janji tidak diragukan lagi akan berguna. Selain itu, bagi seorang programmer yang sudah memiliki beberapa pengalaman, mengetahui cara membuat janji sama pentingnya dengan mengetahui cara bekerja dengannya.

Buat Janji

Begini caranya janji dibuat:

new Promise( /* executor */ function(resolve, reject) { ... } ); 

Konstruktor menerima fungsi yang melakukan tindakan tertentu, kami menyebutnya di sini executor . Fungsi ini membutuhkan dua parameter - resolve dan reject , yang pada gilirannya juga merupakan fungsi. Janji biasanya digunakan untuk melakukan operasi atau kode asinkron yang dapat memblokir utas, misalnya, yang berfungsi dengan file, membuat panggilan API, membuat kueri basis data, berurusan dengan I / O, dan sebagainya. Awal operasi asinkron seperti itu dilakukan dalam fungsi executor . Jika operasi asinkron selesai dengan sukses, maka hasil yang diharapkan dari janji akan dikembalikan dengan memanggil fungsi resolve . Situasi di mana fungsi ini disebut ditentukan oleh pencipta janji. Demikian pula, ketika kesalahan terjadi, informasi tentang apa yang terjadi dikembalikan dengan memanggil fungsi reject .

Sekarang kita tahu, secara umum, bagaimana membuat janji, kita akan membuat janji sederhana untuk lebih memahami segalanya.

 var keepsHisWord; keepsHisWord = true; promise1 = new Promise(function(resolve, reject) { if (keepsHisWord) {   resolve("The man likes to keep his word"); } else {   reject("The man doesnt want to keep his word"); } }); console.log(promise1); 

Inilah yang akan dihasilkan oleh kode ini:


Promise memiliki status (PromiseStatus) dan sebuah nilai (PromiseValue)

Karena janji kami segera diselesaikan, kami tidak dapat menyelidiki keadaan awalnya. Karena itu, mari kita buat janji baru, yang, untuk penyelesaiannya, perlu waktu. Cara termudah untuk melakukan ini adalah dengan menggunakan fungsi setTimeout .

 promise2 = new Promise(function(resolve, reject) { setTimeout(function() {   resolve({     message: "The man likes to keep his word",     code: "aManKeepsHisWord"   }); }, 10 * 1000); }); console.log(promise2); 

Dalam kode ini, janji dibuat yang pasti akan diselesaikan dalam 10 detik. Ini memberi kita kesempatan untuk melihat keadaan janji yang tidak sah.


Janji yang Tidak Terselesaikan

Setelah 10 detik berlalu, janji itu akan terselesaikan. Akibatnya, baik PromiseValue dan PromiseValue akan diperbarui sesuai. Seperti yang Anda lihat, dalam contoh ini kami mengubah fungsi yang disebut ketika janji berhasil diselesaikan, sekarang ia mengembalikan bukan string biasa, tetapi sebuah objek. Ini dilakukan untuk menunjukkan kemampuan untuk mengembalikan struktur data yang kompleks menggunakan fungsi resolve .


Janji diselesaikan setelah 10 detik dan mengembalikan suatu objek

Mari kita sekarang melihat janji itu, yang kami putuskan untuk tidak mengizinkan, tetapi untuk menolak. Untuk melakukan ini, kami memodifikasi kode yang sudah digunakan dalam contoh pertama.

 keepsHisWord = false; promise3 = new Promise(function(resolve, reject) { if (keepsHisWord) {   resolve("The man likes to keep his word"); } else {   reject("The man doesn't want to keep his word"); } }); console.log(promise3); 

Karena kami tidak menangani situasi penolakan janji, pesan kesalahan akan ditampilkan di konsol browser (Google Chrome digunakan di sini). Kami akan berbicara lebih banyak tentang ini di bawah ini.


Janji yang Ditolak

Sekarang, setelah menganalisis ketiga contoh, kita dapat melihat bahwa tiga nilai yang berbeda dapat muncul di PromiseStatus : pending (tertunda), resolved (resolusi berhasil) dan rejected (ditolak). Ketika sebuah janji dibuat, di PromiseStatus akan pending , dan di PromiseValue akan undefined . Nilai-nilai ini akan tetap sampai janji terselesaikan atau ditolak. Ketika sebuah janji berada dalam keadaan resolved atau rejected , itu disebut janji yang settled . Janji semacam itu telah beralih dari negara tunggu ke negara di mana ia memiliki negara yang resolved atau negara yang rejected .

Sekarang kita telah belajar bagaimana janji dibuat, kita dapat berbicara tentang bagaimana memproses apa yang dikembalikan. Untuk mengetahui hal ini, kita perlu memahami struktur objek Promise .

Obyek Janji

Menurut dokumentasi MDN, objek Promise adalah hasil dari penyelesaian operasi asinkron yang berhasil atau tidak berhasil.

Objek Promise memiliki metode statis dan metode prototipe objek. Metode statis dapat dipanggil tanpa membuat turunan objek, dan untuk memanggil metode prototipe, Anda memerlukan turunan objek Promise . Perlu diingat bahwa metode statis dan reguler mengembalikan objek Promise . Ini membuat pekerjaan lebih mudah.

▍ Metode prototipe objek janji

Mari kita bicara tentang metode prototipe objek Promise . Ada tiga metode seperti itu. Jangan lupa bahwa metode ini dapat dipanggil pada instance objek Promise , dan bahwa mereka sendiri yang mengembalikan janji. Berkat semua metode ini, Anda dapat menetapkan penangan yang merespons perubahan dalam status janji. Seperti yang telah kita lihat, ketika sebuah janji dibuat, itu dalam kondisi pending . Ketika sebuah janji bertransisi ke keadaan resolved atau rejected , setidaknya satu dari metode berikut ini akan dipanggil:

 Promise.prototype.catch(onRejected) Promise.prototype.then(onFulfilled, onRejected) Promise.prototype.finally(onFinally) 

Di bawah ini adalah diagram operasi janji dan peristiwa yang mengarah pada panggilan .catch dan .catch . Karena metode ini mengembalikan objek Promise , panggilan mereka dapat dirantai, ini juga tercermin dalam diagram. Jika janji tersebut menggunakan metode .finally , itu akan dipanggil ketika janji pindah ke negara yang settled , terlepas dari apakah janji itu berhasil diselesaikan atau ditolak.


Skema kerja promis (gambar diambil dari sini )

Berikut ini cerpennya. Anda seorang pelajar dan minta ibu Anda membelikan Anda ponsel. Dia berkata: "Jika penghematan kami lebih dari biaya telepon, saya akan membelinya untuk Anda." Sekarang menceritakan kembali kisah ini dalam JavaScript.

 var momsPromise = new Promise(function(resolve, reject) { momsSavings = 20000; priceOfPhone = 60000; if (momsSavings > priceOfPhone) {   resolve({     brand: "iphone",     model: "6s"   }); } else {   reject("We donot have enough savings. Let us save some more money."); } }); momsPromise.then(function(value) { console.log("Hurray I got this phone as a gift ", JSON.stringify(value)); }); momsPromise.catch(function(reason) { console.log("Mom coudn't buy me the phone because ", reason); }); momsPromise.finally(function() { console.log(   "Irrespecitve of whether my mom can buy me a phone or not, I still love her" ); }); 

Inilah yang akan dihasilkan oleh kode ini:


Ibu tidak menepati janji

Jika kita mengubah nilai variabel momsSavings menjadi 200.000, maka ibu akan dapat membeli hadiah untuk putranya. Dalam hal ini, kode di atas akan menampilkan yang berikut.


Ibu menepati janji

Sekarang mari kita bayangkan bahwa kode tersebut dirancang sebagai perpustakaan, dan kami menggunakan perpustakaan ini. Mari kita bicara tentang penggunaan .catch dan .catch .

Karena metode onFulfilled dapat menetapkan penangan onFulfilled yang dipanggil ketika janji berhasil diselesaikan dan penangan onRejected yang dipanggil saat janji ditolak, alih-alih menggunakan metode .catch dan metode .catch , kita dapat mencapai efek yang sama hanya dengan satu. .then metode. Begini tampilannya:

 momsPromise.then( function(value) {   console.log("Hurray I got this phone as a gift ", JSON.stringify(value)); }, function(reason) {   console.log("Mom coudn't buy me the phone because ", reason); } ); 

Ini adalah contoh yang berfungsi, tetapi untuk mencegah pembacaan kode, lebih baik menggunakan metode .catch dan .catch daripada yang universal .then .

Agar contoh-contoh ini dijalankan di browser, dan khususnya di Google Chrome, saya mencoba menghindari ketergantungan eksternal. Untuk lebih memahami apa yang akan kita pertimbangkan nanti, mari kita buat fungsi yang mengembalikan janji, resolusi atau penolakan yang terjadi secara acak. Ini akan memungkinkan kita untuk mengalami berbagai skenario bekerja dengan janji. Untuk memahami fitur fungsi asinkron, kami akan menetapkan penundaan acak dalam janji kami. Karena kita membutuhkan angka acak, kita membuat fungsi yang mengembalikan angka acak antara x dan y . Inilah fungsinya.

 function getRandomNumber(start = 1, end = 10) { //,      start  end >=1  end > start return parseInt(Math.random() * end) % (end-start+1) + start; } 

Sekarang buat fungsi yang mengembalikan janji. promiseTRRARNOSG saja promiseTRRARNOSG . Nama fungsi ini adalah promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator . promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator , yaitu, itu adalah generator janji yang secara acak diselesaikan atau ditolak setelah sejumlah detik acak. Fungsi ini akan membuat janji yang akan diizinkan atau ditolak setelah periode waktu acak antara 2 dan 10 detik. Untuk mengizinkan atau menolak janji secara acak, kami mendapatkan nomor acak antara 1 dan 10. Jika angka ini lebih dari 5, janji akan diizinkan, jika tidak, itu akan ditolak.

 function getRandomNumber(start = 1, end = 10) { //,      start  end >=1  end > start return (parseInt(Math.random() * end) % (end - start + 1)) + start; } var promiseTRRARNOSG = (promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator = function() { return new Promise(function(resolve, reject) {   let randomNumberOfSeconds = getRandomNumber(2, 10);   setTimeout(function() {     let randomiseResolving = getRandomNumber(1, 10);     if (randomiseResolving > 5) {       resolve({         randomNumberOfSeconds: randomNumberOfSeconds,         randomiseResolving: randomiseResolving       });     } else {       reject({         randomNumberOfSeconds: randomNumberOfSeconds,         randomiseResolving: randomiseResolving       });     }   }, randomNumberOfSeconds * 1000); }); }); var testProimse = promiseTRRARNOSG(); testProimse.then(function(value) { console.log("Value when promise is resolved : ", value); }); testProimse.catch(function(reason) { console.log("Reason when promise is rejected : ", reason); }); //             ,    .     ,  - . for (i=1; i<=10; i++) { let promise = promiseTRRARNOSG(); promise.then(function(value) {   console.log("Value when promise is resolved : ", value); }); promise.catch(function(reason) {   console.log("Reason when promise is rejected : ", reason); }); } 

Jalankan kode ini di konsol browser untuk melihat bagaimana perilaku janji yang diizinkan dan ditolak. Selanjutnya, kita akan berbicara tentang bagaimana Anda dapat membuat banyak janji dan memeriksa hasil penerapannya, menggunakan mekanisme lain.

▍ Metode statis objek Janji

Ada empat metode statis objek Promise .

Berikut adalah dua metode - Promise.reject(reason) dan Promise.resolve(value) , yang memungkinkan Anda untuk membuat, masing-masing, ditolak dan diizinkan janji.

Inilah cara bekerja dengan metode Promise.reject , yang menciptakan janji yang ditolak.

 var promise3 = Promise.reject("Not interested"); promise3.then(function(value){ console.log("This will not run as it is a rejected promise. The resolved value is ", value); }); promise3.catch(function(reason){ console.log("This run as it is a rejected promise. The reason is ", reason); }); 

Berikut adalah contoh menggunakan metode Promise.resolve yang menciptakan Promise.resolve yang berhasil diselesaikan.

 var promise4 = Promise.resolve(1); promise4.then(function(value){ console.log("This will run as it is a resovled promise. The resolved value is ", value); }); promise4.catch(function(reason){ console.log("This will not run as it is a resolved promise", reason); }); 

Perlu dicatat bahwa janji mungkin memiliki beberapa penangan. Misalnya, berdasarkan contoh sebelumnya, Anda bisa mendapatkan kode yang ditunjukkan di bawah ini.

 var promise4 = Promise.resolve(1); promise4.then(function(value){ console.log("This will run as it is a resovled promise. The resolved value is ", value); }); promise4.then(function(value){ console.log("This will also run as multiple handlers can be added. Printing twice the resolved value which is ", value * 2); }); promise4.catch(function(reason){ console.log("This will not run as it is a resolved promise", reason); }); 

Inilah yang ditampilkan di konsol browser:


Menggunakan banyak .Ketika ketika bekerja dengan Janji

Dua metode berikut, Promise.all dan Promise.race , dirancang untuk bekerja dengan set janji. Jika, untuk menyelesaikan masalah tertentu, perlu untuk memproses beberapa janji, akan lebih mudah untuk menempatkan janji-janji ini dalam sebuah array, dan kemudian melakukan tindakan yang diperlukan dengannya. Untuk memahami esensi dari metode yang dipertimbangkan di sini, kita tidak akan dapat menggunakan promiseTRRARNOSG fungsi nyaman promiseTRRARNOSG , karena hasil kerjanya tergantung terlalu banyak pada kemauan kasus. Akan lebih mudah bagi kita untuk menggunakan sesuatu yang menghasilkan janji-janji yang lebih dapat diprediksi, yang akan memungkinkan kita untuk memahami perilaku mereka. Karena itu, kami akan membuat dua fungsi baru. Salah satunya ( promiseTRSANSG ) akan membuat janji yang diselesaikan setelah n detik, yang kedua ( promiseTRJANSG ) - janji yang ditolak setelah n detik.

 var promiseTRSANSG = (promiseThatResolvesAfterNSecondsGenerator = function( n = 0 ) { return new Promise(function(resolve, reject) {   setTimeout(function() {     resolve({       resolvedAfterNSeconds: n     });   }, n * 1000); }); }); var promiseTRJANSG = (promiseThatRejectsAfterNSecondsGenerator = function( n = 0 ) { return new Promise(function(resolve, reject) {   setTimeout(function() {     reject({       rejectedAfterNSeconds: n     });   }, n * 1000); }); }); 

Sekarang kita akan menggunakan fungsi-fungsi ini untuk memahami fitur-fitur metode Promise.all .

▍ Metode Janji. Semua

Dari dokumentasi MDN, Anda dapat menemukan bahwa metode Promise.all(iterable) mengembalikan janji yang akan diselesaikan ketika semua janji yang dilewati sebagai argumen iterable , atau ketika argumen ini tidak berisi janji. Janji ini akan ditolak jika ada janji yang ditransfer yang ditolak.
Mari kita lihat beberapa contoh.

Contoh No. 1

Semua janji akan diizinkan di sini. Skenario ini paling umum.

 console.time("Promise.All"); var promisesArray = []; promisesArray.push(promiseTRSANSG(1)); promisesArray.push(promiseTRSANSG(4)); promisesArray.push(promiseTRSANSG(2)); var handleAllPromises = Promise.all(promisesArray); handleAllPromises.then(function(values) { console.timeEnd("Promise.All"); console.log("All the promises are resolved", values); }); handleAllPromises.catch(function(reason) { console.log("One of the promises failed with the following reason", reason); }); 

Berikut kode yang akan ditampilkan ke konsol:


Semua Janji Diizinkan

Setelah menganalisis hasil dari contoh ini, dua pengamatan penting dapat dilakukan.

Pertama, janji ketiga, resolusi yang membutuhkan waktu 2 detik, selesai sebelum yang kedua, tetapi, seperti dapat dilihat dari output yang dihasilkan oleh kode, urutan janji-janji dalam array dipertahankan.

Kedua, kode berisi penghitung waktu yang digunakan untuk mencari tahu berapa lama waktu yang diperlukan untuk menjalankan instruksi Promise.all .

Jika janji dieksekusi secara berurutan, maka waktu eksekusi instruksi ini adalah 7 detik (1 + 4 + 2). Namun, pengatur waktu memberi tahu kami bahwa seluruh operasi memakan waktu 4 detik jika kami membulatkan hasilnya. Ini adalah bukti bahwa semua janji dieksekusi secara paralel.

Contoh No. 2

Sekarang pertimbangkan situasi ketika tidak ada janji dalam array yang diteruskan ke Promise.all. Saya percaya ini adalah use case yang paling tidak umum untuk fitur ini.

 console.time("Promise.All"); var promisesArray = []; promisesArray.push(1); promisesArray.push(4); promisesArray.push(2); var handleAllPromises = Promise.all(promisesArray); handleAllPromises.then(function(values) { console.timeEnd("Promise.All"); console.log("All the promises are resolved", values); }); handleAllPromises.catch(function(reason) { console.log("One of the promises failed with the following reason", reason); }); 

Berikut ini adalah output yang akan dihasilkan kode ini:


Aktifkan Promise.all dan berikan array yang tidak berisi janji untuk metode ini

Karena tidak ada janji dalam array, Promise.all hampir secara instan.

Contoh No. 3

Sekarang mari kita lihat apa yang terjadi ketika salah satu dari janji-janji itu diteruskan ke Janji. Semua ditolak.

 console.time("Promise.All"); var promisesArray = []; promisesArray.push(promiseTRSANSG(1)); promisesArray.push(promiseTRSANSG(5)); promisesArray.push(promiseTRSANSG(3)); promisesArray.push(promiseTRJANSG(2)); promisesArray.push(promiseTRSANSG(4)); var handleAllPromises = Promise.all(promisesArray); handleAllPromises.then(function(values) { console.timeEnd("Promise.All"); console.log("All the promises are resolved", values); }); handleAllPromises.catch(function(reason) { console.timeEnd("Promise.All"); console.log("One of the promises failed with the following reason ", reason); }); 

Seperti yang Anda lihat dari hasil eksekusi kode yang ditunjukkan di bawah ini, eksekusi Promise.all berhenti setelah janji pertama yang ditolak dengan output dari pesan yang diberikan janji ini.


Eksekusi berhenti setelah janji pertama yang ditolak

▍ Metode Janji

MDN melaporkan bahwa metode Promise.race(iterable) mengembalikan janji yang diizinkan atau ditolak dengan nilai atau alasan penolakan setelah masing-masing janji yang dikirimkan masing-masing diizinkan atau ditolak.

Mari kita Promise.race contoh bekerja dengan Promise.race .

Contoh No. 1

Itu menunjukkan apa yang terjadi ketika salah satu janji dilewatkan ke Janji. Promise.race diselesaikan sebelum orang lain.

 console.time("Promise.race"); var promisesArray = []; promisesArray.push(promiseTRSANSG(4)); promisesArray.push(promiseTRSANSG(3)); promisesArray.push(promiseTRSANSG(2)); promisesArray.push(promiseTRJANSG(3)); promisesArray.push(promiseTRSANSG(4)); var promisesRace = Promise.race(promisesArray); promisesRace.then(function(values) { console.timeEnd("Promise.race"); console.log("The fasted promise resolved", values); }); promisesRace.catch(function(reason) { console.timeEnd("Promise.race"); console.log("The fastest promise rejected with the following reason ", reason); }); 

Inilah yang sampai ke konsol setelah mengeksekusi contoh ini.


Promis, yang diselesaikan lebih cepat dari yang lainnya

Semua janji di sini dilakukan secara paralel. Janji ketiga diselesaikan setelah 2 detik. Segera setelah ini terjadi, janji yang dikembalikan oleh Promise.race diselesaikan.

Contoh No. 2

Sekarang pertimbangkan situasi ketika salah satu janji dilewatkan ke Janji. Promise.race ditolak.

 console.time("Promise.race"); var promisesArray = []; promisesArray.push(promiseTRSANSG(4)); promisesArray.push(promiseTRSANSG(6)); promisesArray.push(promiseTRSANSG(5)); promisesArray.push(promiseTRJANSG(3)); promisesArray.push(promiseTRSANSG(4)); var promisesRace = Promise.race(promisesArray); promisesRace.then(function(values) { console.timeEnd("Promise.race"); console.log("The fasted promise resolved", values); }); promisesRace.catch(function(reason) { console.timeEnd("Promise.race"); console.log("The fastest promise rejected with the following reason ", reason); }); 

Setelah menjalankan contoh ini, berikut ini akan sampai ke konsol:


Janji ditolak sebelum orang lain

Janji di sini, seperti dalam contoh sebelumnya, dilakukan secara paralel. Janji keempat ditolak setelah 3 detik. Segera setelah ini terjadi, janji yang dikembalikan oleh Promise.race ditolak.

Contoh umum dan percobaan

Saya mengumpulkan semua contoh yang kami pertimbangkan dalam materi ini di satu tempat, yang akan membuatnya lebih mudah untuk bereksperimen dengan mereka, untuk mengeksplorasi berbagai skenario bekerja dengan janji-janji. Kode ini dirancang untuk dijalankan di browser, jadi di sini kami tidak menggunakan panggilan API apa pun, tidak mengakses operasi file, dan tidak bekerja dengan basis data. Meskipun semua ini menemukan aplikasi dalam pengembangan proyek nyata, saya percaya bahwa bekerja dengan mekanisme ini dapat mengalihkan kita dari tujuan utama kita - janji. Dan penggunaan fungsi sederhana yang mensimulasikan penundaan waktu memberikan hasil yang serupa dan tidak membebani kita dengan detail tambahan.

Dengan menjelajahi sendiri contoh-contoh ini, Anda dapat bereksperimen dengan kode, dengan nilai-nilai variabel, dan mempelajari berbagai skenario untuk menggunakan janji. Secara khusus, Anda dapat menggunakan kombinasi metode promiseTRJANSG , promiseTRSANSG dan promiseTRRARNOSG untuk mensimulasikan banyak skenario untuk menggunakan janji, yang akan memungkinkan Anda untuk lebih memahami mereka. Selain itu, perhatikan bahwa menggunakan perintah console.time memungkinkan Anda untuk mengetahui waktu yang diperlukan untuk mengeksekusi sepotong kode tertentu, dan, misalnya, untuk mengetahui apakah janji dieksekusi secara paralel atau berurutan. Berikut ini tautan ke halaman intisari dengan kode. Dan omong-omong, jika Anda mau, lihatlah perpustakaan Bluebird , yang berisi beberapa metode menarik untuk bekerja dengan janji-janji.

Ringkasan

Saya menawarkan kepada Anda daftar aturan yang saya patuhi ketika bekerja dengan janji untuk menggunakannya dengan benar.

1. Gunakan janji dalam situasi ketika Anda bekerja dengan kode asinkron atau memblokir.
2. Untuk menangani situasi berhasil menyelesaikan janji, gunakan metode .then , untuk kasus-kasus di mana janji ditolak, gunakan .catch .
3. Gunakan .catch dan .catch di semua janji.
4. - , , .finally .
5. , , , .
6. , .
7. Promise , , , .
8. Promise.all , .

, , , .

Pembaca yang budiman! , , ?