• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 8/28/24

Interagir avec un site web en utilisant une API HTTP

Evaluated skills

  • 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

Ever considered an OpenClassrooms diploma?
  • Up to 100% of your training program funded
  • Flexible start date
  • Career-focused projects
  • Individual mentoring
Find the training program and funding option that suits you best