JavaScript

AJAX et Promesses

Raconté par Arnaud de Mesmay sur la base d'un cours créé par Rémi Forax et Vincent Jugé.

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));