Asynchronous Programming TypeScript: Promise dan Async/Await untuk Penanganan Data Asinkron

Dalam pengembangan aplikasi modern, terutama yang berinteraksi dengan API atau database, kita sering berhadapan dengan proses asinkron — di mana suatu operasi membutuhkan waktu (misalnya mengambil data dari server) tanpa menghentikan eksekusi kode lainnya. Di sinilah asynchronous programming TypeScript memainkan peran penting.

Dengan dukungan fitur seperti Promise dan async/await, TypeScript memungkinkan pengembang menulis kode asinkron yang lebih rapi, mudah dibaca, dan aman dari kesalahan tipe data. Selain itu, berkat sistem typing-nya, TypeScript mampu memastikan bahwa data yang kita tangani dari fetch atau axios benar-benar sesuai dengan struktur yang diharapkan. Artikel ini akan membahas bagaimana menangani proses asynchronous dengan Promise dan async/await serta cara menambahkan typing yang kuat pada operasi HTTP.

Apa Itu Asynchronous Programming?

Asynchronous programming adalah paradigma pemrograman di mana sebuah operasi tidak harus diselesaikan secara berurutan sebelum kode berikutnya dijalankan. Artinya, JavaScript (dan TypeScript) tidak akan “menunggu” operasi selesai — melainkan melanjutkan eksekusi program sambil menunggu hasil operasi tersebut.

Contoh umum dari proses asinkron adalah pengambilan data dari API menggunakan fetch(). Tanpa penanganan asinkron yang benar, kode bisa menjadi sulit diatur, menghasilkan callback yang bersarang (callback hell), atau error yang sulit dilacak.

Promise dalam TypeScript

Promise adalah objek yang mewakili hasil dari operasi asinkron — bisa sukses (resolved) atau gagal (rejected). TypeScript menambahkan kemampuan typing agar developer bisa lebih yakin dengan tipe data hasil Promise tersebut.

Contoh Promise sederhana:

function getData(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data berhasil diambil!");
    }, 1000);
  });
}

getData().then((result) => console.log(result));

Penjelasan:
Fungsi getData mengembalikan Promise<string>, yang berarti hasil akhirnya akan berupa string. TypeScript akan memberikan peringatan jika hasil resolve tidak sesuai dengan tipe tersebut.

Async dan Await

Kata kunci async dan await adalah cara modern untuk menangani Promise secara lebih elegan.
Dengan async/await, kode asinkron dapat ditulis seolah-olah sinkron, membuatnya lebih mudah dibaca dan di-debug.

Contoh penggunaan:

async function fetchData(): Promise<void> {
  const data = await getData();
  console.log(data);
}

fetchData();

Penjelasan:

• async menandakan bahwa fungsi akan selalu mengembalikan Promise.

• await digunakan untuk menunggu hasil dari Promise sebelum melanjutkan ke baris berikutnya.

Penanganan Error pada Async/Await

Untuk menangani error saat menjalankan operasi asinkron, gunakan blok try...catch.

async function fetchUserData(): Promise<void> {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const user = await response.json();
    console.log("Nama pengguna:", user.name);
  } catch (error) {
    console.error("Terjadi kesalahan saat mengambil data:", error);
  }
}

Dengan cara ini, kita dapat menangani error secara elegan tanpa menggunakan callback berlapis.

Typing untuk Fetch API

Saat menggunakan fetch, penting untuk memberikan tipe data yang sesuai agar TypeScript dapat melakukan validasi.

Misalnya, kita memiliki tipe User seperti ini:

interface User {
  id: number;
  name: string;
  email: string;
}

Kemudian gunakan typing saat mengambil data:

async function getUser(): Promise<User> {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const data: User = await response.json();
  return data;
}

getUser().then((user) => console.log(user.name));

Penjelasan:

• Promise<User> menunjukkan bahwa fungsi getUser akan mengembalikan data bertipe User.

• TypeScript akan memberikan error jika struktur data dari API tidak sesuai dengan interface tersebut.

Typing untuk Axios

Jika kamu menggunakan Axios, TypeScript menyediakan dukungan typing yang lebih kuat secara otomatis.

import axios from "axios";

interface Product {
  id: number;
  name: string;
  price: number;
}

async function getProduct(): Promise<Product> {
  const response = await axios.get<Product>("https://api.example.com/products/1");
  return response.data;
}

getProduct().then((product) => console.log(product.name));

Penjelasan:

• axios.get<Product>() memastikan bahwa respons dari API sesuai dengan tipe Product.

• TypeScript akan menolak jika response.data tidak memiliki properti yang sesuai dengan interface Product.

Kombinasi Promise dan Typing

Dalam proyek besar, kamu bisa menggabungkan berbagai teknik asinkron dengan typing untuk membuat sistem yang lebih aman dan terstruktur.

Contoh kombinasi Promise dengan tipe kustom:

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

function fetchTodos(): Promise<Todo[]> {
  return fetch("https://jsonplaceholder.typicode.com/todos")
    .then((res) => res.json())
    .then((data: Todo[]) => data);
}

fetchTodos().then((todos) => console.log("Jumlah tugas:", todos.length));

Dengan pendekatan ini, kamu dapat menjaga agar data yang diterima dari server benar-benar sesuai dengan struktur Todo[].

Kesimpulan

Asynchronous programming TypeScript memberikan cara yang efisien dan aman untuk menangani operasi yang berjalan di luar urutan normal eksekusi kode. Dengan memanfaatkan Promise, async/await, serta sistem typing untuk fetch dan axios, pengembang dapat menulis kode yang bersih, terprediksi, dan lebih minim bug.

Selain meningkatkan keamanan tipe data, pendekatan ini juga membantu menjaga keterbacaan dan kestabilan aplikasi, terutama saat bekerja dengan API eksternal atau proses yang memakan waktu. Menguasai asynchronous programming di TypeScript adalah langkah penting untuk menjadi developer modern yang produktif dan andal.