Fetch

Fetch - Method Get (recevoir)

Voici un exemple simple : après avoir vérifié la requète, on récupère la propriété greetings de l'objet queryString, pour l'afficher dans une div #hello-result lorsque l'on clique sur un bouton #ask-hello

const helloResult = document.getElementById("hello-result");
const askHelloButton = document.getElementById("ask-hello");

function askHello(){
  fetch("https://mockbin.com/request?greetings=salut")
  .then(function(res) {
    if (res.ok) {
      return res.json();
    }
  })
  .then(function(value) {
    // c'est ici que l'on récupère la valeur de la propriété "greetings" de l'objet "queryString"
    // console.log(value.queryString.greetings);
    helloResult.innerHTML = value.queryString.greetings;
  })
  .catch(function(err) {
    // Une erreur est survenue
  });
}

askHelloButton.addEventListener('click', event => {
  askHello();
});

Fetch - Method Post (envoyer)

Dans cet exemple, on cherche à envoyer la donnée d'un input vers une API, et à afficher le contenu de la donnée au submit, sans recharger la page (preventDefault();).

function send(e){
  e.preventDefault();
  fetch("https://mockbin.com/request", {
	method: "POST",
	headers: { 
          'Accept': 'application/json', 
          'Content-Type': 'application/json' 
        },
	body: JSON.stringify({value: document.getElementById("value").value})
        })
        .then(function(res) {
          if (res.ok) {
            return res.json();
          }
        })
        .then(function(value) {
            document.getElementById("result").innerText = value.postData.text;
        });
}

document.getElementById("form").addEventListener("submit", send);