Frontend Final Chapter : Asynchronous Javascript

Konichiwa Minna-san !! 😙 Ketemu lagi sama aku yah di materi Javascript. kali ini kita bakal ngebahas tentang Async Await dan Promises di Javascript. Kalau kamu seorang developer frontend, pasti bakal sering ketemu sama yang namanya asynchronous programming Nah, di modul ini, kita bakal kupas tuntas tentang dua konsep penting dalam asynchronous programming: Async Await dan Promises. Dan tentunya, kita juga bakal belajar gimana caranya implementasi Async Await buat konsumsi API. Yuk, kita mulai! 🚀

Table of Content

· Table of Content
· Apa itu Asynchronous Programming? 🤔
∘ Pengertian Asynchronous Programming
· Javascript Promises 💌
∘ Apa itu Promise?
· Javascript Async/Await⏳
∘ Apa itu Async dan Await?
· API ? Puanganan Opo Kuwihh ?
∘ Apa Itu API?
∘ Jenis-Jenis API
∘ Kenapa Kita Menggunakan API?
· Implementasi Asyncronous Javascript untuk Consume API
∘ Pengenalan ke REST API
∘ Contoh REST API Request
∘ API dan JSON
∘ Menggunakan API di Proyek Javascript
∘ try…catch
· Referensi
· Penutup

Apa itu Asynchronous Programming? 🤔

Hai semua! Di bab ini, kita bakal ngebahas tentang apa itu asynchronous programming. Buat kamu yang udah sering ngoding di Javascript, pasti pernah denger istilah ini. Tapi, apa sih sebenarnya asynchronous programming itu? Yuk, kita pelajari bareng-bareng!

Pengertian Asynchronous Programming

Asynchronous programming adalah cara eksekusi kode di mana operasi-operasi tertentu bisa berjalan secara paralel, alias gak harus nunggu operasi lain selesai dulu. Bayangin kamu lagi masak di dapur: sambil nunggu air mendidih, kamu bisa motong sayuran atau goreng telur. Nah, konsep inilah yang diadopsi oleh asynchronous programming.

Di dunia programming, ada dua jenis eksekusi kode:

1. Synchronous: Eksekusi kodenya berjalan satu per satu, dari atas ke bawah. Misalnya, kalau ada dua baris kode, baris kedua gak bakal jalan sebelum baris pertama selesai. Contohnya:

console.log("Baris satu"); 
console.log("Baris duwa");

Outputnya:

Baris satu
Baris duwa

2. Asynchronous: Kode bisa dieksekusi secara paralel. Artinya, satu baris kode gak harus nunggu baris kode lain selesai dulu. Ini sangat berguna buat operasi yang memakan waktu lama, seperti ngambil data dari server atau baca file. Contohnya:

console.log("Mulai");

setTimeout(() => {
  console.log("Ini dari setTimeout");
}, 2000);

console.log("Selesai");

Outputnya:

Mulai
Selesai
Ini dari setTimeout

Di contoh di atas, setTimeout adalah contoh operasi asynchronous. Dia nunggu 2 detik sebelum ngeprint teks, tapi kode lain tetap jalan selama nunggu.

Javascript Promises 💌

Apa itu Promise?

Promise adalah objek yang merepresentasikan hasil dari sebuah operasi asynchronous yang mungkin belum selesai ketika promise tersebut dibuat. Promise bisa dalam tiga keadaan (states) :

1. Pending: Janjinya masih dalam proses, belum selesai.
2. Fulfilled: Janjinya sudah ditepati, operasinya berhasil.
3. Rejected: Janjinya tidak ditepati, operasinya gagal.

Promise membantu kita untuk menulis kode asynchronous dengan cara yang lebih bersih dan mudah dibaca, dibandingkan dengan menggunakan callback yang bisa berujung pada callback hell.

Javascript Async/Await⏳

Apa itu Async dan Await?

Async/Await adalah sintaks khusus yang diperkenalkan di ES8 (ECMAScript 2017) untuk bekerja dengan promises. Dengan async/await, kita bisa menulis kode asynchronous yang terlihat seperti kode synchronous, sehingga lebih mudah dibaca dan dikelola.

• async: Keyword yang digunakan untuk mendefinisikan sebuah function asynchronous. Function yang didefinisikan dengan async akan selalu mengembalikan promise.
• await: Keyword yang digunakan di dalam function async untuk menunggu promise selesai. await hanya bisa digunakan di dalam async function.

API ? Puanganan Opo Kuwihh ?

Temen temen pasti sering denger istilah ini kan? tapi masih bingung apa itu API, nah makannya kita bahas disini . Lezzgo!

Apa Itu API?

API adalah singkatan dari Application Programming Interface. Secara sederhana, API adalah kumpulan aturan dan definisi yang memungkinkan satu aplikasi berkomunikasi dengan aplikasi lain. Bisa dibilang, API adalah jembatan yang menghubungkan berbagai software, supaya mereka bisa saling berinteraksi dan bertukar data.

Perumpamaan API

Jenis-Jenis API

Ada beberapa jenis API yang sering digunakan, di antaranya:

1. Web API: API yang bisa diakses melalui HTTP/HTTPS. Contohnya adalah REST API dan GraphQL.
2. Library/API Package: Fungsi atau prosedur yang disediakan oleh library atau framework tertentu.
3. Operating System API: API yang disediakan oleh sistem operasi untuk berinteraksi dengan hardware atau sistem operasi itu sendiri.

Di modul ini, kita bakal fokus ke Web API, karena ini yang paling sering kita pakai di dunia frontend development.

Kenapa Kita Menggunakan API?

Ada beberapa alasan kenapa kita sering menggunakan API:

1. Integrasi Data: API memungkinkan kita untuk mengintegrasikan data dari berbagai sumber. Misalnya, kita bisa mengambil data cuaca dari API OpenWeather atau data pengguna dari API Facebook.
2. Reuse: Dengan API, kita bisa menggunakan kembali layanan atau data yang sudah ada, tanpa harus membangun semuanya dari awal.
3. Abstraksi: API menyembunyikan kompleksitas sistem backend dan menyediakan antarmuka yang lebih sederhana bagi developer.

Implementasi Asyncronous Javascript untuk Consume API

Pengenalan ke REST API

REST (Representational State Transfer) adalah arsitektur yang sering digunakan untuk membangun Web API. REST API menggunakan HTTP requests untuk melakukan operasi CRUD (Create, Read, Update, Delete) pada resource. Beberapa komponen utama REST API adalah:

1. Endpoint: URL yang digunakan untuk mengakses resource. Contohnya: https://api.example.com/users
2. Method: HTTP method yang digunakan untuk operasi. Beberapa method umum adalah GET, POST, PUT, DELETE.
3. Headers: Informasi tambahan yang dikirim bersama request. Contohnya: Authentication token.
4. Body: Data yang dikirim bersama request, biasanya digunakan dengan method POST atau PUT.

Contoh REST API Request

Berikut adalah contoh sederhana request ke REST API menggunakan fetch di Javascript

// GET request untuk mengambil data pengguna
fetch('https://api.example.com/users')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

API dan JSON

Biasanya, data yang dikirim dan diterima dari API diformat dalam JSON (JavaScript Object Notation). JSON adalah format data yang ringan dan mudah dibaca, mirip dengan objek di Javascript. Contoh data JSON:

{
    "name": "Mukidi",
    "email": "Mukidi@example.com"
}

Menggunakan API di Proyek Javascript

Untuk menggunakan API di proyek Javascript, kita bisa memanfaatkan beberapa cara, di antaranya:

1. Fetch API: Native API di browser modern untuk melakukan HTTP requests.
2. Axios: Library populer yang menyediakan API yang lebih kaya untuk melakukan HTTP requests.

Contoh penggunaan fetch untuk mengambil data dari API:

async function getData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error); // Output: Error jika terjadi masalah
    }
}

try…catch

pada kode sebelumnya pasti kalian notice try...catch, apa itu ?

try...catch adalah blok kode yang digunakan untuk menangani error secara aman. Dalam blok try, kita menulis kode yang mungkin menghasilkan error. Jika terjadi error, alih-alih crash, eksekusi akan pindah ke blok catch, di mana kita bisa menangani error tersebut.

Referensi

Ku bakal menyajikan beberapa referensi yang bisa kamu gunakan untuk memperdalam pemahaman tentang materi yang sudah kita bahas sebelumnya. Mari Aku spill

• MDN Web Docs
• W3School

Penutup

Yooo Prenn! Makasi sudah menyimak modul ini sampai selesai. Kita udah ngebahas banyak hal seru tentang asynchronous programming, promises, async/await, dan juga cara kerja API. Semoga penjelasan ini bisa membantu kalian lebih paham dan siap buat ngoding dengan lebih lancar dan efektif. Jangan lupa untuk terus praktek dan eksplorasi lebih lanjut. AMCC Learning By Doing, Learning By Teaching! 🚀