JavaScript

JSON, AJAX & promesses

Raconté par Vincent Jugé
sur la base d'un cours créé par Rémi Forax

JSON

Notation JSON

Sous-ensemble de la notation sur les objets et les tableaux JavaScript qui sert de format d'échange de données

const aquarium = {
  name: "my-aquarium",
  fishs: [{
	name: "guppi",
  }, {
	name: "sushi",
	price: 20
  }]
};
console.log(JSON.stringify(aquarium));

Seuls les types primitifs sont supportés : boolean, number, string, array & object.
Les noms des propriétés apparaissent entre " " !

JSON.parse

La commande JSON.parse permet de décoder en JavaScript une chaîne de caractères comme un objet JSON.

const array = JSON.parse('[1, 2, 4, true]');
console.log(array);
const object = JSON.parse('{ "name": "john", "age": 26 }');
console.log(object);
JSON.parse('{ name: "john", age: 26 }');  // oops

Asynchronous Javascript And XML

AJAX ou AJAP ?

AJAX permet de faire, en JavaScript, des requêtes à un serveur en enregistrant une fonction qui sera exécutée plus tard, lorsque les données du serveur seront disponibles.

Le fait de reporter le traitement au moment où les données seront présentes est appelé traitement asynchrone.

Dans la réalité, on utilise plutôt JSON que XML comme format de transport, mais on garde le nom AJAX (au lieu de AJAP).

XML ou JSON ?

JSON est non structuré et non validable facilement donc il est utilisé pour les transferts de petites données (en ko).

XML est plus lourd mais structuré et validable, il est utilisé pour le transfert de données plus importantes (en Mo).

XMLHttpRequest(1/4)

Un objet XMLHttpRequest permet de faire une requête AJAX.

const ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
  console.log('mon état de connexion a changé');
};
ajax.open("GET", "images/js-object/demo.json", true);
ajax.overrideMimeType("application/json");
ajax.send();

XMLHttpRequest (2/4)

open(method, url, async?) configure la requête.
send() envoie la requête.

const ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
  console.log(ajax.readyState + ':' + ajax.status + ':' + ajax.responseText);
};
console.log("Configuring the request...");
ajax.open("GET", "images/js-object/demo.json", true);
console.log("Overriding Mime type...");
ajax.overrideMimeType("application/json");
console.log("Sending AJAX request...");
ajax.send();
console.log("AJAX request sent.");

XMLHttpRequest (3/4)

onreadystatechange est appelée lorsque cet état change.
readyState indique l'état de la requête.

const ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
  const state = ajax.readyState;
  const states = ["new", "opened", "headers_received", "loading", "done"];
  console.log(state + ':' + states[state]);
};
console.log("Configuring the request...");
ajax.open("GET", "images/js-object/demo.json", true);
console.log("Overriding Mime type...");
ajax.overrideMimeType("application/json");
console.log("Sending AJAX request...");
ajax.send();
console.log("AJAX request sent.");

XMLHttpRequest (4/4)

Si le readyState est 4 et que le status est 200,
on peut lire le responseText.

const ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
  if (ajax.readyState == 4) {
    if (ajax.status == 200) {
      console.log(ajax.responseText);
    } else {
      console.log("error " + ajax.status);
    } 
  }
};
ajax.open("GET", "images/js-object/demo.json", true);
ajax.overrideMimeType("application/json");
ajax.send();

Promesse

Une Promise est la promesse d'une valeur (ou erreur) à venir.

const promise = new Promise((resolve, reject) => {
  const value = Math.random();   // juste pour l'exemple
  if (value < 0.5) {
    resolve("It works");
  } else {
    reject(Error("oh no"));
  }
});
promise.then(value => console.log(value))
       .catch(err => console.log(err.message));

Promesse & AJAX à la main

const ajaxPromise = function(doc) {
  return new Promise((resolve, reject) => {
    const ajax = new XMLHttpRequest();
    ajax.onreadystatechange = () => {
      if (ajax.readyState == 4) { 
      	if(ajax.status == 200) {
          resolve(ajax.responseText);
        } else {
          reject(Error("error " + ajax.status));
        }
      }
    };
    ajax.open("GET", doc, true);
    ajax.overrideMimeType("application/json");
    ajax.send();
  });
}
ajaxPromise("images/js-object/demo.json")
  .then(value => console.log(value))
  .catch(err => console.log(err.message));

Fetch

fetch()


fetch("http://api.foo.bar.com/users/bob")
.then(response => {
   if (response.ok) {
     return ...
   }
   throw Error(response.statusText);
 });

Attention, fetch renvoie une réponse même si la réponse est Not Found.

Fetch en vrai

fetch() fait une requête AJAX et renvoie une Promise.
response.json() est aussi une Promise qui va parser le JSON.

fetch("images/js-object/demo.json")
  .then(response => {
     if (response.ok) {
       return response.json();
     }
     throw Error(response.statusText);
   })
  .then(object => console.log(object))
  .catch(err => console.log(err.message));

then() permet de combiner les promesses !

Fetch d'une image

URL.createObjectURL permet de créer une URL locale contenant les données de l'image.

const image = document.getElementById('fetch-image-example');
fetch("images/js-canvas/html5.png")
  .then(response => {
     if (response.ok) {
       return response.blob();
     }
     throw Error(response.statusText);
   })
  .then(blob => {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  })
  .catch(err => console.log(err.message));

blob = binary large object

Promise.all

Calcul de plusieurs promesses en parallèle :
le résultat est un tableau des promesses résolues.

Promise.all([
  fetch('images/js-object/demo.json'),
  fetch('images/js-object/demo2.json')])
.then(([res1, res2]) => {
  if (res1.ok && res2.ok) {
    console.log('Ok !');
  } else {
    throw Error(`${res1.statusText} ${res2.statusText}`);
  }
})
.catch(err => console.log(err.message));

Promise.all

Attention ! Si on enchaîne des appels à Promise.all(),
on peut créer des goulots d'étranglement.

Promise.all([
  fetch('images/js-object/demo.json'),
  fetch('images/js-object/demo2.json')])
.then(([res1, res2]) => {
  if (res1.ok && res2.ok) {
    return Promise.all([res1.json(), res2.json()]);
  } else {
    throw Error(`${res1.statusText} ${res2.statusText}`);
  }
})
.then(jsons => jsons.forEach(json => console.log(json.name)))
.catch(err => console.log(err.message));

Promise.all

Il est plus efficace de paralléliser au maximum !

const jsonOkOrError = function(response) {
  if (response.ok) {
    return response.json();
  } else {
    throw Error(response.statusText);
  }
}
Promise.all([
  fetch('images/js-object/demo.json')
    .then(jsonOkOrError),
  fetch('images/js-object/demo2.json')
    .then(jsonOkOrError)])
.then(jsons => jsons.forEach(json => console.log(json.name)))
.catch(err => console.log(err.message));

Promise.race

La promesse résultante est calculée dès qu'une des promesses a fini.

const jsonOkOrError = function(response) {
  if (response.ok) {
    return response.json();
  } else {
    throw Error(response.statusText);
  }
}
Promise.race([
  fetch('images/js-object/demo.json'),
  fetch('images/js-object/demo2.json')
  ])
.then(jsonOkOrError)
.then(json => console.log(json.name))
.catch(err => console.log(err.message));