À propos des méthodes d'appel asynchrone JavaScript

Problème

Vous pouvez modifier la fonction aa() ci-dessous, dans le but d'utiliser console.log() pour afficher want-value

function aa() {
    setTimeout(function() {
        return "want-value";
    }, 1000);
}

après une seconde. Cependant, il y en a. exigences supplémentaires :

1. aa() La fonction peut être modifiée à volonté, mais il ne peut pas y avoir d'instruction console.log()

2. Executeconsole.log() et il ne peut pas y avoir de setTimeout package

Réponse

Peut-être que c'est une question d'entretien, peu importe. L'objectif principal de la question est d'examiner le traitement des résultats de l'exécution d'un appel asynchrone. Puisqu'il s'agit d'un appel asynchrone, il est impossible pour d'attendre le résultat asynchrone. Le résultat <🎜. >

est souvent utilisé pour simuler des opérations asynchrones. Au début, les résultats du traitement des gestionnaires de notifications (appels) asynchrones étaient effectués via des rappels setTimeout()

function aa(callback) {
    setTimeout(function() {
        if (typeof callback === "function") {
            callback("want-value");
        }
    }, 1000);
}

aa(function(v) {
    console.log(v);
});

Cependant, lorsque les rappels sont utilisés dans des applications asynchrones plus grandes, ils sont sujets à une imbrication multicouche, donc certaines méthodes ont été proposées plus tard. . Pour "l'aplatir", cette partie peut faire référence à "l'aplatissement" des appels asynchrones du chat. Bien sûr, Promise est une méthode très populaire et a finalement été adoptée par ES6. Utilisez Promise pour l'implémenter comme suit :

function aa() {
    return new Promise(resolve => {
        setTimeout(function() {
            resolve("want-value");
        }, 1000);
    });
}

aa().then(v => console.log(v));

En ce qui concerne cet exemple, il est similaire à l'exemple de rappel précédent. Cependant, cela conduira actuellement à une méthode plus recommandée - async/await, qui est prise en charge à partir de ES2017 : la définition de

function aa() {
    return new Promise(resolve => {
        setTimeout(function() {
            resolve("want-value");
        }, 1000);
    });
}

async function main() {
    const v = await aa();
    console.log(v);
}

main();

est la même que la définition de la méthode Promise, mais dans l'appel Lors de l'utilisation de aa(), attendez de manière asynchrone Après avoir attendu le résultat asynchrone, utilisez await pour le traiter. console.log()

Il convient de noter ici que

ne peut être utilisé que dans la méthode await, donc pour utiliser async, vous devez définir une méthode principale de await et l'appeler dans le portée mondiale. Puisque la méthode principale est asynchrone (déclarée comme asynchrone), s'il y a d'autres instructions après l'appel async, telles que main(), alors cette phrase sera exécutée en premier. console.log("hello")

La syntaxe async/await rend l'écriture d'appels asynchrones comme l'écriture de code synchrone. Lors de l'écriture de code, vous pouvez éviter les sauts logiques et faciliter l'écriture. (Référence : De l'enfer au paradis, le rappel du nœud devient async/await)

Bien sûr, définir

puis appeler main() peut être encapsulé avec IIFE, main()

(async () => {
    const v = await aa();
    console.log(v);
})();

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!