API et Axios dans le

Développement Web
Presenté Par : Khalouki
Ali
 Plan
1. Introduction
2. Qu'est-ce qu'une API ?
3. Pourquoi les API sont-elles importantes ?
4. Méthodes de Consommation d'API
5. Méthode Fetch()
6. Axios
7. Pourquoi utiliser Axios ?
8. Exemple Pratique avec Axios
9. Conclusion
 INTRODUCTION

Qu'est-ce qu'une API ?

•API signifie Interface de Programmation d'Application

•C'est un ensemble de règles qui permet à un logiciel de communiquer avec un
autre.
Pourquoi les API sont-elles importantes ?

● Facilite l'intégration de différentes applications.

● Permettent l'accès aux fonctionnalités d'une
application sans à son code source.
 Méthodes de Consommation d’API
Méthode Fetch()
Méthode native du navigateur pour effectuer des
requêtes réseau.
Requêtes HTTP simples.
Exemple de code :

fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => console.log(data));
 Axios

•Bibliothèque JavaScript populaire pour effectuer des requêtes HTTP.

•Facilite la gestion des requêtes et des réponses.
Exemple de code :
import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => console.log(response.data));
 Pourquoi utiliser
Axios ?
• Facilité d'utilisation : Syntaxe simplifiée, gestion automatique des erreurs.
• Interception des Requêtes et Réponses : Possibilité d'intercepter et de
modifier les requêtes et les réponses.
• Prise en Charge des Promesses : Axios est basé sur les promesses, ce qui
simplifie la gestion des opérations asynchrones.
• Compatibilité Navigateur et Node.js : Fonctionne aussi bien côté client que
côté serveur.
 Exemple Pratique
avec Axios
Installation d'Axios :
• npm install axios
• Utilisation dans un Composant React :
 Utilisation dans un Composant React :
import React, { useEffect, useState } from 'react';
import axios from 'axios';

export default function App() {

const [users, setUsers] = useState([]);

useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => setUsers(response.data))
.catch(error => console.error(error));
}, []);

return (
<div>
<h3>Liste d'utilisateurs</h3>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
 Conclusion

● Les API facilitent l'intégration entre

différentes applications.
● Axios simplifie la gestion des requêtes
HTTP dans le développement web.
● Utilisation courante dans le développement
avec React.
 Merci!
CREDITS: This presentation template was created by
Slidesgo, including icons by Flaticon, infographics & images
by Freepik