async/attendre dans JS

Cette fois, je vais vous présenter async/await en JS. Quelles sont les précautions lors de l'utilisation de async/await en JS. Ce qui suit est un cas pratique, jetons un coup d'œil.

Les opérations asynchrones en JS ont évolué de la fonction de rappel initiale à Promise puis à Generator, qui sont toutes des améliorations progressives. L'émergence des fonctions asynchrones semble voir la fin de la solution asynchrone. . Utilisez Write de manière asynchrone et synchrone.

Une brève explication de la fonction asynchrone est le sucre syntaxique de la fonction Générateur.

Comment écrire la fonction Générateur

let promise = function (val){    return new Promise(function (resolve, reject){
        setTimeout(()=>{            console.log(val);
            resolve(val);
        },1000);
    });
};let gen = function* (){    let p1 = yield promise('1');    let p2 = yield promise('2');
};let genF = gen();

Comment écrire la fonction asynchrone

let promise = function (val){    return new Promise(function (resolve, reject){
        setTimeout(()=>{            console.log(val);
            resolve(val);
        },1000);
    });
};let gen = async function (){    let p1 = await promise('1');    let p2 = await promise('2');
};

La fonction asynchrone est une amélioration de la fonction Générateur En syntaxe, l'astérisque de la fonction Generator est remplacé par Async est remplacé, et le rendement est remplacé par wait.
Et async est également différent de la fonction Générateur :

est livré avec un exécuteur intégré, la fonction Générateur doit s'appuyer sur l'exécuteur, et async peut être identique à une fonction normale, un seul la ligne est nécessaire

par rapport à la fonction Générateur, les sémantiques async et wait sont plus claires

Forte applicabilité, le rendement ne peut être que des fonctions Thunk et des objets Promise, tandis que wait peut être des objets Promise et des valeurs de type primitif ​​(valeurs numériques, chaînes , booléennes, etc.)

Le rôle de l'async

L'attente placée sur la fonction asynchrone est de nous aider à résoudre les problèmes de fonctionnement asynchrone , nous devons donc comprendre la valeur de retour de la fonction async Qu'est-ce que c'est.

async function asyncAwait() {    return 'async await';
}let a = asyncAwait();console.log(a);

Résultat :

Promise {<resolved>: "async await"}

On peut voir que la fonction asynchrone renvoie un objet Promise Si une valeur directe est renvoyée dans la fonction, la fonction asynchrone sera encapsulée. dans un objet Promise et renvoyé. S'il n'y a pas de valeur de retour, la fonction asynchrone retournera undefined

Promise {<resolved>: undefined}

Lorsque l'attente n'est pas combinée, la fonction asynchrone sera exécutée immédiatement et renverra un objet Promise.

await waits

await est un opérateur, et le résultat de l'attente est un objet Promise ou une autre valeur, telle que :

function func1() {    return 'async';
}async function func2() {    return Promise.resolve('await');
}async function asyncAwait() {    let f1 = await func1();    let f2 = await func2();    console.log(f1, f2);
}
asyncAwait()

Résultat :

async wait

awaitLe fonctionnement de l'expression dépend du résultat de l'attente. Si ce qu'elle attend n'est pas un objet Promise, le résultat de l'opération est ce qu'il attend. ,
Et s'il attend un objet Promise, il bloquera le code suivant, attendra que l'objet Promise soit résolu, puis obtiendra la valeur résolue comme résultat de l'opération. de l'expression.
Les appels de fonctions asynchrones seront encapsulés dans Promise, c'est pourquoi wait doit être utilisé dans les fonctions asynchrones.

Traitement de la chaîne asynchrone/attente

Pour plusieurs opérations asynchrones, Promise peut alors résoudre le problème des rappels multicouches.

function ajax(t) {    return new Promise(resolve => {
        setTimeout(() => resolve(t + 200), t);
    });
}function step1(t) {    console.log(`step1 in ${t}ms`);    return ajax(t);
}function step2(t) {    console.log(`step2 in ${t}ms`);    return ajax(t);
}function step3(t) {    console.log(`step3 in ${t}ms`);    return ajax(t);
}function submit(){    console.time('submit');
    step1(200)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {            console.log(`result is ${result}ms`);            console.timeEnd("submit");
        });
}

submit();

Implémentation de la fonction asynchrone :

function ajax(t) {    return new Promise(resolve => {
        setTimeout(() => resolve(t + 200), t);
    });
}function step1(t) {    console.log(`step1 in ${t}ms`);    return ajax(t);
}function step2(t) {    console.log(`step2 in ${t}ms`);    return ajax(t);
}function step3(t) {    console.log(`step3 in ${t}ms`);    return ajax(t);
}async function submit(){    console.time('submit');    const t1 = 200;    const t2 = await step1(t1);    const t3 = await step2(t2);    const result = await step3(t3);    console.log(`result is ${result}`);    console.timeEnd('submit');
}
submit();

Sortie du résultat :

step1 in 200ms
step2 in 400ms
step3 in 600ms
result is 800submit: 1209.85107421875ms

Et si nécessaire Après modification, les paramètres de chaque étape sont les résultats des étapes précédentes, la fonction asynchrone peut être écrite comme :

function ajax(t) {    return new Promise(resolve => {
        setTimeout(() => resolve(t + 200), t);
    });
}function step1(t1) {    console.log(`step1 in ${t1}ms`);    return ajax(t1);
}function step2(t1, t2) {    console.log(`step2 in ${t1}ms,${t2}ms`);    return ajax(t1 + t2);
}function step3(t1, t2, t3) {    console.log(`step3 in ${t1}ms,${t2}ms,${t3}ms`);    return ajax(t1 + t2 + t3);
}async function submit(){    console.time('submit');    const t1 = 200;    const t2 = await step1(t1);    const t3 = await step2(t1, t2);    const result = await step3(t1, t2, t3);    console.log(`result is ${result}`);    console.timeEnd('submit');
}
submit();

Sortie du résultat :

step1 in 200ms
step2 in 200ms,400ms
step3 in 200ms,400ms,800ms
result is 1600submit: 2210.47998046875ms

async/await pointe vers note

async est utilisé pour déclarer que le contenu du package peut être exécuté de manière synchrone, tandis que wait contrôle la séquence d'exécution à chaque fois qu'un wait est exécuté, l'exécution du code est bloquée, en attendant la valeur de retour wait, puis l'attente suivante est exécutée.

La fonction appelée après wait doit renvoyer une promesse.

await ne peut être utilisé que dans des fonctions asynchrones. S'il est utilisé dans des fonctions ordinaires, une erreur sera signalée.

L'objet Promise derrière la commande wait peut être rejeté, il est donc préférable de mettre la commande wait dans le bloc de code try...catch.

Comment écrire async/await try/catch

async function asyncAwait() {    try {        await promise();
    } catch (err) {        console.log(err);
    }
}// 另一种写法async function asyncAwait() {    await promise().catch(function (err){        console.log(err);
    });
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles sur le site PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation de Mixins.js dans React.js

Utilisation du CSS dans React.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!