Fetch/XMLHttpRequest i TypeScript

Denne artikel forklarer Fetch/XMLHttpRequest i TypeScript.

Du kan lære om, hvordan man bruger Fetch API og XMLHttpRequest, samt deres forskelle.

YouTube Video

Fetch/XMLHttpRequest i TypeScript

I TypeScript udføres HTTP-forespørgsler primært ved hjælp af to API'er: Fetch API og XMLHttpRequest. Ved at bruge TypeScript kan du indføre typekontrol for forespørgsler og svar, når du udfører asynkron kommunikation med disse API'er, hvilket giver dig mulighed for at skrive mere sikker kode. Nedenfor vil vi introducere, hvordan man bruger hver af dem.

Fetch API

Fetch API er et Promise-baseret API, der bruges til at udføre asynkron kommunikation (HTTP-forespørgsler) på en enkel måde. I TypeScript kan du foretage forespørgsler ved hjælp af fetch-metoden og behandle svar på en type-sikker måde.

Grundlæggende Brug

Nedenfor er et grundlæggende eksempel, der bruger en GET-forespørgsel.

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

• Denne kode sender en GET-anmodning til den angivne URL, fortolker det modtagne svar som JSON, og viser det i konsollen.

Type-sikker datahåndtering i TypeScript

Da svaret fra fetch-metoden har en uklar type, kan du udnytte TypeScripts typekontrol ved eksplicit at definere svartypen.

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

• Denne kode anvender Post-typen på de data, der hentes med fetch, behandler svaret typesikkert og viser titlen på hvert indlæg i konsollen.

Eksempel på en POST-forespørgsel

Når du sender data til serveren, skal du bruge POST-metoden. For at sende JSON i indholdet skal du angive headers og 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    });

• Denne kode sender data i JSON-format til serveren med en POST-anmodning, modtager svaret som JSON, og viser det i konsollen.

Fetch ved hjælp af asynkrone funktioner (async/await)

Ved at bruge async/await i TypeScript kan du skrive asynkron behandling på en enklere måde.

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

• Denne kode henter postdata asynkront ved hjælp af async/await-syntaksen, behandler svaret som en Post[]-type, og viser det i konsollen.

XMLHttpRequest

XMLHttpRequest er en ældre API og er noget mere kompleks sammenlignet med Fetch API, men den kan bruges, når browserkompatibilitet eller mere avanceret kontrol er nødvendig.

Grundlæggende brug af XMLHttpRequest

Nedenfor er et eksempel, der bruger en GET-forespørgsel.

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

• Denne kode sender en GET-anmodning til den angivne URL med XMLHttpRequest, fortolker svaret som JSON, og viser det i konsollen.

Eksempel på en POST-forespørgsel

Når du sender data til serveren, skal du angive POST i open-metoden og sende data med 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);

• Denne kode sender data i JSON-format til serveren med en POST-anmodning via XMLHttpRequest, og viser svaret, der indeholder de oprettede data, i konsollen.

Fejlhåndtering med XMLHttpRequest

Du kan håndtere forespørgselsfejl ved at bruge onerror-hændelsen.

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

• Denne kode udfører en GET-anmodning med XMLHttpRequest, håndterer anmodningsfejl med onerror og logger svaret korrekt både ved succes og fejl.

Sammenligning af Fetch API og XMLHttpRequest

Sammendrag

I TypeScript kan du skrive asynkrone forespørgsler kortfattet og type-sikkert ved hjælp af Fetch API. På den anden side er XMLHttpRequest en ældre API, men den kan stadig bruges i visse situationer. Generelt anbefales det at bruge den enkle og moderne Fetch API, men hvis browserkompatibilitet eller fremskridtsovervågning er nødvendig, kan XMLHttpRequest også overvejes.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video