JavaScript Rest Api
- Il est important de savoir comment faire des requêtes
httpet récupérer des données à partir d’un serveur. - JavaScript Fournit des objets de build pour interagir avec l’API.
Utilisant XMLHttpRequest()
L’objet XMLHttpRequest peut être utilisé pour demander des données à un serveur Web.
const request = new XMLHttpRequest(); request.open("GET", "https://jsonplaceholder.typicode.com/posts"); request.send(); request.onLoad = () => { console.log(request); if(request.status === 200) { console.log(JSON.parse(request.response)); } else { console.log(JSON.parse(request.response)); console.log(error ${request.status}); } };
Utilisant Fetch API()
Avec la méthode fetch(). Il faut deux arguments :
- Une URL ou un objet représentant la demande.
- Objet init facultatif contenant la méthode, headers,body etc.
fetch(url) .then(response => { // handle the response }) .catch(error => { // handle the error });
API Call JavaScript
async function getUsers() { let response = await fetch('https://jsonplaceholder.typicode.com/posts'); let data = await response.josn(); console.log(data); } getUsers().then(res => { console.log(res) })
Utilisant Axios
Axios est un client HTTP basé sur la promesse pour le nœud.js et le navigateur.
- Faire des requêtes XMLHttpRequests à partir du navigateur
- Faites des requêtes http à partir du nœud.js
- Prend en charge l’API Promise
axios().get('https://jsonplaceholder.typicode.com/posts') .then(res => { console.log(res) }, err =>{ console.log(err) })
Utilisant jQuery
$(document).ready(function(){ $.ajax({ url:"https://jsonplaceholder.typicode.com/posts", success: function(response){ console.log(response) }, error: function(error){ console.log(error) }, }); })