Hämta/XMLHttpRequest i TypeScript

Den här artikeln förklarar Hämta/XMLHttpRequest i TypeScript.

Du kan lära dig hur du använder Fetch API och XMLHttpRequest samt deras skillnader.

YouTube Video

Hämta/XMLHttpRequest i TypeScript

I TypeScript görs HTTP-förfrågningar huvudsakligen med hjälp av två API:er: Fetch API och XMLHttpRequest. Genom att använda TypeScript kan du införa typkontroll för förfrågningar och svar vid asynkron kommunikation med dessa API:er, vilket gör det möjligt att skriva säkrare kod. Nedan kommer vi att introducera hur man använder var och en av dem.

Fetch API

Fetch API är ett API baserat på Promise som används för att enkelt utföra asynkron kommunikation (HTTP-förfrågningar). I TypeScript kan du göra förfrågningar med metod fetch och bearbeta svar på ett typsäkert sätt.

Grundläggande användning

Nedan är ett grundläggande exempel som använder en GET-förfrågan.

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

• Den här koden skickar en GET-begäran till den angivna URL:en, tolkar det mottagna svaret som JSON och skriver ut det i konsolen.

Typsäker datahantering i TypeScript

Eftersom svaret från metoden fetch har en oklar typ, kan du använda TypeScripts typkontroll genom att uttryckligen definiera svarstypen.

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

• Den här koden tillämpar typen Post på den data som hämtas med fetch, behandlar svaret på ett typesäkert sätt och skriver ut titeln på varje inlägg i konsolen.

Exempel på en POST-förfrågan

När du skickar data till servern, använd metoden POST. För att skicka JSON i kroppen, specificera headers och 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    });

• Den här koden skickar data i JSON-format till servern med en POST-begäran, tar emot svaret som JSON och skriver ut det i konsolen.

Fetch med asynkrona funktioner (async/await)

Genom att använda async/await i TypeScript kan du skriva asynkron bearbetning på ett enklare sätt.

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

• Den här koden hämtar asynkront inläggsdata med hjälp av async/await-syntaxen, bearbetar svaret som en Post[]-typ och skriver ut det i konsolen.

XMLHttpRequest

XMLHttpRequest är ett äldre API och är något mer komplext jämfört med Fetch API, men kan användas när webbläsarkompatibilitet eller mer avancerad kontroll är nödvändig.

Grundläggande användning av XMLHttpRequest

Nedan är ett exempel som använder en GET-förfrågan.

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

• Den här koden skickar en GET-begäran till den angivna URL:en med XMLHttpRequest, tolkar svaret som JSON och skriver ut det i konsolen.

Exempel på en POST-förfrågan

När du skickar data till servern, specificera POST i metoden open och skicka 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);

• Den här koden skickar data i JSON-format till servern med en POST-begäran via XMLHttpRequest och skriver ut svaret som innehåller den skapade datan i konsolen.

Felfunktionalitet med XMLHttpRequest

Du kan hantera förfrågningsfel genom att använda händelsen 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();

• Den här koden utför en GET-begäran med XMLHttpRequest, hanterar begärans fel med onerror och loggar svaret korrekt både vid framgång och misslyckande.

Jämförelse av Fetch API och XMLHttpRequest

Sammanfattning

I TypeScript kan du skriva asynkrona förfrågningar koncist och typesäker kod med hjälp av Fetch API. Å andra sidan är XMLHttpRequest ett äldre API, men det kan fortfarande användas i vissa situationer. Generellt rekommenderas det att använda den enkla och moderna Fetch API, men om webbläsarkompatibilitet eller framstegsspårning behövs kan även XMLHttpRequest övervägas.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video