--- title: "Async dan Await di JavaScript: Panduan Lengkap dan Contohnya" description: Pelajari konsep async dan await di JavaScript lewat panduan lengkap dan contohnya untuk menangani operasi asynchronous dengan kode yang lebih rapi dan mudah dibaca. image: https://msbu.co.id/hubfs/Imported_Blog_Media/WhatsApp-Image-2025-03-05-at-4_19_00-PM-6-2.jpg --- [Skip to Content](https://msbu.co.id/blog/async-dan-await-di-javascript-panduan-lengkap-dan-contohnya#body) [![MSBU Group](https://msbu.co.id/hs-fs/hubfs/W_Primary%20with%20no%20Slogan_No%20Bg2x.png?width=200&height=71&name=W_Primary%20with%20no%20Slogan_No%20Bg2x.png "MSBU Group")](https://msbu.co.id) Toggle Menu - Layanan Toggle children for Layanan - People Toggle children for People - [Managed Team, Headhunting & Frontier AI](https://msbu.co.id/id/layanan/managed-team-headhunting-frontier-ai) - Tech Toggle children for Tech - [Human Risk Management](https://sibermate.com) - [Device as a Service](https://msbu.co.id/id/layanan/daas) - Capital Toggle children for Capital - [Speed Pitching](https://msbu.co.id/layanan/speed-pitching) - [Komunitas](https://msbu.co.id/id/frc) - [Tentang](https://msbu.co.id/id/tentang) - Resources Toggle children for Resources - [AI CV Scoring](https://msbu.co.id/ai-cv-scoring) - [Blog](https://msbu.co.id/blog) - [Panduan Gaji](https://msbu.co.id/id/panduan-gaji) - [Konsultasi](https://msbu.co.id/meetings/msbu/consultation) [back to blog](https://msbu.co.id/blog) [Technology](https://msbu.co.id/blog/topic/tech) | [operasi asinkron](https://msbu.co.id/blog/topic/operasi-asinkron) | [Pemrograman](https://msbu.co.id/blog/topic/pemrograman) | [async await](https://msbu.co.id/blog/topic/async-await) | [JavaScript](https://msbu.co.id/blog/topic/javascript) | [coding](https://msbu.co.id/blog/topic/coding) # Async dan Await di JavaScript: Panduan Lengkap dan Contohnya Read Time **9 mins** | 15 Mar 2025 | Written by: Hastin Lia [mailto:?subject=Async%20dan%20Await%20di%20JavaScript%3A%20Panduan%20Lengkap%20dan%20Contohnya&body=https%3A%2F%2Fmsbu.co.id%2Fblog%2Fasync-dan-await-di-javascript-panduan-lengkap-dan-contohnya](mailto:?subject=Async%20dan%20Await%20di%20JavaScript%3A%20Panduan%20Lengkap%20dan%20Contohnya&body=https%3A%2F%2Fmsbu.co.id%2Fblog%2Fasync-dan-await-di-javascript-panduan-lengkap-dan-contohnya) ![Async dan Await](https://msbu.co.id/hs-fs/hubfs/Imported_Blog_Media/WhatsApp-Image-2025-03-05-at-4_19_00-PM-6-1024x682-2.jpg?width=1024&height=682&name=WhatsApp-Image-2025-03-05-at-4_19_00-PM-6-1024x682-2.jpg "Async dan Await") Dalam pengembangan web modern, menangani operasi asinkron adalah bagian penting dalam membangun aplikasi yang responsif dan efisien. JavaScript memiliki beberapa mekanisme untuk menangani tugas asinkron, seperti *callback*, *Promise*, dan yang lebih modern adalah *async* dan *await*. Dengan *async* dan *await*, penulisan kode asinkron menjadi lebih mudah dibaca dan dipahami, menyerupai kode sinkron. Artikel ini akan membahas secara mendalam apa itu *async* dan *await*, bagaimana cara menggunakannya, serta contoh implementasi dalam berbagai kasus penggunaan. **Baca juga: [QA Engineer Vs Software Tester? Mana yang Dibutuhkan](https://msbu.co.id/blog/qa-engineer-vs-software-tester-mana-yang-dibutuhkan?lang=id)** ## **Apa Itu Async dan Await?** *Async* dan *await* adalah fitur dalam JavaScript yang diperkenalkan dalam ECMAScript 2017 (ES8) untuk menangani operasi asinkron dengan lebih sederhana dibandingkan dengan *callback* dan *Promise*. - **Async** adalah kata kunci yang digunakan untuk mendeklarasikan sebuah fungsi agar selalu mengembalikan *Promise*. Jika suatu fungsi diberi kata kunci async, maka secara otomatis ia akan mengembalikan sebuah *Promise*. - **Await** digunakan di dalam fungsi *async* untuk menunggu hasil dari sebuah *Promise* tanpa perlu menggunakan metode .then(). Dengan *await*, eksekusi kode akan ditunda sampai *Promise* tersebut selesai. Dengan menggabungkan *async* dan *await*, kita dapat menulis kode yang lebih bersih dan lebih mudah dipahami dibandingkan menggunakan *Promise chaining* atau *callback hell*. ## **Menggunakan Async dan Await dalam JavaScript** ### **1. Mendeklarasikan Fungsi Async** Untuk menggunakan *await*, sebuah fungsi harus dideklarasikan sebagai fungsi *async*. Berikut adalah contoh mendeklarasikan fungsi *async*: async function fetchData() {   return "Data berhasil diambil"; }   fetchData().then(console.log); // Output: Data berhasil diambil Dalam contoh di atas, fungsi fetchData() selalu mengembalikan sebuah *Promise*, meskipun kita tidak secara eksplisit menuliskan Promise.resolve(). JavaScript secara otomatis mengubah nilai return menjadi *Promise*. ### **2. Menggunakan Await untuk Menunggu Promise** Sekarang, mari kita gunakan *await* untuk menangani sebuah *Promise* di dalam fungsi *async*. async function fetchData() {   let data = await new Promise(resolve =\> setTimeout(() =\> resolve("Data berhasil diambil"), 2000));   console.log(data); }   fetchData(); Dalam contoh ini, await digunakan untuk menunggu penyelesaian dari *Promise* yang menyimulasikan pengambilan data dalam 2 detik. Ketika *Promise* selesai, hasilnya disimpan dalam variabel data, lalu ditampilkan ke konsol. ### **3. Menangani Error dengan Try...Catch** Saat bekerja dengan operasi asinkron, kita harus menangani kemungkinan terjadinya error. Dengan *async* dan *await*, kita bisa menggunakan try...catch untuk menangani kesalahan dengan cara yang lebih bersih dibandingkan dengan .catch() pada *Promise*. async function fetchData() {   try {     let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");     let data = await response.json();     console.log(data);   } catch (error) {     console.error("Terjadi kesalahan: ", error);   } }   fetchData(); Dalam contoh ini, jika terjadi error saat mengambil data dari API, error tersebut akan ditangkap di dalam blok catch, sehingga tidak menyebabkan aplikasi berhenti. ## **Perbandingan Async/Await dengan Promise dan Callback** Sebelum *async* dan *await*, developer menggunakan *callback* dan *Promise* untuk menangani operasi asinkron. Namun, kedua metode ini memiliki beberapa kelemahan. 1. **Callback Hell** – Struktur kode yang kompleks saat terlalu banyak *callback* yang bersarang. 2. **Promise Chaining** – Meskipun lebih baik daripada *callback*, penggunaan .then().catch() yang panjang masih membuat kode sulit dibaca. 3. **Async/Await** – Menawarkan sintaks yang lebih bersih dan menyerupai kode sinkron, sehingga lebih mudah dikelola. Contoh kode menggunakan *Promise chaining*: fetch("https://jsonplaceholder.typicode.com/posts/1")   .then(response =\> response.json())   .then(data =\> console.log(data))   .catch(error =\> console.error("Terjadi kesalahan: ", error)); Dengan *async* dan *await*, kode yang sama dapat ditulis dengan lebih sederhana: async function getData() {   try {     let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");     let data = await response.json();     console.log(data);   } catch (error) {     console.error("Terjadi kesalahan: ", error);   } }   getData(); Dengan *async* dan *await*, kode lebih ringkas dan mudah dipahami tanpa harus berurusan dengan banyak .then(). ## **Kasus Penggunaan Async dan Await dalam Aplikasi Nyata** ### **1. Mengambil Data dari API** Salah satu penggunaan utama *async* dan *await* adalah dalam pengambilan data dari API. Seperti contoh sebelumnya, menggunakan *fetch* dengan *await* memungkinkan pengolahan data menjadi lebih efisien. ### **2. Menangani Multiple Promise dengan Promise.all** Saat ada lebih dari satu *Promise* yang harus dijalankan bersamaan, kita bisa menggunakan Promise.all(). Ini memungkinkan beberapa operasi dijalankan secara paralel dan menunggu semuanya selesai sebelum melanjutkan eksekusi. async function fetchMultipleData() {   try {     let \[data1, data2\] = await Promise.all(\[       fetch("https://jsonplaceholder.typicode.com/posts/1").then(res =\> res.json()),       fetch("https://jsonplaceholder.typicode.com/posts/2").then(res =\> res.json())     \]);     console.log(data1, data2);   } catch (error) {     console.error("Terjadi kesalahan: ", error);   } }   fetchMultipleData(); Kode di atas memungkinkan dua *fetch* API dilakukan secara paralel, sehingga lebih efisien dibandingkan menjalankan satu per satu. **Baca juga: [DeepSeek AI: Ancaman atau Peluang bagi Industri Teknologi?](https://msbu.co.id/blog/deepseek-ai-ancaman-atau-peluang-bagi-industri-teknologi?lang=id)** **Baca juga: [Jasa IT Staffing & Headhunting MSBU](https://msbu.co.id/id/layanan/it-staffing-headhunting)** ## **Kesimpulan** *Async* dan *await* adalah fitur penting dalam JavaScript modern yang membantu mengatasi kompleksitas dalam menangani operasi asinkron. Dengan menggunakan *async* dan *await*, kode menjadi lebih bersih, mudah dibaca, dan menyerupai alur eksekusi sinkron. Dengan memahami konsep ini dan menerapkannya dalam pengembangan aplikasi, developer dapat meningkatkan efisiensi dan keterbacaan kode mereka, serta menghindari jebakan seperti *callback hell* atau *promise chaining* yang kompleks. Jika digunakan dengan baik, *async* dan *await* dapat menjadi alat yang sangat kuat dalam pengelolaan tugas asinkron dalam JavaScript. **Temukan Lowongan Pekerjaan Di [MSBU](https://www.msbu.co.id/)!** ![](https://msbu.co.id/hubfs/T043H23RX0U-U04Q6QS3KGV-65cacb32a7a8-512.jpeg) [mailto:v-hastin@msbu.co.id](mailto:v-hastin@msbu.co.id) ##### Hastin Lia Hastin Lia adalah praktisi Digital Marketing di MSBU Group yang menulis seputar dunia kerja, rekrutmen dan IT staffing, manajemen talenta, serta pengembangan bisnis. Ia menyusun panduan praktis untuk membantu perusahaan dan profesional mengambil keputusan yang lebih tepat seputar SDM dan teknologi. Share the Love [mailto:?subject=Async%20dan%20Await%20di%20JavaScript%3A%20Panduan%20Lengkap%20dan%20Contohnya&body=https%3A%2F%2Fmsbu.co.id%2Fblog%2Fasync-dan-await-di-javascript-panduan-lengkap-dan-contohnya](mailto:?subject=Async%20dan%20Await%20di%20JavaScript%3A%20Panduan%20Lengkap%20dan%20Contohnya&body=https%3A%2F%2Fmsbu.co.id%2Fblog%2Fasync-dan-await-di-javascript-panduan-lengkap-dan-contohnya) You May Like These ## Related Articles ![](https://msbu.co.id/hs-fs/hubfs/2149175669.jpg?width=700&name=2149175669.jpg) Juli 2, 2025 | Employment ### [7 Keuntungan Kerja Asynchronous untuk Tim Remote](https://msbu.co.id/blog/7-keuntungan-kerja-asynchronous-untuk-tim-remote) ![](https://msbu.co.id/hs-fs/hubfs/data-center-engineer-coding-notebook-adjusting-power-settings.jpg?width=700&name=data-center-engineer-coding-notebook-adjusting-power-settings.jpg) Oktober 23, 2025 | Technology ### [Tips Mengelola Data Lokal dengan Async Storage Secara Efisien](https://msbu.co.id/blog/tips-mengelola-data-lokal-dengan-async-storage-secara-efisien) ![](https://msbu.co.id/hs-fs/hubfs/Imported_Blog_Media/WhatsApp-Image-2024-10-24-at-10_19_23-AM-5-2.jpg?width=700&name=WhatsApp-Image-2024-10-24-at-10_19_23-AM-5-2.jpg) Oktober 29, 2024 | Employment ### [Mengenal Hak dan Kewajiban Karyawan dalam PKWT dan PKWTT](https://msbu.co.id/blog/mengenal-hak-dan-kewajiban-karyawan-dalam-pkwt-dan-pkwtt) [![W\_Primary Logo\_No Bg\_white2x](https://msbu.co.id/hs-fs/hubfs/W_Primary%20Logo_No%20Bg_white2x.png?width=220&height=80&name=W_Primary%20Logo_No%20Bg_white2x.png "W_Primary Logo_No Bg_white2x")](https://msbu.co.id) **PT MSBU Artha Investama**  Tel : +(62) 21-5890-5002 Graha Pena Lantai 7, Unit 706 Jl. Raya Kby. Lama, No. 12 Jakarta Selatan 12210, Indonesia  Ekosistem - [Managed Team, Headhunting & Frontier AI](https://msbu.co.id/id/layanan/managed-team-headhunting-frontier-ai) - [Human Risk Management](https://sibermate.com) - [Device as a Service](https://msbu.co.id/id/layanan/daas) - [Speed Pitching](https://msbu.co.id/layanan/speed-pitching) Resources - [AI CV Scoring](https://msbu.co.id/ai-cv-scoring) - [Blog](https://msbu.co.id/blog) - [Panduan Gaji](https://msbu.co.id/id/panduan-gaji) Perusahaan - [Tentang](https://msbu.co.id/id/tentang) - [Komunitas](https://msbu.co.id/id/frc) © 2026 MSBU Group. All rights reserved. [Privacy Notice](https://msbu.co.id/id/privacy-notice) ![Icon](https://sibermate.com/hubfs/Mira%20Sibera/whatsapp-brands.svg) Buna ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Hastin Lia", "url" : "https://msbu.co.id/blog/author/hastinlia" }, "dateModified" : "2025-05-03T16:37:11.325Z", "datePublished" : "2025-03-15T04:17:19.000Z", "headline" : "Async dan Await di JavaScript: Panduan Lengkap dan Contohnya", "image" : [ "https://msbu.co.id/hubfs/Imported_Blog_Media/WhatsApp-Image-2025-03-05-at-4_19_00-PM-6-2.jpg" ], "mainEntityOfPage" : { "@id" : "https://msbu.co.id/blog/async-dan-await-di-javascript-panduan-lengkap-dan-contohnya", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://msbu.co.id/hubfs/W_Primary%20with%20no%20Slogan_No%20Bg2x.png" }, "name" : "PT MSBU Konsultan Indonesia" } } ```