Les essentiels de JavaScript asynchrone pour LWC / Blogs / Perficient

JavaScript asynchrone

JavaScript est un langage de programmation monothread. Exécutez la fonction ci-dessous dans votre composant LWC (Lightning Web Components) en cliquant sur un bouton et vérifiez le journal de la console. Vous verrez que le code est exécuté ligne par ligne et n’attend pas l’opération asynchrone setTimeout

import { LightningElement } from 'lwc';

export default class AsyncJs extends LightningElement {
    // Single Threaded behavior
    testSingleThreadedBehavior() {
        console.log("Sending request to server!")
        setTimeout(() => {
            console.log("Here is your data from the server...")
        }, 5000)
        console.log("I AM AT THE END OF THE FILE!")
    }
}

JavaScript utilise une pile d’appels pour gérer l’exécution des fonctions, selon le modèle Last In, First Out (LIFO). Lorsqu’une fonction est appelée, elle est placée sur la pile d’appels et lorsque la fonction se termine, elle est retirée de la pile. Dans l’extrait de code ci-dessous, l’instruction de journal pour «thirdFunction» sera affichée en premier sur la console car elle est ajoutée en dernier à la pile.

import { LightningElement } from 'lwc';

export default class AsyncJs extends LightningElement {
    // Callstack
    showCallstack() {
        this.firstFunction();
        console.log('Inside call stack');
    }

    firstFunction() {
        this.secondFunction();
        console.log('Inside First function');
    }

    secondFunction() {
        this.thirdFunction();
        console.log('Inside Second Function');
    }

    thirdFunction() {
        console.log('Inside Third Function');
    }
}

Énoncé du problème :

Créez un composant LWC pour afficher les enregistrements de contacts et de comptes. Le composant LWC comprendra un bouton qui, lorsque vous cliquez dessus, appelle la fonction loadData. Cela affichera les enregistrements de contact et de compte résultants sur l’interface utilisateur.

Nous comprendrons les rappels, les promesses et Async/Await à l’aide de l’énoncé du problème ci-dessus.

Rappels

Un rappel est une fonction passée en argument à une autre fonction, destinée à être exécutée après la fin d’une opération asynchrone ou ultérieurement.

Il existe deux manières d’écrire une fonction de rappel

• Façon traditionnelle
• Fonction flèche

Une fonction flèche en JavaScript est une meilleure façon d’écrire des expressions de fonction. La principale différence réside dans la gestion du mot-clé « this ».

Dans le code ci-dessous, la fonction « getAccountsRecords » a un rappel écrit sous forme de fonction fléchée, alors que getContactsRecords est écrit de manière traditionnelle.

getAccountsRecords affichera les enregistrements de compte sur l’interface utilisateur et nous pourrons accéder aux propriétés du compte dans la fonction fléchée.

getContactsRecords entraînera une erreur ; nous ne pouvons pas accéder aux enregistrements de contacts en utilisant la manière traditionnelle d’écrire des fonctions.
Erreur : Impossible de définir les propriétés de non défini (définition de « contacts »).

import { LightningElement } from 'lwc';
import getAccountRecords from '@salesforce/apex/AccountController.getAccountRecords';
import getContactRecords from '@salesforce/apex/AccountController.getContactRecords';

export default class Callback extends LightningElement {
    accounts;
    contacts;
    loadData() {
        getAccountRecords()
            // With Arrow function
            .then(data => {
                // 'this' refers to the instance of the component
                this.accounts = data;
            })
            .catch(error => {
                console.error('Error: ', error.message);
            });

        getContactRecords()
            // Without Arrow function
            .then(function(data) {
                this.contacts = data;
            })
            .catch(error => {
                console.error('Error: ', error.message);
            });
    }    
}

Promesses et asynchrone

Une promesse est un objet représentant l’achèvement ou l’échec éventuel d’une opération asynchrone.

Il a trois états

• En attente
• accompli
• rejeté

L’appel de la méthode apex dans LWC est asynchrone et renvoie une promesse.

import { LightningElement } from 'lwc';
import getAccountRecords from '@salesforce/apex/AccountController.getAccountRecords';
import getContactRecords from '@salesforce/apex/AccountController.getContactRecords';

export default class Promises extends LightningElement {
    accounts;
    contacts;

    checkIfPromise() {
        const result = getAccountRecords();
        if (result instanceof Promise) {
            console.log("The function returns a Promise");
        } else {
            console.log("The function does not return a Promise");
        }
    }
}

Les promesses ont trois méthodes importantes :

• puis : Cette méthode est utilisée pour gérer l’éventuelle réalisation ou le rejet d’une promesse.
• catch : Cette méthode est un raccourci pour gérer uniquement le rejet d’une promesse.
• enfin : Cette méthode est appelée lorsque la promesse est réglée, qu’elle soit remplie ou rejetée.

Vérifiez le code ci-dessous où nous utilisons les blocs « then » et « catch » pour gérer les promesses.

import { LightningElement } from 'lwc';
import getAccountRecords from '@salesforce/apex/AccountController.getAccountRecords';
import getContactRecords from '@salesforce/apex/AccountController.getContactRecords';

export default class Promises extends LightningElement {
    accounts;
    contacts;

    loadData() {
        getAccountRecords()
            .then(result => {
                this.accounts = result;
                getContactRecords()
                    .then(result => {
                        this.contacts = result;
                        // More nested callbacks can be added for additional operations
                    })
                    .catch(error => {
                        console.error('Error fetching contact records', error);
                    });
            })
            .catch(error => {
                console.error('Error fetching account records', error);
            });
    }
}

Le code ci-dessus crée une structure imbriquée, résultant en une structure en forme de pyramide, également connue sous le nom de Callback Hell. Les promesses nous permettent d’enchaîner les blocs « puis ». Consultez le code ci-dessous pour un exemple de chaînage de blocs « puis »

import { LightningElement } from 'lwc';
import getAccountRecords from '@salesforce/apex/AccountController.getAccountRecords';
import getContactRecords from '@salesforce/apex/AccountController.getContactRecords';

export default class CallbackHell extends LightningElement {
    accounts;
    contacts;
    loadData() {
        getAccountRecords()
            .then(result => {
                this.accounts = result;
                return getContactRecords()
            })
            .then(result => {
                this.contacts = result;
            })
            .catch(error => {
                console.error('Error fetching records', error);
            });
    }
}

Asynchrone/Attente

Il permet de travailler plus confortablement avec Promises. Dans le code ci-dessous, nous avons utilisé les mots-clés « async » et « wait » pour travailler avec les promesses. C’est juste une autre façon de travailler avec des promesses. Au lieu d’utiliser le bloc then/catch, nous utilisons Async/Await.

import { LightningElement } from 'lwc';
import getAccountRecords from '@salesforce/apex/AccountController.getAccountRecords';
import getContactRecords from '@salesforce/apex/AccountController.getContactRecords';

export default class AsynAwait extends LightningElement {
    accounts;
    contacts;
    async loadData() {
        try {
            this.accounts = await getAccountRecords();
            this.contacts = await getContactRecords();
        } catch (error) {
            console.error('Error fetching data', error);
            throw error;
        }
    }
}

Conclusion

L’appel d’une méthode Apex dans LWC est une opération asynchrone. Nous avons vu comment la qualité du code s’améliore à mesure que nous approchons de la fin du bloc. Nous avons également vu à quel point il est important de savoir en quoi la valeur du mot-clé ‘this’ diffère lors de l’écriture d’une fonction fléchée. Le principal point à retenir de ce blog est que l’appel d’une méthode Apex renvoie des promesses, et nous utilisons les blocs « then » et « catch » pour travailler avec les promesses.

Liens importants :