Fetch/XMLHttpRequest dalam TypeScript

Artikel ini menerangkan mengenai Fetch/XMLHttpRequest dalam TypeScript.

Anda boleh mempelajari cara untuk menggunakan Fetch API dan XMLHttpRequest, serta perbezaan antara kedua-duanya.

YouTube Video

Fetch/XMLHttpRequest dalam TypeScript

Dalam TypeScript, permintaan HTTP kebanyakannya dijalankan menggunakan dua API: Fetch API dan XMLHttpRequest. Dengan menggunakan TypeScript, anda boleh memperkenalkan semakan jenis untuk permintaan dan tindak balas semasa melaksanakan komunikasi tak segerak dengan API ini, membolehkan anda menulis kod yang lebih selamat. Di bawah, kami akan memperkenalkan cara menggunakan setiap satu.

Fetch API

Fetch API ialah API berasaskan Promise yang digunakan untuk melaksanakan komunikasi tak segerak (permintaan HTTP) dengan cara yang ringkas. Dalam TypeScript, anda boleh membuat permintaan menggunakan kaedah fetch dan memproses tindak balas dengan cara yang selamat jenis.

Penggunaan Asas

Di bawah adalah contoh asas 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    });

• Kod ini menghantar permintaan GET ke URL yang ditetapkan, menganalisis respons yang diterima sebagai JSON, dan memaparkannya ke konsol.

Pengendalian data yang selamat jenis dalam TypeScript

Oleh kerana tindak balas daripada kaedah fetch mempunyai jenis yang tidak jelas, anda boleh memanfaatkan semakan jenis TypeScript dengan secara jelas mentakrifkan jenis tindak balas.

 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    });

• Kod ini menggunakan jenis Post untuk data yang diperoleh melalui fetch, memproses respons dengan cara yang selamat jenis, dan memaparkan tajuk setiap kiriman ke konsol.

Contoh permintaan POST

Apabila menghantar data kepada pelayan, gunakan kaedah POST. Untuk menghantar JSON dalam badan, 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    });

• Kod ini menghantar data dalam format JSON ke pelayan dengan permintaan POST, menerima respons sebagai JSON, dan memaparkannya ke konsol.

Fetch menggunakan fungsi tak segerak (async/await)

Dengan menggunakan async/await dalam TypeScript, anda boleh menulis pemprosesan tak segerak dengan lebih ringkas.

 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();

• Kod ini mendapatkan data kiriman secara tak segerak menggunakan sintaks async/await, memproses respons sebagai jenis Post[], dan memaparkannya ke konsol.

XMLHttpRequest

XMLHttpRequest adalah API yang lebih lama dan agak lebih kompleks berbanding Fetch API, tetapi ia mungkin digunakan apabila keserasian pelayar atau kawalan yang lebih maju diperlukan.

Penggunaan asas XMLHttpRequest

Di bawah 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();

• Kod ini menghantar permintaan GET ke URL yang ditetapkan menggunakan XMLHttpRequest, menganalisis respons sebagai JSON, dan memaparkannya ke konsol.

Contoh permintaan POST

Apabila menghantar data kepada pelayan, nyatakan POST dalam kaedah open dan hantar 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);

• Kod ini menghantar data dalam format JSON ke pelayan dengan permintaan POST menggunakan XMLHttpRequest, dan memaparkan respons yang mengandungi data yang dicipta ke konsol.

Pengendalian ralat dengan XMLHttpRequest

Anda boleh mengendalikan ralat permintaan dengan menggunakan acara 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();

• Kod ini menjalankan permintaan GET dengan XMLHttpRequest, mengendalikan ralat permintaan dengan onerror, dan mencatat respons dengan sewajarnya bagi kejayaan dan kegagalan.

Perbandingan Fetch API dan XMLHttpRequest

Ringkasan

Dalam TypeScript, anda boleh menulis permintaan tak segerak dengan ringkas dan selamat jenis dengan menggunakan Fetch API. Sebaliknya, XMLHttpRequest adalah API yang lebih lama tetapi masih boleh digunakan dalam situasi tertentu. Secara amnya, disarankan untuk menggunakan Fetch API yang mudah dan moden, tetapi jika keserasian penyemak imbas atau penjejakan kemajuan diperlukan, XMLHttpRequest juga boleh dipertimbangkan.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video