• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 09/02/2024

Interagir avec un site web en utilisant une API HTTP

Compétences évaluées

  • Interagir avec un site web en utilisant une API HTTP

Description

Vous travaillez pour une entreprise de livraison qui souhaite mettre en place un tableau de bord pour mieux suivre ses colis. Vous devrez afficher les colis dans trois colonnes : Reçus, En livraison et Livrés.

Pour vous aider dans la réalisation de ce tableau de bord, l’entreprise vous met à disposition une API HTTP déjà fonctionnelle à l’adresse api.top-livraisons.fr, avec les ressources suivantes :

  • GET /colis
  • GET /livreurs/:id
  • POST /colis/livraison
  • Question 1

    Vous souhaitez récupérer les données des colis à afficher à l’écran. Quel extrait de code allez-vous utiliser ?

    • const colis = fetch("http://api.top-livraisons.fr/colis").then(colis => colis.json());

    • const colis = await fetch("/colis").then(colis => colis.body);

    • const colis = await fetch("http://api.top-livraisons.fr/colis").then(colis => colis.json());

    • const colis = fetch("/colis").then(colis => colis.json());

  • Question 2

    Les informations à propos des colis sont affichées à l’écran. Vous souhaitez maintenant afficher le nom du livreur associé à chaque colis. Pour y parvenir, vous devez réaliser un appel à la fonction fetch. Parmi les extraits de code ci-dessous, lequel est correct ?

    On considère que la variable colis contient un objet avec au moins deux propriétés, id et livreurId.

    • const livreur = await fetch("api.top-livreurs.fr/livreurs/" + colis.livreurId).then(livreur => livreur.body);

    • const livreur = fetch("http://api.top-livreurs.fr/livreurs).then(livreur => livreur.body);

    • const livreur = await fetch("http://api.top-livreurs.fr/colis/" + colis.id + "/livreur").then(livreur => livreur.json());

    • const livreur = await fetch("http://api.top-livreurs.fr/livreurs/" + colis.livreurId).then(livreur => livreur.json());

  • Question 3

    Vous rajoutez un formulaire dans votre page web pour enregistrer la livraison d’un colis. La balise form contient l’attribut action=”/colis/livraison”. Cependant, lorsque vous cliquez sur le bouton “Valider” du formulaire, la page se recharge et ne prend pas en compte la validation du formulaire. Comment pouvez-vous régler ce problème ?

    • Vous ajoutez un appel à la fonction event.stopPropagation dans la fonction anonyme de l’event “submit”

    • Vous ajoutez un appel à la fonction event.preventDefault dans la fonction anonyme de l’event “submit”

    • Vous supprimez l’attribut action pour empêcher le rechargement de la page web

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous