Angular Academy · Pelajaran

Operator Transformasi

Gunakan map, switchMap, mergeMap, dan concatMap.

Operator Transformasi adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Apa itu operator

Operator adalah fungsi yang Anda susun di dalam .pipe() untuk mengubah aliran. Operator transformasi mengubah setiap nilai yang dipancarkan atau meratakan observable bagian dalam menjadi keluaran.

map

map mengubah setiap nilai yang dipancarkan, seperti Array.map tetapi berlangsung dari waktu ke waktu.

import { of, map } from 'rxjs';

of(1, 2, 3).pipe(
  map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30

Mengapa pemetaan tingkat tinggi

Saat setiap nilai memicu observable lain (misalnya panggilan HTTP), Anda mendapatkan observable yang berisi observable. Operator perataan (switchMap, mergeMap, concatMap) melakukan subscribe ke observable bagian dalam dan memancarkan nilainya.

switchMap

switchMap membatalkan observable bagian dalam sebelumnya saat nilai baru tiba. Sangat cocok untuk pencarian saat mengetik—permintaan lama dibuang.

import { switchMap } from 'rxjs';

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));

mergeMap

mergeMap (alias flatMap) menjalankan observable bagian dalam secara bersamaan dan menggabungkan semua emisinya. Tidak ada yang dibatalkan.

import { mergeMap } from 'rxjs';

ids$.pipe(
  mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallel

concatMap

concatMap mengantrekan observable bagian dalam dan menjalankannya satu per satu secara berurutan, dengan menunggu setiap observable selesai. Gunakan saat urutan penting.

import { concatMap } from 'rxjs';

saveQueue$.pipe(
  concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in order

exhaustMap

exhaustMap mengabaikan nilai baru selama observable bagian dalam masih berjalan. Sangat berguna untuk mencegah pengiriman ganda saat tombol diklik.

import { exhaustMap } from 'rxjs';

submitClicks$.pipe(
  exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishes

Memilih perata yang tepat

switchMap: batalkan yang sebelumnya (pencarian).
mergeMap: semuanya secara paralel (penulisan independen).
concatMap: berurutan, satu per satu (penyimpanan berurutan).
exhaustMap: abaikan saat sibuk (tombol masuk).

switchMap dan pembatalan

Karena switchMap membatalkan observable bagian dalam yang sedang berjalan, operator ini juga berhenti berlangganan dari permintaan HTTP yang mendasarinya. Angular menerjemahkannya sebagai permintaan yang dibatalkan—sehingga menghemat bandwidth.

Menggabungkan map dengan perata

Anda sering menggunakan map untuk mengambil data setelah perataan.

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term)),
  map(res => res.items)
).subscribe(items => console.log(items));

Hindari subscribe bersarang

Jangan pernah melakukan subscribe di dalam subscribe. Gunakan operator perataan sebagai gantinya—cara ini menjaga pipeline tetap deklaratif dan menangani pembersihan dengan benar.

// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);

Pemeriksaan Cepat

Uji pemahaman Anda tentang operator transformasi.

Ringkasan: Operator Transformasi

map mengubah nilai; operator perataan menangani observable di dalam.

switchMap: membatalkan proses sebelumnya.
mergeMap: berjalan secara paralel.
concatMap: berjalan berurutan dan tetap sesuai urutan.
exhaustMap: mengabaikan masukan saat sedang sibuk.

Berikutnya: operator penyaringan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Operator Transformasi” gratis?

Ya — teks lengkap “Operator Transformasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Operator Transformasi”?

Gunakan map, switchMap, mergeMap, dan concatMap. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Operator Transformasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy