Dalam tutorial ini, Anda akan belajar tentang JavaScript async / await kata kunci dengan bantuan contoh.
Anda menggunakan asynckata kunci dengan fungsi untuk menyatakan bahwa fungsi tersebut adalah fungsi asinkron. Fungsi async mengembalikan sebuah janji.
Sintaks asyncfungsinya adalah:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Sini,
- nama - nama fungsi
- parameter - parameter yang diteruskan ke fungsi
Contoh: Fungsi Asinkron
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Keluaran
Fungsi asinkron.
Dalam program di atas, asynckata kunci digunakan sebelum fungsi untuk menyatakan bahwa fungsi tersebut tidak sinkron.
Karena fungsi ini mengembalikan sebuah promise, Anda dapat menggunakan metode chaining then()seperti ini:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Keluaran
Fungsi Asinkron 1
Dalam program di atas, f()fungsi diselesaikan dan then()metode dijalankan.
JavaScript menunggu Kata Kunci
Kata awaitkunci digunakan di dalam asyncfungsi untuk menunggu operasi asinkron.
Sintaks untuk menggunakan await adalah:
let result = await promise;
Penggunaan awaitmenjeda fungsi async sampai promise mengembalikan nilai hasil (menyelesaikan atau menolak). Sebagai contoh,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( // wait until the promise resolves let result = await promise; console.log(result); console.log('hello'); ) // calling the async function asyncFunc();
Keluaran
Janji terselesaikan halo
Dalam program di atas, sebuah Promiseobjek dibuat dan diselesaikan setelah 4000 milidetik. Di sini, asyncFunc()fungsinya ditulis menggunakan asyncfungsi.
Kata awaitkunci menunggu janji selesai (selesaikan atau tolak).
let result = await promise;
Oleh karena itu, halo ditampilkan hanya setelah nilai janji tersedia untuk variabel hasil.
Dalam program di atas, jika awaittidak digunakan, hello akan ditampilkan sebelum Promise diselesaikan.
Bekerja dari fungsi async / await
Catatan : Anda awaithanya dapat menggunakan di dalam fungsi async.
Fungsi async memungkinkan metode asynchronous untuk dijalankan dengan cara yang tampak sinkron. Meskipun operasinya tidak sinkron, tampaknya operasi tersebut dijalankan secara sinkron.
Ini bisa berguna jika ada beberapa promise dalam program. Sebagai contoh,
let promise1; let promise2; let promise3; async function asyncFunc() ( let result1 = await promise1; let result2 = await promise2; let result3 = await promise3; console.log(result1); console.log(result1); console.log(result1); )
Dalam program di atas, awaittunggu setiap janji selesai.
Penanganan Error
Saat menggunakan asyncfungsi tersebut, Anda menulis kode secara sinkron. Dan Anda juga dapat menggunakan catch()metode ini untuk menangkap kesalahan tersebut. Sebagai contoh,
asyncFunc().catch( // catch error and do something )
Cara lain untuk menangani kesalahan adalah dengan menggunakan try/catchblok. Sebagai contoh,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( try ( // wait until the promise resolves let result = await promise; console.log(result); ) catch(error) ( console.log(error); ) ) // calling the async function asyncFunc(); // Promise resolved
Dalam program di atas, kami telah menggunakan try/catchblok untuk menangani kesalahan. Jika program berjalan dengan sukses, itu akan masuk ke tryblok. Dan jika program membuat kesalahan, itu akan masuk ke catchblok.
Untuk mempelajari lebih lanjut tentang try/catchsecara detail, kunjungi coba / tangkap JavaScript JavaScript.
Manfaat Menggunakan Fungsi async
- Kode ini lebih mudah dibaca daripada menggunakan callback atau janji.
- Penanganan kesalahan lebih sederhana.
- Debugging lebih mudah.
Catatan : Kedua kata kunci async/awaitini diperkenalkan di versi JavaScript yang lebih baru (ES8). Beberapa browser lama mungkin tidak mendukung penggunaan async / await. Untuk mempelajari lebih lanjut, kunjungi JavaScript async / await dukungan browser.
