Terjemahan ke Bahasa Indonesia

JavaScript - Iterasi Asinkron

Halo, para ahli JavaScript masa depan! Hari ini, kita akan mengemban sebuah perjalanan menarik ke dunia iterasi asinkron. Jangan khawatir jika kata-kata itu terdengar sedikit menakutkan - di akhir pelajaran ini, Anda akan dapat dengan percaya diri menggunaan konsep yang kuat ini seperti seorang profesional. mari kita mulai!

Iterasi Asinkron

Apa Itu Iterasi Asinkron?

Bayangkan Anda di sebuah kafe yang sibuk. Anda memesan, tetapi bukannya menunggu di meja, Anda duduk dan bergosip dengan teman-teman Anda sementara kopi Anda sedang dibuat. Itu adalah esensi operasi asinkron dalam pemrograman - Anda memulai tugas dan kemudian melanjutkan hal lain sementara menunggu penyelesaiannya.

Iterasi asinkron mengambil konsep ini satu langkah lebih jauh. Seperti jika Anda memesan beberapa kopi, dan setiap kopi dibawa ke Anda saat itu siap, tanpa Anda harus kembali ke meja untuk memeriksa.

Dalam JavaScript, iterasi asinkron memungkinkan kita bekerja dengan sumber data asinkron dengan cara yang natural dan berurutan, meskipun operasi tersebut terjadi di latar belakang.

Mengerti Operasi Asinkron

Sebelum kita masuk ke iterasi asinkron, mari pertama-tama kita mengerti operasi asinkron dalam JavaScript.

Janji: Fondasi

Janji adalah konsep fundamental dalam JavaScript asinkron. Mereka mewakili nilai yang mungkin belum tersedia saat ini tetapi akan diselesaikan di suatu titik masa depan.

Berikut adalah contoh sederhana:

let coffeePromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Kopi Anda siap!");
}, 2000);
});

coffeePromise.then((message) => {
console.log(message);
});

Dalam contoh ini, coffeePromise mensimulasikan proses membuat kopi. Setelah 2 detik (mensimulasikan waktu brewing), itu diselesaikan dengan pesan. Metode then digunakan untuk menangani janji yang diselesaikan.

Async/Await: Gula Sintaksis untuk Janji

Sintaksis async/await membuat bekerja dengan janji menjadi lebih mudah. Itu memungkinkan Anda menulis kode asinkron yang terlihat dan berperilaku seperti kode sinkron.

async function getCoffee() {
let message = await new Promise((resolve) => {
setTimeout(() => {
resolve("Kopi Anda siap!");
}, 2000);
});
console.log(message);
}

getCoffee();

Kode ini melakukan hal yang sama seperti contoh sebelumnya, tetapi ditulis dengan cara yang lebih mudah dibaca dan dipahami.

Menggunakan Loop 'for await...of'

Sekarang kita mengerti operasi asinkron, mari lihat bagaimana kita dapat mengiterasinya menggunakan loop for await...of.

Sintaksis Dasar

Sintaksis dasar loop for await...of tampak seperti ini:

async function example() {
for await (let value of asyncIterable) {
console.log(value);
}
}

Contoh Praktis

mari katakan kita memiliki fungsi asinkron yang mensimulasikan pemesanan kopi:

async function* coffeeOrders() {
yield await Promise.resolve("Espresso");
yield await Promise.resolve("Latte");
yield await Promise.resolve("Cappuccino");
}

async function serveCoffee() {
for await (let coffee of coffeeOrders()) {
console.log(`Melayani: ${coffee}`);
}
}

serveCoffee();

Dalam contoh ini, coffeeOrders adalah fungsi generator asinkron yang menghasilkan pesanan kopi. Fungsi serveCoffee menggunakan loop for await...of untuk mengiterasi pesanan ini dan melayani mereka saat tersedia.

Kasus Penggunaan Dunia Nyata

Iterasi asinkron sangat berguna saat berurusan dengan stream data atau saat Anda perlu memproses jumlah data besar dalam chunck.

Membaca Berkas Besar

Bayangkan Anda perlu membaca berkas sangat besar, baris per baris:

const fs = require('fs').promises;

async function* readLines(file) {
const fileHandle = await fs.open(file, 'r');
const stream = fileHandle.createReadStream();
let buffer = '';

for await (const chunk of stream) {
buffer += chunk;
let lineEnd;
while ((lineEnd = buffer.indexOf('\n')) !== -1) {
yield buffer.slice(0, lineEnd);
buffer = buffer.slice(lineEnd + 1);
}
}

if (buffer.length > 0) {
yield buffer;
}

await fileHandle.close();
}

async function processFile() {
for await (const line of readLines('largefile.txt')) {
console.log(`Memproses baris: ${line}`);
}
}

processFile();

Contoh ini menunjukkan bagaimana Anda dapat menggunakan iterasi asinkron untuk memproses berkas besar baris per baris tanpa memuat seluruh berkas ke memori sekaligus.

Mengambil Data Halamanan API

Kasus penggunaan lainnya adalah mengambil data halamanan dari API:

async function* fetchPages(url) {
let nextUrl = url;
while (nextUrl) {
const response = await fetch(nextUrl);
const data = await response.json();
yield data.items;
nextUrl = data.next;
}
}

async function processAllPages() {
for await (const page of fetchPages('https://api.example.com/data')) {
for (const item of page) {
console.log(`Memproses item: ${item.name}`);
}
}
}

processAllPages();

Contoh ini menunjukkan bagaimana Anda dapat menggunakan iterasi asinkron untuk mengambil dan memproses data halamanan dari API, menangani setiap halaman saat itu diterima.

Kesimpulan

Iterasi asinkron adalah alat kuat di JavaScript yang memungkinkan kita bekerja dengan sumber data asinkron dalam cara yang bersih dan intuitif. Itu sangat berguna saat berurusan dengan stream data atau saat Anda perlu memproses jumlah data besar dalam chunck.

Ingat, kunci untuk menguasai iterasi asinkron adalah latihan. Jangan takut untuk mencoba konsep ini dalam proyek Anda sendiri. Sebelum Anda tahu, Anda akan menangani operasi asinkron seperti seorang ahli JavaScript!

Metode	Deskripsi
for await...of	Digunakan untuk mengiterasi objek iterable asinkron
async function*	Menentukan fungsi generator asinkron
yield	Digunakan dalam fungsi generator untuk menentukan nilai yang akan diiterasi
Promise.resolve()	Membuat janji yang diselesaikan dengan nilai yang diberikan
async/await	Sintaksis untuk menangani janji dalam cara yang tampak sinkron

Selamat mengoding, dan semoga operasi asinkron Anda selalu diselesaikan secara sukses!

Credits: Image by storyset