Récupération/XMLHttpRequest en TypeScript

Cet article explique la récupération/XMLHttpRequest en TypeScript.

Vous pouvez apprendre à utiliser l'Fetch API et XMLHttpRequest, ainsi que leurs différences.

YouTube Video

Récupération/XMLHttpRequest en TypeScript

En TypeScript, les requêtes HTTP sont principalement effectuées à l'aide de deux APIs : Fetch API et XMLHttpRequest. En utilisant TypeScript, vous pouvez introduire une vérification des types pour les requêtes et les réponses lors de la communication asynchrone avec ces APIs, ce qui permet d'écrire un code plus sûr. Nous vous présenterons ci-dessous comment utiliser chacune d'elles.

Fetch API

L'Fetch API est une API basée sur les Promesses utilisée pour effectuer simplement des communications asynchrones (requêtes HTTP). En TypeScript, vous pouvez effectuer des requêtes à l'aide de la méthode fetch et traiter les réponses de manière sûre avec les types.

Utilisation de base

Voici un exemple de base utilisant une requête 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    });

• Ce code envoie une requête GET à l'URL spécifiée, analyse la réponse reçue en tant que JSON et l'affiche dans la console.

Gestion sécurisée des données en TypeScript

Étant donné que la réponse de la méthode fetch a un type indéfini, vous pouvez utiliser la vérification des types de TypeScript en définissant explicitement le type de la réponse.

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

• Ce code applique le type Post aux données récupérées avec fetch, traite la réponse de manière sécurisée quant au type et affiche le titre de chaque publication dans la console.

Exemple d'une requête POST

Lorsque vous envoyez des données au serveur, utilisez la méthode POST. Pour envoyer du JSON dans le corps, spécifiez les headers et le 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    });

• Ce code envoie des données au format JSON au serveur via une requête POST, reçoit la réponse en JSON et l'affiche dans la console.

Fetch avec des fonctions asynchrones (async/await)

En utilisant async/await en TypeScript, vous pouvez écrire un traitement asynchrone de manière plus 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();

• Ce code récupère de manière asynchrone les données des publications en utilisant la syntaxe async/await, traite la réponse comme un type Post[] et l’affiche dans la console.

XMLHttpRequest

XMLHttpRequest est une ancienne API et est un peu plus complexe par rapport à l'Fetch API, mais elle peut être utilisée lorsque la compatibilité des navigateurs ou un contrôle plus avancé sont nécessaires.

Utilisation de base de XMLHttpRequest

Voici un exemple utilisant une requête 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();

• Ce code envoie une requête GET à l'URL spécifiée avec XMLHttpRequest, analyse la réponse en JSON et l'affiche dans la console.

Exemple d'une requête POST

Lorsque vous envoyez des données au serveur, spécifiez POST dans la méthode open et envoyez les données avec 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);

• Ce code envoie des données au format JSON au serveur avec une requête POST utilisant XMLHttpRequest et affiche dans la console la réponse contenant les données créées.

Gestion des erreurs avec XMLHttpRequest

Vous pouvez gérer les erreurs de requête en utilisant l'événement 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();

• Ce code exécute une requête GET avec XMLHttpRequest, gère les erreurs de requête avec onerror et enregistre de manière appropriée la réponse en cas de succès ou d’échec.

Comparaison entre Fetch API et XMLHttpRequest

Résumé

En TypeScript, vous pouvez écrire des requêtes asynchrones de manière concise et avec un code typé en utilisant l'Fetch API. D'un autre côté, XMLHttpRequest est une API plus ancienne mais peut encore être utilisée dans certaines situations. En général, il est recommandé d'utiliser l'API simple et moderne Fetch API, mais si la compatibilité navigateur ou le suivi du progrès sont nécessaires, XMLHttpRequest peut également être envisagé.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video