Le Tutoriel de Javascript Fetch API

Vue d'ensemble de l'API Fetch
Get Text - response.text()
Get JSON - response.json()
Get Blob - response.blob()
Get ArrayBuffer - response.arrayBuffer()
Get FormData - response.formData()

1. Vue d'ensemble de l'API Fetch

Régulièrement, en programmation Javascript, vous devez récupérer les données d'une URL. Si vous pensez à XMLHttpRequest API, ce sera certainement une API qui vous aidera à faire ce que vous voulez, mais ce ne sera pas convivial et efficace parce que vous devez écrire des codes longs pour atteindre vos objectifs. Au lieu de cela, l'utilisation de jQuery semble être une bonne idée en raison de la syntaxe courte et compréhensible jQuery.ajax(...), mais il ya une chose que vous devez ajouter la bibliothèque jQuery à votre application.

ES6 a été lancé en juin 2015 avec de nombreuses nouveautés, dont Promise. De plus, Fetch API est un nouveau standard pour faire une requête (request) au serveur et recevoir une donnée, dont le but est similaire à XMLHttpRequest. Cependant, il y a une différence : Fetch API est écrite sur la base du concept Promise.

Ce sera plus facile si vous comprenez le concept de Promise avant de continuer cette leçon. En outre, je vous recommande vivement de lire l'article ci-dessous, car je m'assure qu'il est parfaitement compréhensible pour tout le monde.
Le Tutoriel de JavaScript Promise, Async Await

Fetch API construit une fonction fetch(url, options) pour récupérer les données d'une URL, qui renvoie une Promise. Ça ressemble à ça :

function fetch(url, options)  {

    // A Promise
    var aPromise = new Promise (
        function (resolve, reject) {

            if (allthingOK) {
               // ...
               var respone = ...;

               resolve(response);
            } else {
                var error = new Error('Error Cause');
                reject(error);
            }

        }
    );

    return aPromise;
}

De plus, Fetch API est assez simple à utiliser. Ce que vous faites vraiment, c'est simplement appeler la fonction fetch(url, options) et obtenir une promesse de résoudre (resolve) l'objet response.

var url = "http://example.com/file";
var options = { method : 'GET', .... };

var aPromise = fetch(url, options);

aPromise
    .then(function(response) {
        
    })
    .catch(function(error) {
        
    });

var aPromise = fetch(url, {
    method: "GET", // POST, PUT, DELETE, etc.
    headers: {
        "Content-Type": "text/plain;charset=UTF-8" // for a string body, depends on body
    },
    body: undefined // string, FormData, Blob, BufferSource, or URLSearchParams
    referrer: "about:client", // "" for no-referrer, or an url from the current origin
    referrerPolicy: "no-referrer-when-downgrade", // no-referrer, origin, same-origin...
    mode: "cors", // same-origin, no-cors
    credentials: "same-origin", // omit, include
    cache: "default", // no-store, reload, no-cache, force-cache, or only-if-cached
    redirect: "follow", // manual, error
    integrity: "", // a hash, like "sha256-abcdef1234567890"
    keepalive: false, // true
    signal: undefined, // AbortController to abort request
    window: window // null
});

2. Get Text - response.text()

L'utilisation de Fetch API pour envoyer une requête et recevoir du texte est la tâche la plus simple et la plus compréhensible.

https://ex1.o7planning.com/_testdatas_/simple-text-data.txt

This is a simple text data.

La fonction fetch(..) renvoie une promesse de résolution (resolve) de l'objet response. Par conséquent, pour envoyer une demande (request) de récupération d'un élément de données textuelles, vous devez d'abord effectuer la première étape comme suivant :

get-text-example.js (Step 1)

// A URL returns TEXT data.
var url = "https://ex1.o7planning.com/_testdatas_/simple-text-data.txt";


function doGetTEXT()  {

  // Call fetch(url) with default options.
  // It returns a Promise object (Resolve response object)
  var aPromise = fetch(url);

  // Work with Promise object:
  aPromise
    .then(function(response) {
        console.log("OK! Server returns a response object:");
        console.log(response);
    })
    .catch(function(error)  {
        console.log("Noooooo! Something error:");
        // Network Error!
        console.log(error);
    });

}

La méthode response.text() renvoie une promesse de résolution (resolve) de l'objet text, vous pouvez donc écrire les codes suivants pour cet exemple comme suit :

get-text-example-way1.js

// A URL returns TEXT data.
var url = "https://ex1.o7planning.com/_testdatas_/simple-text-data.txt";

function doGetTEXT()  {
  // Call fetch(url) with default options.
  // It returns a Promise object (Resolve response object)
  var aPromise = fetch(url);
  // Work with Promise object:
  aPromise
    .then(function(response) {
        console.log("OK! Server returns a response object:");
        console.log(response);
        if(!response.ok)  {
            throw new Error("HTTP error, status = " + response.status);
        }
        response.text()
          .then(function(myText) {
               console.log("Text:");
               console.log(myText);
          })
          .catch(function(error) {
             // Never happened.
          });
    })
    .catch(function(error)  {
        console.log("Noooooo! Something error:");
        // Network Error!
        console.log(error);
    });
}

Fetch API est conçue pour exécuter des tâches dans une chaîne (Chain), ce qui peut être dû au fait que la méthode promise.then(...), promise.catch(...) est conçue pour renvoyer également une promesse.

Quelle que soit la fonction function(response) que vous écrivez, la méthode then() renvoie toujours une valeur normale ou un objet Promise.

get-text-example-way2.js

// A URL returns TEXT data.
var url = "https://ex1.o7planning.com/_testdatas_/simple-text-data.txt";

function doGetTEXT()  {
  // Call fetch(url) with default options.
  // It returns a Promise object (Resolve response object)
  var aPromise = fetch(url);

  // Work with Promise object:
  aPromise
    .then(function(response) {
        console.log("OK! Server returns a response object:");
        console.log(response);
        if(!response.ok)  {
            throw new Error("HTTP error, status = " + response.status);
        }
        return response.text();
    })
    .then(function(myText)  {
         console.log("Text:");
         console.log(myText);
    })
    .catch(function(error)  {
        console.log("Noooooo! Something error:");
        // Network Error!
        console.log(error);
    });
}

get-text-example.html

<!DOCTYPE html>
<html>
<head>
    <title>fetch get text</title>
    <meta charset="UTF-8">
    <script src="get-text-example-way2.js"></script>
</head>
<body>
    <h3>fetch get text</h3>
    <p style="color:red">
         Click the button and see the results in the Console.
    </p>
    <button onclick="doGetJSON()">doGetJSON</button>
</body>
</html>

https://ex1.o7planning.com/javascript/fetch/get-text-example.html

3. Get JSON - response.json()

L'utilisation de Fetch API pour envoyer une requête et recevoir un JSON est un peu plus compliquée que celle du texte car vous devez gérer les erreurs lorsque le JSON a un format invalide ou des données NULL.

https://ex1.o7planning.com/_testdatas_/json-simple-data.json

json-simple-data.json

{
  "fullName" : "Tom Cat",
  "gender" : "Male",
  "address" : "Walt Disney"
}

La fonction fetch(..) renvoie une promesse de résolution d'un objet response.

Etape 1 : Ecrire un code simple comme ceci :

get-json-example.js (Step 1)

// A URL returns JSON data.
var url = "https://ex1.o7planning.com/_testdatas_/json-simple-data.json";

function doGetJSON()  {
  // Call fetch(url) with default options.
  // It returns a Promise object:
  var aPromise = fetch(url);

  // Work with Promise object:
  aPromise
    .then(function(response) {
        console.log("OK! Server returns a response object:");
        console.log(response);
    })
    .catch(function(error)  {
        console.log("Noooooo! Something error:");
        console.log(error);
    });
}

Way 1:

La méthode response.json() retourne une promesse de résolution (resolve) d'un objet JSON, vous pouvez donc utiliser la méthode response.json().then(..).

get-json-example_way1.js

// A URL returns JSON data.
var url = "https://ex1.o7planning.com/_testdatas_/json-simple-data.json";

function doGetJSON()  {
  // Call fetch(url) with default options.
  // It returns a Promise object:
  var aPromise = fetch(url);

  // Work with Promise object:
  aPromise
    .then(function(response) {
        console.log("OK! Server returns a response object:");
        console.log(response);
        if(!response.ok) {
           throw new Error("HTTP error, status = " + response.status);
        }
        // Get JSON Promise from response object:
        var myJSON_promise = response.json();

        // Work with Promise object:
        myJSON_promise.then(function(myJSON))  {
          console.log("OK! JSON:");
          console.log(myJSON);
        }
    })
    .catch(function(error)  {
        console.log("Noooooo! Something error:");
        console.log(error);
    });
}

Way 2:

get-json-example-way2.js

// A URL returns JSON data.
var url = "https://ex1.o7planning.com/_testdatas_/json-simple-data.json";

function doGetJSON()  {
  // Call fetch(url) with default options.
  // It returns a Promise object:
  var aPromise = fetch(url);
  // Work with Promise object:
  aPromise
    .then(function(response) {
        console.log("OK! Server returns a response object:");
        console.log(response);
        if(!response.ok) {
           throw new Error("HTTP error, status = " + response.status);
        }
        // Get JSON Promise from response object:
        var myJSON_promise = response.json();

        // Returns a Promise object.
        return myJSON_promise;
    })
    .then(function(myJSON) {
        console.log("OK! JSON:");
        console.log(myJSON);
    })
    .catch(function(error)  {
        console.log("Noooooo! Something error:");
        console.log(error);
    });
}

get-json-example.html

<!DOCTYPE html>
<html>
<head>
    <title>fetch get json</title>
    <meta charset="UTF-8">
    <script src="get-json-example-way2.js"></script>
</head>
<body>
    <h3>fetch get json</h3>
    <p style="color:red">
         Click the button and see the results in the Console.
    </p>
    <button onclick="doGetJSON()">doGetJSON</button>
</body>
</html>

https://ex1.o7planning.com/javascript/fetch/get-json-example.html

Null JSON Data?

Remarque : La méthode response.json() lancera une erreur si votre URL renvoie une donnée non JSON, une donnée JSON invalide ou vide.

Supposons que vous envoyez une demande pour obtenir les informations d'un employé par ID. Si le salarié existe, vous recevez un type de données JSON. Mais si l'employé n'existe pas, vous recevrez une donnée NULL. Cependant, une donnée NULL provoque une erreur à l'endroit qui appelle la response.json(). Prends-le comme exemple :

http://example.com/employee?id=123

// Get information of Employee 123:
fetch("http://example.com/employee?id=123")
  .then(function(response) {
      console.log("OK! Server returns a response object:");
      console.log(response);

      if(!response.ok) {
         throw new Error("HTTP error, status = " + response.status);
      }
      // Error if Employee 123 does not exist.
      // (*** URL returns null).
      var myJSON_promise = response.json(); // =====> Error
      return myJSON_promise;
  })
  .then(function(myJSON) {
      console.log("OK! JSON:");
      console.log(myJSON);
  })
  .catch(function(error)  {
      console.log("Noooooo! Something error:");
      console.log(error);
  });

(Error)

SyntaxError: Unexpected end of JSON input

Utilisez response.text() au lieu de response.json() :

get-json-null-example.js

// A URL returns null JSON data.
var url = "https://ex1.o7planning.com/_testdatas_/json-null-data.json";

function doGetJSON()  {
  // Call fetch(url) with default options.
  // It returns a Promise object:
  var aPromise = fetch(url);
  // Work with Promise object:
  aPromise
    .then(function(response) {
        console.log("OK! Server returns a response object:");
        console.log(response);
        if(!response.ok) {
           throw new Error("HTTP error, status = " + response.status);
        }
        // Get TEXT Promise object from response object:
        var myText_promise = response.text();
        return myText_promise;
    })
    .then(function(myText) {
        console.log("OK! TEXT:");
        console.log(myText);
        var myJSON = null; 
        if(myText != null && myText.trim().length > 0)  {
            myJSON = JSON.parse(myText);
        }
        console.log("OK! JSON:");
        console.log(myJSON);
    })
    .catch(function(error)  {
        console.log("Noooooo! Something error:");
        console.log(error);
    });
}

get-json-null-example.html

<!DOCTYPE html>
<html>
<head>
    <title>fetch get json</title>
    <meta charset="UTF-8">

    <script src="get-json-null-example.js"></script>
</head>
<body>

    <h3>fetch get null json</h3>
    <p style="color:red">
         Click the button and see the results in the Console.
    </p>

    <button onclick="doGetJSON()">doGetJSON</button>

</body>
</html>

https://ex1.o7planning.com/javascript/fetch/get-json-null-example.html

4. Get Blob - response.blob()

La méthode response.blob() renvoie une promesse de résolution (resolve) d'un objet Blob.

Dans l'exemple suivant, j'utilise Fetch API pour télécharger une image donnée par une URL et l'afficher sur la page.

https://ex1.o7planning.com/_testdatas_/triceratops.png

get-blob-example.js

// A URL returns Image data (Blob).
var url = "https://ex1.o7planning.com/_testdatas_/triceratops.png";

function doGetBlob()  {
  // Call fetch(url) with default options.
  // It returns a Promise object:
  var aPromise = fetch(url);

  // Work with Promise object:
  aPromise
    .then(function(response) {
        console.log("OK! Server returns a response object:");
        console.log(response);
        if(!response.ok) {
           throw new Error("HTTP error, status = " + response.status);
        }
        // Get Blob Promise from response object:
        var myBlob_promise = response.blob();
        return myBlob_promise;
    })
    .then(function(myBlob) {
        console.log("OK! Blob:");
        console.log(myBlob);
        var objectURL = URL.createObjectURL(myBlob);
        var myImage = document.getElementById("my-img");
        myImage.src = objectURL;
    })
    .catch(function(error)  {
        console.log("Noooooo! Something error:");
        console.log(error);
    });
}

get-blob-example.html

<!DOCTYPE html>
<html>
<head>
    <title>fetch get blob</title>
    <meta charset="UTF-8">
    <script src="get-blob-example.js"></script>
</head>
<body>
    <h3>fetch get Blob</h3>
    <p style="color:red">
         Click the button to load Image.
    </p>
    <button onclick="doGetBlob()">doGetBlob</button>
    <br/>
    <img id="my-img" src="" height = 150 />
</body>
</html>

5. Get ArrayBuffer - response.arrayBuffer()

La méthode response.arrayBuffer() retourne une promesse de résolution (resolve) d'un objet ArrayBuffer.

Les données téléchargées sous forme de mémoire tampon (buffer) vous aident à travailler immédiatement avec elles sans attendre que toutes les données soient téléchargées. Prenons l'exemple d'une grande Video, vous pouvez regarder la Video pendant que ses données sont encore téléchargées dans votre navigateur.

L'exemple ci-dessous utilise Fetch API pour lire un fichier musical :

https://ex1.o7planning.com/_testdatas_/yodel.mp3

get-arraybuffer-example.js

// A URL returns Audio data.
var url = "https://ex1.o7planning.com/_testdatas_/yodel.mp3";

// AudioContext
const audioContext = new AudioContext();
var bufferSource;
// Get ArrayBuffer (Audio data) and play it.
function doGetArrayBuffer()  {
  bufferSource = audioContext.createBufferSource(); 
  bufferSource.onended =  function () {
      document.getElementById("play").disabled=false;
  };
  // Call fetch(url) with default options.
  // It returns a Promise object:
  var aPromise = fetch(url);

  // Work with Promise object:
  var retPromise =
   aPromise
    .then(function(response) {
        if(!response.ok)  {
           throw new Error("HTTP error, status = " + response.status);
        }
        // Get ArrayBuffer Promise object from response object:
        var myArrayBuffer_promise = response.arrayBuffer();
        return myArrayBuffer_promise;
    })
    .then(function(myArrayBuffer) {

        audioContext.decodeAudioData(myArrayBuffer, function(decodedData) {
          bufferSource.buffer = decodedData;
          bufferSource.connect(audioContext.destination);
        });
    });
    return retPromise;
}
function playIt()  {
    console.clear();
    doGetArrayBuffer()
       .then(function() {
            document.getElementById("play").disabled=true;
            bufferSource.start(0);
       })
       .catch(function(error){
            alert("Something Error: " + error.message);
       });
}
function stopIt()  {
    bufferSource.stop(0);
    document.getElementById("play").disabled=false;
}

get-arraybuffer-example.html

<!DOCTYPE html>
<html>
<head>
    <title>fetch get ArrayBuffer</title>
    <meta charset="UTF-8">
    <script src="get-arraybuffer-example.js"></script>
</head>
<body>
    <h3>fetch get ArrayBuffer</h3>
    <p style="color:red">
         Click the button to play Audio.
    </p>
    <button onclick="playIt()" id="play">Play Audio</button>
    <button onclick="stopIt()" id="play">Stop Audio</button>
</body>
</html>

Web Audio API vous aide à travailler avec Audio dans l'environnement web, il s'agit d'un grand API et est lié à Fetch API, Si vous êtes intéressé par ce sujet, vous devriez lire l'article suivant :
Javascript Web Audio API

6. Get FormData - response.formData()

La méthode response.formData() renvoie une promesse de résoudre (resolve) un objet FormData. Cette méthode est habituellement utilisée chez Service Workers. Lorsque les utilisateurs envoient des données de Form au serveur, ces données passent parService Workers avant d'aller sur le serveur. Chez Service Workers, vous pouvez appeler la méthode response.formData() ainsi que modifier les valeurs dans FormData si vous le souhaitez.

Javascript Service Worker