Fetch/XMLHttpRequest di TypeScript

Artikel ini menjelaskan tentang Fetch/XMLHttpRequest di TypeScript.

Anda dapat mempelajari cara menggunakan Fetch API dan XMLHttpRequest, serta perbedaan-perbedaannya.

YouTube Video

Fetch/XMLHttpRequest di TypeScript

Di TypeScript, permintaan HTTP dilakukan terutama menggunakan dua API: Fetch API dan XMLHttpRequest. Dengan menggunakan TypeScript, Anda dapat memperkenalkan pemeriksaan tipe untuk permintaan dan respons saat melakukan komunikasi asinkron dengan API ini, sehingga memungkinkan Anda menulis kode yang lebih aman. Di bawah ini, kami akan memperkenalkan cara menggunakan masing-masing API.

Fetch API

Fetch API adalah API berbasis Promise yang digunakan untuk melakukan komunikasi asinkron (permintaan HTTP) dengan sederhana. Di TypeScript, Anda dapat membuat permintaan menggunakan metode fetch dan memproses respons dengan cara yang aman terhadap tipe.

Penggunaan Dasar

Berikut adalah contoh dasar menggunakan permintaan GET.

 1const url = 'https://jsonplaceholder.typicode.com/posts';
 2
 3fetch(url)
 4    .then(response => {
 5        if (!response.ok) {
 6        throw new Error('Network response was not ok');
 7        }
 8        return response.json();  // Parse the response as JSON
 9    })
10    .then(data => {
11        console.log(data);
12    })
13    .catch(error => {
14        console.error('Fetch error:', error);
15    });

• Kode ini mengirim permintaan GET ke URL yang ditentukan, mengurai respons yang diterima sebagai JSON, dan menampilkannya ke konsol.

Penanganan data yang aman terhadap tipe di TypeScript

Karena respons dari metode fetch memiliki tipe yang tidak jelas, Anda dapat memanfaatkan pemeriksaan tipe di TypeScript dengan secara eksplisit mendefinisikan tipe respons.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9const url = 'https://jsonplaceholder.typicode.com/posts';
10
11fetch(url)
12    .then(response => response.json())
13    .then((data: Post[]) => {
14        data.forEach(post => {
15            console.log(`Title: ${post.title}`);
16        });
17    })
18    .catch(error => {
19        console.error('Error fetching data:', error);
20    });

• Kode ini menerapkan tipe Post pada data yang diambil dengan fetch, memproses respons secara type-safe, dan menampilkan judul setiap posting ke konsol.

Contoh permintaan POST

Saat mengirim data ke server, gunakan metode POST. Untuk mengirim JSON di bagian body, tentukan headers dan body.

 1const postData = {
 2    title: 'foo',
 3    body: 'bar',
 4    userId: 1
 5};
 6
 7fetch('https://jsonplaceholder.typicode.com/posts', {
 8        method: 'POST',
 9        headers: {
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify(postData)
13    })
14    .then(response => response.json())
15    .then(data => {
16        console.log('Created post:', data);
17    })
18    .catch(error => {
19        console.error('Error posting data:', error);
20    });

• Kode ini mengirim data dalam format JSON ke server dengan permintaan POST, menerima respons sebagai JSON, dan menampilkannya ke konsol.

Fetch menggunakan fungsi asinkron (async/await)

Dengan menggunakan async/await di TypeScript, Anda dapat menulis proses asinkron dengan lebih sederhana.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9async function fetchPosts() {
10    try {
11        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12        if (!response.ok) {
13            throw new Error('Network response was not ok');
14        }
15        const data: Post[] = await response.json();
16        console.log(data);
17    } catch (error) {
18        console.error('Fetch error:', error);
19    }
20}
21
22fetchPosts();

• Kode ini secara asinkron mengambil data posting menggunakan sintaks async/await, memproses respons sebagai tipe Post[], dan menampilkannya ke konsol.

XMLHttpRequest

XMLHttpRequest adalah API yang lebih lama dan sedikit lebih kompleks dibandingkan Fetch API, tetapi dapat digunakan saat diperlukan kompatibilitas dengan browser atau kontrol yang lebih maju.

Penggunaan dasar XMLHttpRequest

Di bawah ini adalah contoh menggunakan permintaan GET.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onreadystatechange = function () {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8    }
 9};
10
11xhr.send();

• Kode ini mengirim permintaan GET ke URL yang ditentukan menggunakan XMLHttpRequest, mengurai respons sebagai JSON, dan menampilkannya ke konsol.

Contoh permintaan POST

Saat mengirim data ke server, tentukan POST dalam metode open dan kirim data dengan send.

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4
 5const postData = JSON.stringify({
 6    title: 'foo',
 7    body: 'bar',
 8    userId: 1
 9});
10
11xhr.onreadystatechange = function () {
12    if (xhr.readyState === 4 && xhr.status === 201) {
13        console.log('Created post:', xhr.responseText);
14    }
15};
16
17xhr.send(postData);

• Kode ini mengirim data dalam format JSON ke server dengan permintaan POST menggunakan XMLHttpRequest, dan menampilkan respons yang berisi data yang dibuat ke konsol.

Penanganan kesalahan dengan XMLHttpRequest

Anda dapat menangani kesalahan permintaan dengan menggunakan event onerror.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onerror = function () {
 5    console.error('Request failed');
 6};
 7
 8xhr.onload = function () {
 9    if (xhr.status === 200) {
10        console.log('Response:', xhr.responseText);
11    } else {
12        console.error('Error:', xhr.status);
13    }
14};
15
16xhr.send();

• Kode ini menjalankan permintaan GET dengan XMLHttpRequest, menangani kesalahan permintaan dengan onerror, dan mencatat respons dengan tepat baik pada saat berhasil maupun gagal.

Perbandingan antara Fetch API dan XMLHttpRequest

Ringkasan

Dalam TypeScript, Anda dapat menulis permintaan asynchronous dengan ringkas dan aman terhadap tipe menggunakan Fetch API. Di sisi lain, XMLHttpRequest adalah API lama tetapi mungkin masih digunakan dalam situasi tertentu. Secara umum, disarankan untuk menggunakan Fetch API yang sederhana dan modern, tetapi jika kompatibilitas browser atau pelacakan progres diperlukan, XMLHttpRequest juga dapat dipertimbangkan.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video