JavaScript - Penyempalan Iterasi

Hai, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia iterasi asinkron. Jangan khawatir jika kata-kata itu terdengar sedikit menakutkan - pada akhir pelajaran ini, Anda akan dapat dengan percaya diri menggunakan konsep yang kuat ini seperti seorang profesional. mari kita masuk ke dalamnya!

Iterasi Asinkron

Apa Itu Iterasi Asinkron?

Bayangkan Anda berada di sebuah kedai kopi yang sibuk. Anda memesan kopi Anda, tetapi instead of menunggu di meja, Anda duduk dan berbicara dengan teman-teman Anda saat kopi Anda sedang disiapkan. Itu adalah esensi operasi asinkron dalam pemrograman - Anda memulai tugas dan kemudian melanjutkan hal lain saat menunggu selesainya.

Iterasi asinkron mengambil konsep ini satu langkah lebih jauh. Itu seperti jika Anda memesan beberapa kopi, dan setiap kopi disajikan 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 terasa alami dan berurutan, meskipun operasi itu 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 terpecahkan pada suatu titik di masa depan.

Ini 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 terpecahkan dengan pesan. Metode then digunakan untuk menangani janji yang terpecahkan.

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 mudah dibaca dan dimengerti.

Menggunakan Loop 'for await...of'

Sekarang kita mengerti operasi asinkron, mari lihat bagaimana kita dapat mengiterasikan mereka 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(`Serving: ${coffee}`);
}
}

serveCoffee();

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

Kasus Penggunaan Dunia Nyata

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

Membaca File Besar

Bayangkan Anda perlu membaca file 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(`Processing line: ${line}`);
}
}

processFile();

Contoh ini menunjukkan bagaimana Anda dapat menggunakan iterasi asinkron untuk memproses file besar baris per baris tanpa memuat seluruh file 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(`Processing 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 dalam 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 potongan.

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

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

Happy coding, dan semoga operasi asinkron Anda selalu terpecahkan secara sukses!

Credits: Image by storyset