BRE03

JavaScript : Promise, asynchrone et fetch

JavaScript : Introduction à l’asynchrone

En programmation on dit asynchrone l’exécution différée d’une instruction qui serait normalement bloquante.

JavaScript est mono-thread (pas de parallèlisme) et théoriquement synchrone. Théoriquement parce que certaines fonctions très utilisées ne le sont pas et que parfois les accès concurrents à la console et les caprices du navigateur utilisés peuvent perturber la synchronicité.

Ces problèmes se sont plutôt améliorés depuis 2015 - 2016 mais on a encore parfois quelques surprises.

La gestion de l’asynchrone par JS

JS place les instructions asynchrones sont placées dans une file d’éxécution à part (Task Queue) et les éxécute les unes après les autres et les envoie au fur et à mesure dans le fil d’éxécution principale sans bloquer le reste du programme.

Exemple synchrone vs asynchrone

// synchrone
function helloWorld() 
{
    console.log("Hello World !");
}
helloWorld();  // Hello World !

// asynchrone
function helloWorld()
{
    setTimeout(() => console.log('Hello world !'), 1000);
    console.log("You should see me before seing Hello World !");
}

helloWorld(); // You should see me before seing Hello World !  Hello world !

JavaScript : Les Promise

Une promise est une sorte d’objet à qui l’on transmet deux fonctions qui sont appelées lors de son exécution :

resolve : si tout s’est bien passé
reject : si une erreur s’est produite

et qui retourne deux fonctions :

then si tout s’est bien passé
catch si une erreur s’est produite

Exemple

function testNumber(number)
{
    return new Promise((resolve, reject) => {
       if(number <= 100)
       {
           resolve("OK");
       }
       else
       {
           reject("Number too big");
       }
    });
}

Si ensuite je veux appeler ma fonction :

testNumber(9)
    .then(response => console.log(response))
    .catch(error => console.log(error));

testNumber(999)
    .then(response => console.log(response))
    .catch(error => console.log(error));

JavaScript : Exercice sur les Promise

L’exercice sur les Promise

JavaScript : async et await

async et await sont des mots clés qui ont permis de simplifier l’écriture du code synchrone en JavaScript.

Lorsque l’on place le mot async devant la définition d’une fonction, on indique que cette fonction va être asynchrone.

await est un mot clé qui dit “attends la fin de cette opération asynchrone” et permet d’attendre pour récupérer le retour d’une opération asynchrone.

function testNumber(number)
{
    return new Promise((resolve, reject) => {
        if(number <= 100)
        {
            resolve("OK");
        }
        else
        {
            reject("Number too big");
        }
    });
}

async function testNumbers()
{
    let responseForNine = await testNumber(9);
    console.log(responseForNine);

    let responseForTwelve = await testNumber(12);
    console.log(responseForTwelve);
}

testNumbers();

JavaScript : Exercice async / await

L’exercice sur async / await

JavaScript : fetch

fetch est une fonction, fournie par JavaScript qui permet d’interroger une URL distante (une API par exemple) pour récupérer un contenu, le plus souvent en JSON.

fetch retourne une Promise, appelée Response, qui elle-même retourne une Promise.

let url = 'https://api.example.com/users';

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

Du coup ça fait beaucoup de then. fetch étant une opération asynchrone, vous pouvez l’utiliser avec async et await :

async function getUsers()
{
    let url = 'https://api.example.com/users';
    
    let response = await fetch(url);
    let data = await response.json();
    
    console.log(data);
}

JavaScript : fetch suite

Par défaut fetch utilise la méthode HTTP GET pour communiquer avec l’URL distante, mais elle peut également utiliser POST :

let url = 'https://api.example.com/register';
let userData = {
    username: 'Marianne',
    password: 'superSecure'
};

fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(userData)
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

JavaScript : fetch suite

et avec async/ await :

async function register()
{
    let url = 'https://api.example.com/register';
    let userData = {
        username: 'Marianne',
        password: 'superSecure'
    };
    let body = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(userData)
    }
    
    let response = await fetch(url, body);
    let data = await response.json();

    console.log(data);
}

JavaScript : Exercices sur l’usage de fetch

Les exercices sur fetch