A quoi sert wait dans vue ?

Dans vue, wait signifie attendre. Le mot-clé wait ne peut être placé que dans des fonctions asynchrones. L'utilisation de wait avec async équivaut à transformer une fonction asynchrone en wait attendra le résultat de retour de l'expression suivante. à l'étape suivante.

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quelle est l'utilisation de wait dans vue

Parlons d'abord de l'utilisation de async. Il est placé devant la fonction comme mot-clé pour indiquer que la fonction est une fonction asynchrone, car async signifie asynchrone et asynchrone. La fonction signifie également que l'exécution de la fonction ne bloquera pas l'exécution du code suivant. Écrire une fonction asynchrone

async function timeout() {
　　return 'hello world';
}

　La syntaxe est très simple, il suffit d'ajouter le mot-clé async devant la fonction pour indiquer qu'elle est asynchrone, alors comment l'appeler ? La fonction async est aussi une fonction. Nous l'utilisons généralement comme nous utilisons la fonction. Il suffit de l'appeler directement avec des parenthèses. Afin de montrer qu'elle ne bloque pas l'exécution du code derrière elle, nous ajoutons la phrase

console.log;
async function timeout() {
    return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');

après. l'appel de la fonction asynchrone. Ouvrez la console du navigateur, nous voyons

　le délai d'attente de la fonction asynchrone est appelé, mais il n'y a pas de sortie. Ne vous inquiétez pas, jetez un œil à ce que l'exécution de timeout() renvoie. ? Remplacez l'instruction timeout() ci-dessus par console.log(timeout())

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('虽然在后面，但是我先执行');

Continuez à regarder la console

Il s'avère que la fonction asynchrone renvoie un objet de promesse si nous voulons obtenir le retour de la promesse. valeur, nous devrions utiliser la méthode puis, continuer à modifier le code

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');

Regardez la console

Nous avons eu "hello world", et l'exécution du timeout n'a pas bloqué l'exécution du code suivant, ce qui est cohérent avec ce que nous venons de dire.

À ce stade, vous remarquerez peut-être que la promesse dans la console est résolue. C'est le principe d'implémentation interne de la fonction asynchrone. Si la fonction asynchrone renvoie une valeur, lorsque la fonction est appelée, la méthode Promise.solve() sera appelée en interne pour la convertir en objet de promesse en retour, mais que se passe-t-il si une erreur est générée dans la fonction timeout ? Ensuite, Promise.reject() sera appelée pour renvoyer un objet de promesse. modifier la fonction timeout

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

　La console est la suivante :

　Si la fonction lance Lorsqu'une erreur se produit, l'objet de promesse a une méthode catch pour l'attraper

timeout(false).catch(err => {
    console.log(err)
})

　Le mot-clé async est presque là. le mot-clé wait signifie à nouveau attendre, alors qu'est-ce qu'il attend ? Qu'est-ce qui le suit ? Mettez n'importe quelle expression, mais nous sommes plus susceptibles de mettre une expression qui renvoie un objet promis. fonction asynchrone. Maintenant, écrivez une fonction pour renvoyer un objet de promesse. La fonction de cette fonction est 2s. Ensuite, multipliez la valeur par 2

// 2s 之后返回双倍的值

function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

Écrivez maintenant une fonction asynchrone pour pouvoir utiliser le mot-clé wait. une expression qui renvoie l'objet promis, vous pouvez donc écrire l'appel de la fonction doubleAfter2seconds après lui

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}
testResult();

Open La console, après 2s, en sort 60.

Regardons maintenant le processus d'exécution du code et appelons la fonction testResult . Il rencontre wait. Attendre signifie attendre un moment, et le code sera mis en pause ici et ne sera plus exécuté. Qu'attendez-vous que l'objet de promesse suivant soit exécuté, puis obtenez la valeur de la résolution de la promesse et. Renvoyez-le.Après avoir obtenu la valeur de retour, il continue à s'exécuter vers le bas.Lorsqu'il rencontre wait, le code suspendra l'exécution, attendra que doubleAfter2seconds(30) termine l'exécution et la promesse renvoyée par doubleAfter2seconds(30) commencera à s'exécuter. Après 2 secondes, la promesse est résolue et renvoie une valeur de 60. À ce stade, wait obtient la valeur de retour de 60, puis l'attribue au résultat et fait une pause. À la fin, le code commence à continuer de s'exécuter et exécute la console. instruction de journal.

　Avec cette fonction, nous ne voyons peut-être pas le rôle de async/wait. Et si nous voulons calculer les valeurs de 3 nombres puis afficher les valeurs obtenues ?

async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

Après 6 secondes, la console affiche 220. Nous pouvons voir qu'écrire du code asynchrone est comme écrire du code synchrone, et il n'y a plus de zone de rappel.

Remarque :

async et wait sont basés sur une promesse. Les fonctions utilisant async renverront toujours un objet de promesse. Il est important de se rappeler que cela peut être un endroit courant où vous commettez des erreurs.

Lors de l'utilisation de wait, nous mettons la fonction en pause, pas l'intégralité du code.

async et wait ne sont pas bloquants.

Vous pouvez toujours utiliser Promise telle que Promise.all().

【Recommandation associée : "

Tutoriel vue.js

"】

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!