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

Promise.race() dan async-await dijelaskan dalam JavaScript?

WBOYke hadapan: 2023-09-08 22:49:071479semak imbas

在 JavaScript 中解释 Promise.race() 和 async-await ？

Kita akan belajar tentang kaedah Promise.race() dalam tutorial ini. Seperti yang ditunjukkan oleh nama kaedah race(), janji yang diluluskan sebagai hujah kepada kaedah race() melakukan perlumbaan.

Oleh itu, mana-mana Janji yang diselesaikan dahulu hanya akan dilaksanakan dengan kaedah race(), dan Janji lain tidak akan pernah dilaksanakan.

Janji.perlumbaan()

Kaedah

Promise.race dalam JavaScript membolehkan anda menunggu set Janji pertama untuk dipenuhi atau ditolak, dan mengendalikan keputusan atau ralat jika ia berlaku. Sebaik sahaja salah satu janji input dipenuhi atau ditolak, ia mengembalikan janji yang dipenuhi atau ditolak, dan nilai atau sebab untuk janji itu.

Pengguna boleh menggunakan kaedah promise.race() mengikut sintaks berikut untuk melaksanakan janji diselesaikan pertama.

Promise.race(iterable).then((response) => {
   // handle response
});

Dalam sintaks di atas, kaedah Promise.race() mengambil iterable sebagai parameter pertama, dan kami boleh mengendalikan respons janji yang berjaya dilaksanakan dalam blok "then".

siniiterable Mengambil objek boleh lelaran, seperti set janji untuk melaksanakan apa-apa janji di dalamnya, diselesaikan terlebih dahulu.

tatabahasa

Berikut ialah sintaks cara menggunakan kaedah Promise.race dengan async-await dalam JavaScript:

async function example() {
   try {
      const result = await Promise.race([promise1, promise2, ...]);
   } catch (error) {
      // handle error
   }
}

Di sini, janji1, janji2#🎜🎜 adalah janji dan seterusnya yang anda mahukan🎜# dan seterusnya tunggu . Kaedah Promise.race mengembalikan Janji yang diselesaikan atau ditolak yang mengandungi nilai atau sebab input pertama Janji untuk diselesaikan atau ditolak.

Contoh fungsi tak segerak menggunakan pernyataan cuba/tangkap untuk mengendalikan keadaan ralat, di mana jika sebarang janji input ditolak, blok tangkapan akan dilaksanakan.

Contoh 1

Dalam contoh ini, kami mencipta berbilang Janji dan menetapkan pemasa dalam Janji untuk menyelesaikan atau menolaknya. Kami telah meluluskan pelbagai Promise sebagai hujah kepada kaedah race().

Output menunjukkan bahawa kaedah race() melaksanakan Promise yang ditolak kerana ia tidak mempunyai pemasa. Oleh itu, kaedah race() melaksanakan Janji pertama, yang dipenuhi lebih awal walaupun ia ditolak atau diselesaikan.

<html>
<body>
   <h2>Using the Promise.race() </i> Method </h2>
   <div id="output"></div>
   <script>
      let promise_1 = new Promise((res, rej) => {
         setTimeout(() => {
            res("Resolved promise with time of 0 milliseconds");
         }, 1000);
      });
      let promise_2 = new Promise((res, rej) =>
      rej("This promise is rejected!")
      );
      let promise_3 = new Promise((res, rej) => {
         setTimeout(() => {
            res("Resolved promise with time of 2000 milliseconds");
         }, 2000);
      });
      Promise.race([promise_1, promise_2, promise_3]).then(
         (response) => {
            document.getElementById("output").innerHTML +=
            "Promise resolved successfully.";
         },
         (error) => {
            document.getElementById("output").innerHTML += "Promise rejected";
         }
      );
   </script>
</body>
</html>

Contoh 2

Dalam contoh ini, kami mengambil API yang berbeza dan membuat janji menggunakan kaedah ambil. Kami mempunyai satu siri Janji yang dipanggil permintaan.

Kami menggunakan kaedah race() untuk menyelesaikan semua permintaan, yang mana Janji akan diselesaikan dahulu, kami mencetak URL dalam blok "kemudian".

<html>
<body>
   <h2>Using Promise.race() Method with async-await</h2>
   <div id = "output"> </div>
   <button onclick = "executeRace()"> Fetch data from early promise </button>
   <script>
      async function executeRace() {
         // array of different promises
         const requests = [
            fetch("https://api.publicapis.org/entries"),
            fetch("https://catfact.ninja/fact"),
            fetch("https://api.coindesk.com/v1/bpi/currentprice.json"),
         ];
         // resolving the promises using the race() method
         const res = await Promise.race(requests);
         document.getElementById("output").innerHTML +=
         "The first promise resolve is " + res.url;
      }
   </script>
</body>
</html>

Kaedah race() boleh digunakan apabila pengguna perlu menggunakan respons Janji yang diselesaikan pertama, walaupun ia ditolak atau diselesaikan. Jika pengguna perlu menggunakan hasil Janji yang berjaya diselesaikan pertama, mereka harus menggunakan kaedah Promise.any().

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

JavaScript try catch 对象 promise 异步

Kenyataan：

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

Artikel sebelumnya：Senaraikan komponen teras penting React NativeArtikel seterusnya：Senaraikan komponen teras penting React Native

Artikel berkaitan

Lihat lagi