Fetch/XMLHttpRequest en TypeScript

Este artículo explica Fetch/XMLHttpRequest en TypeScript.

Puedes aprender cómo usar la Fetch API y XMLHttpRequest, así como sus diferencias.

YouTube Video

Fetch/XMLHttpRequest en TypeScript

En TypeScript, las solicitudes HTTP se realizan principalmente utilizando dos APIs: Fetch API y XMLHttpRequest. Al usar TypeScript, puedes introducir la verificación de tipos para solicitudes y respuestas al realizar comunicación asincrónica con estas APIs, lo que te permite escribir un código más seguro. A continuación, presentaremos cómo usar cada una de ellas.

Fetch API

La Fetch API es una API basada en Promesas utilizada para realizar comunicación asincrónica (solicitudes HTTP) de manera sencilla. En TypeScript, puedes realizar solicitudes utilizando el método fetch y procesar respuestas de manera segura con tipos.

Uso básico

A continuación, se muestra un ejemplo básico utilizando una solicitud 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    });

• Este código envía una solicitud GET a la URL especificada, analiza la respuesta recibida como JSON y la muestra en la consola.

Manejo de datos seguro con tipos en TypeScript

Dado que la respuesta del método fetch tiene un tipo poco claro, puedes aprovechar la verificación de tipos de TypeScript definiendo explícitamente el tipo de respuesta.

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

• Este código aplica el tipo Post a los datos obtenidos con fetch, procesa la respuesta de forma segura según el tipo y muestra el título de cada publicación en la consola.

Ejemplo de una solicitud POST

Cuando envíes datos al servidor, utiliza el método POST. Para enviar JSON en el cuerpo, especifica headers y 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    });

• Este código envía datos en formato JSON al servidor mediante una solicitud POST, recibe la respuesta como JSON y la muestra en la consola.

Fetch utilizando funciones asincrónicas (async/await)

Al utilizar async/await en TypeScript, puedes escribir procesos asincrónicos de manera más simple.

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

• Este código recupera datos de publicaciones de forma asíncrona utilizando la sintaxis async/await, procesa la respuesta como un tipo Post[] y la muestra en la consola.

XMLHttpRequest

XMLHttpRequest es una API más antigua y un poco más compleja en comparación con Fetch API, pero puede ser usada cuando se necesita compatibilidad con navegadores o un control más avanzado.

Uso básico de XMLHttpRequest

A continuación, se muestra un ejemplo utilizando una solicitud 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();

• Este código envía una solicitud GET a la URL especificada usando XMLHttpRequest, analiza la respuesta como JSON y la muestra en la consola.

Ejemplo de una solicitud POST

Cuando envíes datos al servidor, especifica POST en el método open y envía los datos con 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);

• Este código envía datos en formato JSON al servidor mediante una solicitud POST usando XMLHttpRequest y muestra en la consola la respuesta con los datos creados.

Manejo de errores con XMLHttpRequest

Puedes manejar errores de solicitud utilizando el evento 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();

• Este código ejecuta una solicitud GET con XMLHttpRequest, maneja errores de la solicitud con onerror y registra adecuadamente la respuesta tanto en caso de éxito como de fallo.

Comparación de Fetch API y XMLHttpRequest

Resumen

En TypeScript, puedes escribir solicitudes asincrónicas de manera concisa y con código seguro para tipos usando la Fetch API. Por otro lado, XMLHttpRequest es una API más antigua pero aún puede ser utilizada en ciertas situaciones. Generalmente, se recomienda usar la Fetch API, que es moderna y sencilla, pero si se necesita compatibilidad con navegadores o seguimiento de progreso, también se puede considerar XMLHttpRequest.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video