Rumah > Artikel > hujung hadapan web > Promise.any() dan async-await dijelaskan dalam JavaScript?
Promise.any() dan async-await dijelaskan dalam JavaScript?
- PHPzke hadapan
- 2023-09-13 22:17:02993semak imbas
Kami akan mempelajari tentang mana-mana() kaedah Janji dalam tutorial ini. Dalam JavaScript, kami boleh menggunakan Promise untuk mengendalikan permintaan tak segerak. Menulis kod tak segerak dalam aplikasi kami untuk mendapatkan data mempercepatkan perkara kerana ia tidak perlu menunggu data untuk melaksanakan kod lain.
Janji.any() kaedah
Seperti yang dicadangkan oleh nama mana-mana () kaedah, ia akan melaksanakan sebarang janji yang dipenuhi. Oleh itu, mana-mana Promise yang diselesaikan terlebih dahulu akan dilaksanakan oleh kaedah Promise.any(), manakala Promise lain mungkin atau mungkin tidak dilaksanakan. Selain itu, sebarang Janji yang ditolak tidak akan dilaksanakan oleh kaedah Promise.any().
Tatabahasa
Pengguna boleh menggunakan kaedah promise.any() mengikut sintaks berikut.
Promise.any(Array_of_promise).then( // handle result )
Dalam sintaks di atas, kita boleh mengendalikan hasil yang dikembalikan oleh mana-mana Janji dalam blok "kemudian".
parameter
Array_of_promise – Ia mengandungi berbilang Janji, janji yang boleh diselesaikan dengan cepat akan dilaksanakan dengan kaedah mana-mana().
Promise.any() with asynchronous wait
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. tunggu digunakan dalam fungsi tak segerak untuk menjeda pelaksanaan sehingga Janji yang ditentukan dipenuhi.
tatabahasa
Berikut ialah sintaks untuk menggunakan kaedah Promise.any() dan async-wait dalam JavaScript:
async function example() {
try {
const result = await Promise.any([promise1, promise2, ...]);
} catch (error) {
// handle error
}
}
Di sini, janji1, janji2#🎜🎜 adalah janji dan seterusnya yang anda mahukan🎜# dan seterusnya tunggu . Kaedah Promise.any mengembalikan Janji yang diselesaikan menggunakan nilai input pertama Janji untuk diselesaikan, atau, jika semua Janji input ditolak, tatasusunan semua Janji input yang ditolak.
Contoh 1Dalam contoh di bawah, kami mencipta Janji yang berbeza menggunakan pembina Promise(). Kami menolak promise_2 dan menyelesaikan janji yang lain, dan kami menyelesaikan promise_3 dua milisaat kemudian. Oleh itu, promise_1 akan berjaya dilaksanakan terlebih dahulu.
Dalam output, kita dapat melihat bahawa kaedah any() mencetak hasil promise_1 kerana ia akan diselesaikan lebih awal.
<html>
<body>
<h2> Using the Promise.any() Method </h2>
<div id="output"> </div>
<script>
let promise_1 = new Promise((res, rej) => {
res("Resolved promise with time of 0 milliseconds");
});
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);
});
// resolving the promises
Promise.any([promise_1, promise_2, promise_3]).then((response) => {
document.getElementById("output").innerHTML += response;
});
</script>
</body>
</html>
Contoh 2Dalam contoh di bawah, kami mencipta fungsi tak segerak getData(). Di sini, kami menggunakan kaedah fetch() untuk mencipta pelbagai tatasusunan Janji dan Janji.
Kami mendapat data daripada API masa nyata. Tatasusunan permintaan mengandungi tiga Janji, tetapi dalam output, kita dapat melihat bahawa hasilnya bukan objek boleh lelar dan hanya mengandungi respons Janji yang diselesaikan lebih awal.
<html>
<body>
<h2>Using Promise.any() with async-await </h2>
<button onclick="getData()"> Fetch any one promise Data </button>
<div id="output"> </div>
<script>
async function getData() {
try {
// multiple promises
const requests = [
fetch("https://jsonplaceholder.typicode.com/todos/1"),
fetch("https://jsonplaceholder.typicode.com/todos/2"),
fetch("https://jsonplaceholder.typicode.com/todos/3"),
];
const result = await Promise.any(requests);
document.getElementById("output").innerHTML =
"The status of result is " + result.status;
}
catch (error) {
document.getElementById("output").innerHTML = error;
}
}
</script>
</body>
</html>
Dalam contoh ini, fungsi getData menggunakan Promise.any() untuk mencipta Promise yang dilaksanakan oleh yang pertama daripada tiga fetch Promise untuk dilaksanakan. Fungsi itu kemudian menggunakan kata kunci tunggu untuk menunggu Janji dipenuhi dan log teks respons. Jika sebarang Janji ditolak, blok tangkapan akan dilaksanakan dan ralat akan dilog masuk ke konsol. Menggunakan Promise.any() dengan async dan wait boleh menjadi cara yang berguna untuk mengendalikan berbilang Janji dengan cara yang ringkas dan boleh dibaca. Ia membolehkan anda menentukan satu set Janji dan mengendalikan Janji pertama yang dipenuhi sambil mengabaikan yang lain.
Kami belajar cara menggunakan mana-mana() kaedah Janji dalam tutorial ini. Matlamat menggunakan kaedah any() adalah untuk melaksanakan satu-satunya kaedah dalam Promise yang telah diselesaikan.
Atas ialah kandungan terperinci Promise.any() dan async-await dijelaskan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!