Hente/XMLHttpRequest i TypeScript

Denne artikkelen forklarer Hente/XMLHttpRequest i TypeScript.

Du kan lære hvordan du bruker Fetch API og XMLHttpRequest, samt forskjellene mellom dem.

YouTube Video

Hente/XMLHttpRequest i TypeScript

I TypeScript utføres HTTP-forespørsler hovedsakelig ved hjelp av to API-er: Fetch API og XMLHttpRequest. Ved å bruke TypeScript kan du innføre typekontroll for forespørsler og svar når du utfører asynkron kommunikasjon med disse API-ene, noe som lar deg skrive sikrere kode. Nedenfor vil vi introdusere hvordan du bruker hver av dem.

Fetch API

Fetch API er et Promise-basert API som brukes til å enkelt utføre asynkron kommunikasjon (HTTP-forespørsler). I TypeScript kan du gjøre forespørsler ved å bruke fetch-metoden og behandle svar på en typesikker måte.

Grunnleggende bruk

Nedenfor er et grunnleggende eksempel på en GET-forespørsel.

 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 koden sender en GET-forespørsel til den spesifiserte URL-en, analyserer det mottatte svaret som JSON, og skriver det ut til konsollen.

Typesikker databehandling i TypeScript

Siden svaret fra fetch-metoden har en uklar type, kan du bruke TypeScripts typekontroll ved å eksplisitt 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 koden bruker Post-typen på dataene hentet med fetch, behandler svaret typesikkert, og skriver ut tittelen på hvert innlegg til konsollen.

Eksempel på en POST-forespørsel

Når du sender data til serveren, bruk POST-metoden. For å sende JSON i kroppen, spesifiser 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 koden sender data i JSON-format til serveren med en POST-forespørsel, mottar svaret som JSON, og skriver det ut til konsollen.

Fetch ved bruk av asynkrone funksjoner (async/await)

Ved å bruke async/await i TypeScript kan du skrive asynkron behandling på en enklere måte.

 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 koden henter innlegg-data asynkront ved å bruke async/await-syntaksen, behandler svaret som en Post[]-type, og skriver det ut til konsollen.

XMLHttpRequest

XMLHttpRequest er et eldre API og er noe mer komplekst sammenlignet med Fetch API, men det kan brukes når nettleserkompatibilitet eller mer avansert kontroll er nødvendig.

Grunnleggende bruk av XMLHttpRequest

Nedenfor er et eksempel på en GET-forespørsel.

 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 koden sender en GET-forespørsel til den spesifiserte URL-en ved hjelp av XMLHttpRequest, analyserer svaret som JSON, og skriver det ut til konsollen.

Eksempel på en POST-forespørsel

Når du sender data til serveren, spesifiser POST i open-metoden og send 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 koden sender data i JSON-format til serveren med en POST-forespørsel ved bruk av XMLHttpRequest, og skriver ut svaret som inneholder de opprettede dataene til konsollen.

Feilhåndtering med XMLHttpRequest

Du kan håndtere forespørselsfeil ved å bruke onerror-hendelsen.

 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 koden utfører en GET-forespørsel med XMLHttpRequest, håndterer forespørselsfeil med onerror, og logger svaret hensiktsmessig både ved suksess og feil.

Sammenligning av Fetch API og XMLHttpRequest

Sammendrag

I TypeScript kan du skrive asynkrone forespørsler kortfattet og typesikkert ved å bruke Fetch API. På den annen side er XMLHttpRequest en eldre API, men kan fortsatt brukes i visse situasjoner. Generelt anbefales det å bruke den enkle og moderne Fetch API, men hvis nettleserkompatibilitet eller fremdriftssporing er nødvendig, kan også XMLHttpRequest vurderes.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video