Rumah > Artikel > hujung hadapan web > Terangkan Promise.allSettled() dan async-await dalam JavaScript?

Terangkan Promise.allSettled() dan async-await dalam JavaScript?

WBOYke hadapan: 2023-08-30 23:53:021202semak imbas

解释 JavaScript 中的 Promise.allSettled() 和 async-await 吗？

Promise.allSettled() ialah kaedah yang mengambil Janji yang boleh diulang sebagai parameter dan mengembalikan Janji yang dipenuhi apabila semua Janji dalam yang boleh diulang telah diselesaikan, bermakna ia telah dilaksanakan atau ditolak.

Apabila Janji yang dikembalikan dipenuhi, ia diselesaikan melalui pelbagai objek yang mengandungi maklumat tentang Janji yang dipenuhi atau ditolak. Setiap objek mempunyai atribut status (selesai atau ditolak), dan atribut nilai atau sebab.

Sebagai contoh, jika anda mempunyai set Janji yang mewakili permintaan rangkaian dan anda ingin mengetahui status setiap permintaan (sama ada ia berjaya atau tidak), anda boleh menggunakan Promise.allSettled() untuk menunggu semua permintaan selesai sebelum memproses hasilnya.

Janji.semua Selesai

Menggunakan Promise.allSettled() berguna apabila anda ingin mengendalikan keputusan berbilang Janji, sama ada ia dipenuhi atau ditolak. Ia berbeza daripada Promise.all() yang hanya akan menyelesaikan apabila semua Janji dipenuhi dan akan menolak jika mana-mana Janji ditolak.

Tatabahasa

Sintaks untuk menggunakan Promise.allSettled() adalah seperti berikut -

Promise.allSettled(iterable);

Iterable ialah input yang diberikan kepada promise.allSettled(). Objek boleh lelar ialah tatasusunan yang mengandungi Janji.

Async menanti

Kata kunci tak segerak dan menunggu dalam JavaScript digunakan untuk mengendalikan kod tak segerak. async digunakan sebelum definisi fungsi untuk menunjukkan bahawa fungsi itu tidak segerak dan akan mengembalikan Janji.

Tatabahasa

async function example() {
   // asynchronous code goes here
}

menunggu digunakan dalam fungsi tak segerak untuk menjeda pelaksanaan sehingga Janji yang ditentukan dipenuhi.

async function example() {
   const result = await somePromise;
   // the rest of the function will execute only after somePromise is fulfilled
}

Promise.allSetlled dan async-wait

async/wait syntax ialah satu cara untuk menjadikan kod tak segerak kelihatan dan berkelakuan lebih seperti kod segerak, menjadikannya lebih mudah untuk membaca dan menulis. Ia membolehkan anda menulis kod tak segerak yang kelihatan dan terasa seperti kod segerak tanpa memerlukan kaedah panggil balik atau then().

Anda boleh menggunakan sintaks tak segerak/menunggu untuk menunggu kaedah Promise.allSettled() diselesaikan sebelum mengakses hasilnya.

Ini adalah contoh penggunaan Promise.allSettled() dengan async/waiit -

async function example() {
   const promises = [promise1, promise2, promise3];
   const results = await Promise.allSettled(promises);
   for (const result of results) {
      if (result.status === 'fulfilled') {
         console.log(result.value);
      } else {
         console.error(result.reason);
      }
   }
}

Berikut ialah dua kemungkinan kes penggunaan untuk Promise.allSettled() di dunia nyata:

Mengendalikan permintaan rangkaian
Mengendalikan input pengguna dalam borang

Contoh 1

Jika anda mempunyai pelbagai permintaan rangkaian (seperti permintaan HTTP) dan anda ingin mengendalikan keputusan semua permintaan, tidak kira sama ada ia berjaya, anda boleh menggunakan Promise.allSettled() untuk menunggu semua permintaan selesai sebelum memproses keputusannya.

<html>
<body>
   <h2> Using the <i> Promise.allSettled() </i> method to handle multiple reuests. </h2>
   <button onclick = "getData()"> Fetch Data </button>
   <div id = "output"> </div>
   <script>
      async function getData() {
         const requests = [
            fetch('https://jsonplaceholder.typicode.com/todos/1'),
            fetch('https://jsonplaceholder.typicode.com/todos/2'),
            fetch('https://jsonplaceholder.typicode.com/todos/3')
         ];
         const results = await Promise.allSettled(requests);
         let output = '';
         let count = 0;
         for (const result of results) {
            if (result.status === 'fulfilled') {
               const data = await result.value.json();
               output += `<p>Promise ${count+1 } fulfilled</p>`;
            } else {
               output += `<p>Promise ${count+1} rejected </p>`;
            }
            count++
         }
         document.getElementById('output').innerHTML = output;
      }
   </script>
</body>
</html>

Andaikan anda mempunyai borang dengan medan input dan anda ingin mengesahkan semua medan sebelum menyerahkan borang. Dalam kes ini, anda boleh menggunakan Promise.allSettled() untuk menunggu semua Promises pengesahan selesai sebelum memutuskan sama ada untuk menyerahkan borang.

Berikut adalah langkah yang perlu diikuti:

Langkah 1 - Dalam dokumen HTML, tulis borang dengan medan input. Ambil IDnya sebagai input.
Langkah 2 - Tentukan fungsi validateForm() yang akan dipanggil apabila borang diserahkan.
Langkah 3 - Di dalam fungsi validateForm(), dapatkan semula nilai medan input menggunakan kaedah document.getElementById() >.
Langkah 4- Buat tatasusunan janji pengesahan menggunakan fungsi validateInput() dan lulus nilai medan input sebagai parameter.
Langkah 5 - Gunakan Promise.allSettled() untuk menunggu semua Promise pengesahan selesai.
Langkah 6 - Ulangi keputusan Promise.allSettled() dan semak sifat status setiap objek hasil. Jika sebarang Janji ditolak, tetapkan bendera hasErrors kepada benar dan log mesej ralat.
Langkah 7 - Jika bendera hasErrors palsu, borang tersebut dianggap sah dan boleh diserahkan. Jika bendera hasErrors adalah benar, borang tersebut mempunyai ralat dan tidak boleh diserahkan.
Langkah 8 - Tambahkan atribut onsubmit pada elemen borang dalam borang HTML dan tetapkannya untuk memanggil fungsi validateForm(). Jika fungsi validateForm() mengembalikan palsu, gunakan pernyataan return false untuk mengelakkan borang daripada diserahkan.

Contoh 2

<html>
   <h2> Using Promise.allSettled with async-await </h2>
   <form onsubmit = "validateForm(); return false;">
   <label for = "input">Input:</label> <input type = "text" id = "input" required>
   <br><br><input type = "submit" value = "Submit"></form>
   <p id = "output"></p>
   <script >
      function validateInput(input) {
         return new Promise((resolve, reject) => {
            if (input.length > 0) {
               resolve();
            } else {
               reject(new Error('Input is required'));
            }
         });
      }
      async function validateForm() {
         const input = document.getElementById('input').value;
         const validationPromises = [
            validateInput(input),
         ];
         const results = await Promise.allSettled(validationPromises);
         let hasErrors = false;
         for (const result of results) {
            if (result.status === 'rejected') {
               hasErrors = true;
               console.error(result.reason);
            }
         }
         if (!hasErrors) {
            // form is valid, submit it
            document.getElementById("output").innerHTML="Form Submitted Successfully";
         } else {
            // form has errors, do not submit it
            document.getElementById("output").innerHTML = 'Form has errors';
         }
      }
   </script>
</html>

Promise.allSettled() boleh digunakan dalam pelbagai situasi, seperti mengendalikan permintaan rangkaian dan mengesahkan input pengguna, dan boleh digunakan bersama-sama dengan sintaks async/wait atau kaedah then() untuk mengendalikan nilai Janji yang telah dilengkapkan .

Atas ialah kandungan terperinci Terangkan Promise.allSettled() dan async-await dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html 对象 promise 异步 http

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Kaedah ES2022 JavaScript at().Artikel seterusnya：Kaedah ES2022 JavaScript at().

Artikel berkaitan

Lihat lagi