Comment faire un appel d’API à partir de JavaScript?

Dernière mise à jour le jeudi 26 mai 2022

JavaScript Rest Api

  • Il est important de savoir comment faire des requêtes http et 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)
     },
   });
})
	

References

appeler une api en javascript
javascript get rest api call
api request javascript
call api javascript
javascript api request
request api in javascript
js call api
javascript rest api request
javascript call rest api
javascript call http api