Article original : Call vs Put vs Post – HTTP Request Methods Explained

Le protocole HTTP (Hypertext Transfer Protocol) est le fondement de la communication entre les clients (comme les navigateurs web) et les serveurs (comme les serveurs web) sur le World Wide Web.

Un aspect crucial de HTTP est la mthode de requte, qui indique le type d'opration que le client souhaite effectuer sur une ressource.

Cet article explorera trois mthodes courantes de requte HTTP  Call, Put et Post  et leurs applications dans le dveloppement web JavaScript.

Comment fonctionne HTTP

HTTP (Hypertext Transfer Protocol) est le fondement de la communication sur le World Wide Web. C'est un protocole qui rgit la manire dont les donnes sont transmises et reues entre les clients (navigateurs web) et les serveurs (serveurs web) via Internet.

Lorsque vous entrez une URL (Uniform Resource Locator) dans votre navigateur web et que vous appuyez sur Entre, votre navigateur envoie une requte HTTP au serveur hbergeant le site web associ cette URL. Le serveur traite ensuite la requte et envoie une rponse HTTP contenant les donnes demandes, telles qu'une page web, une image ou d'autres ressources.

HTTP utilise un modle client-serveur, o le client (gnralement un navigateur web) envoie des requtes au serveur, et le serveur rpond avec les donnes demandes. Un aspect important de HTTP est le concept de mthodes de requte, galement appeles verbes HTTP ou mthodes.

Les mthodes de requte sont utilises pour indiquer le type d'opration que le client souhaite effectuer sur une ressource du serveur. HTTP dfinit plusieurs mthodes de requte, y compris Call, Put, Post, Delete, et plus encore, chacune avec son objectif et son comportement spcifiques.

Ces mthodes de requte sont utilises pour communiquer l'intention du client au serveur et dterminer comment le serveur doit traiter la requte. Concentrons-nous sur trois mthodes de requte courantes : Call, Put et Post.

Comment utiliser la mthode Call

Dans le contexte d'une requte HTTP, la mthode Call est appele la mthode GET. Elle est utilise pour rcuprer des donnes d'une ressource sur le serveur. Lorsque vous effectuez une requte Call, vous demandez au serveur de vous fournir les donnes d'une ressource particulire.

La mthode Call est considre comme "sre" et "idempotente". Cela signifie qu'elle ne devrait pas avoir d'effets secondaires sur le serveur et peut tre rpte plusieurs fois sans changer le rsultat. En d'autres termes, effectuer la mme requte Call plusieurs fois ne devrait pas entraner de modifications sur le serveur.

Dans le dveloppement web JavaScript, vous utilisez souvent la mthode Call pour rcuprer des donnes partir d'API ou pour obtenir des ressources du serveur.

Par exemple, vous pouvez utiliser l'API Fetch en JavaScript pour effectuer une requte Call une API et rcuprer des donnes au format JSON :

fetch("https://jsonplaceholder.typicode.com/posts?_limit=5")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Dans cet exemple, la requte Call est effectue l'URL https://jsonplaceholder.typicode.com/posts pour rcuprer des donnes du serveur (?_limit=5 est ajout pour rduire les donnes rcupres de 100 5). La rponse du serveur est ensuite analyse en JSON, et les donnes rcupres sont enregistres dans la console. Vous pouvez maintenant utiliser les donnes dans votre application.

Comment utiliser la mthode Put

La mthode Put est utilise pour mettre jour des donnes sur le serveur ou crer une nouvelle ressource si elle n'existe pas dj.

Lorsque vous effectuez une requte Put, vous demandez au serveur de mettre jour les donnes d'une ressource particulire ou de crer une nouvelle ressource avec les donnes fournies.

La mthode Put est considre comme "idempotente" mais pas "sre". Cela signifie que l'excution de la mme requte Put plusieurs fois ne donnera pas des rsultats diffrents, mais peut avoir des effets secondaires sur le serveur.

En JavaScript, vous pouvez utiliser la mthode Put pour envoyer des donnes au serveur afin de mettre jour des ressources. Par exemple, vous pouvez utiliser l'API Fetch pour effectuer une requte Put avec des donnes mises jour afin de mettre jour les informations de profil d'un utilisateur sur le serveur :

const dataToUpdate = {
  id: 1,
  title: "Hello freeCodeCamp",
  body: "Welcome to freeCodeCamp",
  userId: 1
};

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  headers: {
    "Content-type": "application/json; charset=UTF-8"
  },
  body: JSON.stringify(dataToUpdate)
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Dans cet exemple, la requte Put est effectue l'URL https://jsonplaceholder.typicode.com/posts/1 avec les donnes mises jour dans le corps de la requte. Le serveur mettra alors jour les donnes de la ressource avec l'ID 1 en fonction des donnes fournies dans le corps de la requte.

La rponse du serveur, contenant les donnes mises jour, est ensuite analyse en JSON et enregistre dans la console.

{
  "id": 1,
  "title": "Hello freeCodeCamp",
  "body": "Welcome to freeCodeCamp",
  "userId": 1
}

Note : La mthode PUT est utilise pour mettre jour des donnes. Le post avec l'ID 1 a t mis jour.

Comment utiliser la mthode Post

La mthode POST est utilise pour soumettre des donnes au serveur afin de crer une nouvelle ressource.

Lorsque vous effectuez une requte Post, vous demandez au serveur de crer une nouvelle ressource avec les donnes fournies dans le corps de la requte. La mthode Post n'est pas considre comme "idempotente" ou "sre", car l'excution de la mme requte Post plusieurs fois peut crer plusieurs ressources avec des rsultats diffrents.

En JavaScript, vous pouvez utiliser la mthode Post pour envoyer des donnes au serveur afin de crer de nouvelles ressources. Par exemple, vous pouvez utiliser l'API Fetch pour effectuer une requte Post avec de nouvelles donnes afin de crer un nouveau compte utilisateur sur le serveur :

const newData = {
  title: "Hello freeCodeCamp",
  body: "Welcome to freeCodeCamp",
  userId: 1
};

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-type": "application/json; charset=UTF-8"
  },
  body: JSON.stringify(newData)
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Dans cet exemple, la requte Post est effectue l'URL https://jsonplaceholder.typicode.com/posts avec les nouvelles donnes dans le corps de la requte. Le serveur crera alors une nouvelle ressource avec les donnes fournies, et la rponse du serveur, contenant les donnes de la nouvelle ressource cre, est analyse en JSON et enregistre dans la console.

{
  "title": "Hello freeCodeCamp",
  "body": "Welcome to freeCodeCamp",
  "userId": 1,
  "id": 101
}

Note : Un nouvel id de 101 est cr car il s'agit de nouvelles donnes qui n'existaient pas auparavant, donc un ID unique lui est attribu.

Bonnes pratiques et considrations

  1. Utilisez des mthodes de requte appropries : Il est important de choisir la mthode approprie en fonction de l'opration prvue sur la ressource ct serveur. Utilisez Call pour des actions ou fonctions personnalises, Put pour mettre jour des ressources existantes, et Post pour en crer de nouvelles.

  2. Suivez les principes RESTful : Si vous construisez une API RESTful, il est important de suivre les principes de Representational State Transfer (REST), qui incluent l'utilisation de mthodes de requte HTTP standard pour les oprations CRUD. Utilisez Get pour rcuprer des donnes de ressource, Put pour mettre jour, Post pour crer de nouvelles ressources, et Delete pour supprimer des ressources.

  3. Considrez l'idempotence et la scurit : Les requtes Put sont idempotentes, ce qui signifie que l'excution de la mme requte plusieurs fois aura le mme rsultat que de l'excuter une fois. Les requtes Post ne sont pas idempotentes, et l'excution de la mme requte plusieurs fois peut crer plusieurs ressources avec des rsultats diffrents. Considrez les exigences d'idempotence et de scurit de votre opration lors du choix de la mthode de requte approprie.

Conclusion

HTTP est un protocole crucial qui rgit la manire dont les donnes sont transmises et reues entre les clients et les serveurs sur le World Wide Web. Les mthodes de requte dans HTTP, telles que Call, Put et Post, indiquent le type d'opration que le client souhaite effectuer sur une ressource du serveur.

Comprendre comment ces mthodes de requte fonctionnent est essentiel dans le dveloppement web, car elles dterminent comment le serveur traitera les requtes et quelles actions seront effectues sur les ressources.

En utilisant les mthodes de requte appropries dans vos applications web, vous pouvez communiquer efficacement avec les serveurs et grer les ressources de manire fiable et efficace.

Amusez-vous bien coder !

Embarquez pour un voyage d'apprentissage ! Parcourez plus de 200 articles d'experts sur le dveloppement web. Recherchez 'request' pour une plonge approfondie dans POST, GET et la ralisation de requtes HTTP avec React et JavaScript. Consultez mon blog pour plus de contenu captivant de ma part.