Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan await di luar fungsi async dalam JavaScript?
Bagaimana untuk menggunakan await di luar fungsi async dalam JavaScript?
- WBOYke hadapan
- 2023-08-26 16:53:021098semak imbas
Dalam JavaScript, kata kunci async-wait digunakan untuk menjadikan fungsi tak segerak. Jika kami membuat sebarang fungsi tidak segerak, ia berfungsi seperti berbilang benang dan melaksanakan kod secara selari, yang membantu kami meningkatkan prestasi aplikasi.
Di sini, kita akan belajar menggunakan kata kunci await di luar fungsi async.
Fungsi panggilan sekarang
Kami akan menggunakan ungkapan dalam kaedah ini untuk memanggil fungsi dengan segera. Kita boleh menggunakan kata kunci await dengan janji atau mana-mana fungsi lain di dalam fungsi.
Tatabahasa
Pengguna boleh menggunakan ungkapan fungsi untuk memanggil fungsi dengan segera mengikut sintaks berikut.
(async () => {
let result = await fetchData();
})();
Dalam sintaks di atas, kami tidak mencipta fungsi, tetapi di dalam pendakap kerinting, kami menulis sintaks fungsi anak panah menggunakan async dan menunggu kata kunci.
Contoh 1
Dalam contoh di bawah, kami memanggil fungsi sejurus selepas mentakrifkannya. Di dalam ungkapan, kami mentakrifkan fungsi anak panah. Dalam blok kod fungsi anak panah, kami telah menggunakan kata kunci await dan aksios untuk mendapatkan data daripada API.
Kami menambah CDN dalam bahagian
untuk menggunakan axios. Dalam output, pengguna boleh memerhati data yang kami dapat daripada API.<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
<h2>Using the <i>await</i> with immediately invoking function expression.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
(async () => {
let result = await axios.get("https://dummyjson.com/products/1");
output.innerHTML += "The results from the API is <br/>";
for (let key in result.data) {
output.innerHTML += key + " : " + result.data[key] + "<br/>";
}
})();
</script>
</body>
</html>
Guna Janji
Kami boleh menggunakan Promise dan bukannya fungsi tak segerak untuk menunggu sehingga kami menerima respons daripada pelayan atau menjeda pelaksanaan kod.
Tatabahasa
Pengguna boleh menggunakan Promise dalam JavaScript mengikut sintaks berikut.
promise.then((response) => {
// use response
})
.catch((err) => {
// handle the errors
})
Dalam sintaks di atas, kami telah menggunakan blok then() dan catch() bersama Promise untuk mengendalikan respons dan ralat.
Contoh 2
Dalam contoh di bawah, kami melakukan perkara yang sama seperti contoh 1. Dalam Contoh 1, kami menggunakan sintaks dan aksios menunggu async untuk mendapatkan data. Di sini, kami menggunakan Promise axios untuk mendapatkan data. Kaedah axios.get() mengembalikan Promise, yang kami selesaikan menggunakan blok then() dan catch().
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
<h2>Using the <i>promises</i> instead of async-await.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
(() => {
axios.get("https://dummyjson.com/products/1").then((result) => {
output.innerHTML += "The results from the API is <br/>";
for (let key in result.data) {
output.innerHTML += key + " : " + result.data[key] + "<br/>";
}
})
.catch((err) => {
output.innerHTML += "The error is " + err;
})
})();
</script>
</body>
</html>
Contoh 3
Dalam contoh ini, kami mencipta Promise menggunakan pembina Promise() dengan kata kunci baharu. Kami menolak komitmen ini.
Selepas itu, kami menggunakan blok then() dan catch() dan pembolehubah SamplePromise Promise untuk mendapatkan respons atau ralat daripada Promise. Pengguna boleh melihat bahawa kawalan pergi ke blok catch() dalam output kerana kami menolak ralat.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
<h2>Using the <i>promises</i> instead of async-await.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let SamplePromise = new Promise((resolve, reject) => {
reject("Promise is rejected without any error");
})
SamplePromise.then((response)=>{
output.innerHTML += "Response from the promise is " + response;
})
.catch((err)=>{
output.innerHTML += "The error message is - " + err;
})
</script>
</body>
</html>
Tutorial ini mengajar pengguna menggunakan kata kunci tunggu di luar fungsi tak segerak. Selain itu, kami menerangkan alternatif untuk menggunakan Janji untuk menggunakan kata kunci menunggu async.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan await di luar fungsi async dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!