Pobierz/XMLHttpRequest w TypeScript

Ten artykuł wyjaśnia Pobierz/XMLHttpRequest w TypeScript.

Możesz dowiedzieć się, jak korzystać z Fetch API i XMLHttpRequest, a także jakie są między nimi różnice.

YouTube Video

Pobierz/XMLHttpRequest w TypeScript

W TypeScript żądania HTTP są głównie wykonywane za pomocą dwóch interfejsów API: Fetch API i XMLHttpRequest. Korzystając z TypeScript, możesz wprowadzić sprawdzanie typów dla żądań i odpowiedzi podczas komunikacji asynchronicznej z tymi interfejsami API, co pozwala pisać bezpieczniejszy kod. Poniżej przedstawimy, jak korzystać z każdego z nich.

Fetch API

Fetch API to API oparte na Promise, używane do prostego wykonywania komunikacji asynchronicznej (żądania HTTP). W TypeScript możesz wykonywać żądania za pomocą metody fetch i przetwarzać odpowiedzi w sposób bezpieczny typowo.

Podstawowe użycie

Poniżej znajduje się podstawowy przykład użycia żądania 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    });

• Ten kod wysyła żądanie GET na określony adres URL, analizuje otrzymaną odpowiedź jako JSON i wyświetla ją w konsoli.

Bezpieczna typowo obsługa danych w TypeScript

Ponieważ odpowiedź z metody fetch ma niejasny typ, możesz wykorzystać sprawdzanie typów w TypeScript, jawnie definiując typ odpowiedzi.

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

• Ten kod stosuje typ Post do danych pobranych za pomocą fetch, przetwarza odpowiedź w sposób bezpieczny typowo i wyświetla tytuł każdego posta w konsoli.

Przykład żądania POST

Podczas wysyłania danych na serwer użyj metody POST. Aby wysłać JSON w ciele, określ headers i 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    });

• Ten kod wysyła dane w formacie JSON na serwer za pomocą żądania POST, odbiera odpowiedź jako JSON i wyświetla ją w konsoli.

Fetch przy użyciu funkcji asynchronicznych (async/await)

Korzystając z async/await w TypeScript, możesz pisać asynchroniczne operacje w prostszy sposób.

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

• Ten kod asynchronicznie pobiera dane postów przy użyciu składni async/await, przetwarza odpowiedź jako typ Post[] i wyświetla ją w konsoli.

XMLHttpRequest

XMLHttpRequest to starsze API i jest nieco bardziej złożone w porównaniu z Fetch API, ale może być używane, gdy konieczna jest kompatybilność z przeglądarkami lub bardziej zaawansowana kontrola.

Podstawowe użycie XMLHttpRequest

Poniżej znajduje się przykład użycia żądania 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();

• Ten kod wysyła żądanie GET na podany URL używając XMLHttpRequest, analizuje odpowiedź jako JSON i wyświetla ją w konsoli.

Przykład żądania POST

Podczas wysyłania danych na serwer określ POST w metodzie open i wyślij dane za pomocą 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);

• Ten kod wysyła dane w formacie JSON na serwer za pomocą żądania POST z użyciem XMLHttpRequest i wyświetla w konsoli odpowiedź zawierającą utworzone dane.

Obsługa błędów w XMLHttpRequest

Możesz obsługiwać błędy żądań za pomocą zdarzenia 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();

• Ten kod wykonuje żądanie GET za pomocą XMLHttpRequest, obsługuje błędy żądania poprzez onerror i odpowiednio loguje odpowiedź zarówno w przypadku sukcesu, jak i niepowodzenia.

Porównanie Fetch API i XMLHttpRequest

Podsumowanie

W TypeScript można pisać asynchroniczne żądania w sposób zwięzły i typowany, korzystając z Fetch API. Z drugiej strony, XMLHttpRequest to starsze API, które jednak nadal może być używane w określonych sytuacjach. Zazwyczaj zaleca się korzystanie z prostego i nowoczesnego Fetch API, ale jeśli wymagana jest kompatybilność z przeglądarkami lub śledzenie postępu, można rozważyć użycie XMLHttpRequest.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video