Bloguons JavaScript

Parce que je me dis tout le temps : « Faut que j'écrive ça quelque part. »
Home

Aller au menu | Aller à la recherche

Remplacer $.get(), $.post(), $.ajax() et $.getJSON() par fetch()

, 20:27 - Lien permanent

Dieu merci, on a créé une méthode pour remplacer l'inutilement compliqué XMLHttpRequest. Par contre, fetch() retourne un type d'objet qui n'est pas toujours bien compris par les développeurs. Et je m'y inclus...

Mais bon, ça permet toujours bien de créer des appels XHR sans trop de code superflu.

Pour un appel avec la méthode GET, remplacer :

$.get(url,function(data){/*CODE*/});

par :

fetch(url).then(p => p.text()).then(data => {/*CODE*/});

Pour un appel avec la méthode GET qui est sensé retourner un objet JSON, remplacer :

$.getJSON(url, function (data) {/*CODE*/});

par :

fetch(url).then(p => p.json()).then(data => {/*CODE*/});

Pour un appel avec la méthode POST, remplacer :

$.post(url,{a:1,b:2},function(data){/*CODE*/};

par :

fetch(url,{method:'POST',body:"a=1&b=2"}).then(p=>p.text()).then(data => {/*CODE*/});

Et pour un POST retournant un JSON, réutiliser la méthode ci-dessus en changeant p.text() par p.json().

Évidemment, j'y vais sommairement, parce que l'utilisation successive des méthodes .then() n'y est pas pour faire joli; cela permet surtout de trapper les exceptions, en ajoutant par exemple un .catch() à la toute fin, au cas où l'appel retournerait une erreur 404, un objet JSON cassé, ou je ne sais quoi d'autre.