Est-ce qu'attendre es6 ou es7 ?

attendre est es7. async et wait sont de nouveaux ajouts à ES7 et sont des solutions pour les opérations asynchrones. Comme son nom l'indique, async signifie « asynchrone ». Async est utilisé pour déclarer qu'une fonction est asynchrone ; wait signifie littéralement « en attente », qui est utilisé pour attendre l'achèvement asynchrone. Il existe une règle stricte entre async et wait. Les deux sont indissociables l'un de l'autre et wait ne peut être écrit que dans des fonctions asynchrones.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 7, ordinateur Dell G3.

Les fonctionnalités asynchrones front-end proposées dans le dernier ES7 (ES2017) : async, wait.

1. Que sont async et wait

async et wait sont de nouveaux ajouts dans ES7 Pour les solutions aux opérations asynchrones, ce sont du sucre syntaxique pour la fonction Générateur.

• async|await est une nouvelle façon d'écrire de manière asynchrone. Auparavant, promise était utilisée dans ES6.
• async|await est une nouvelle méthode d'écriture basée sur la promesse.

• async|await est également non bloquant.

async, comme son nom l'indique, signifie "asynchrone". async est utilisé pour déclarer qu'une fonction est asynchrone. Et wait signifie littéralement « attendre », qui est utilisé pour attendre l'achèvement asynchrone.

Async et wait ont une règle stricte. Les deux ne peuvent pas vivre l'un sans l'autre. Cependant, wait ne peut être écrit que dans des fonctions asynchrones.

2. Utilisation

Comment async gère la valeur de retour
La valeur de retour d'async est un objet de promesse, ce qui signifie qu'il encapsulera directement la valeur de retour dans un objet de promesse via la méthode dans la promesse .

async function Async() {
return "hello world";
}
const result = Async();
console.log(result);

D'après les résultats, il semble que la fonction asynchrone renvoie un objet de promesse, et elle encapsulera directement la valeur de retour dans un objet de promesse.

S'il n'y a pas de valeur de retour

async function Async() {
    console.log("hello world");
}
let result1 = Async();
console.log(result1);

D'après les résultats, il semble que la fonction asynchrone renvoie un objet promis et que la valeur à ce moment-là n'est pas définie. donc. En l'absence d'attente, le retour d'un objet promis ne bloquera pas les instructions suivantes.

Mais qu'est-ce qui attend ?

function time(s) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function Async(value, s) {
  await time(s);
  console.log(value);
}
Async('hello world', 50);

Spécifiez qu'après 50 millisecondes, hello world sera affiché.

Généralement, wait est utilisé pour attendre la fin de la fonction asynchrone. Await attend une expression, et le résultat du calcul de l'expression est un objet promis ou une autre valeur. Par conséquent, wait peut en fait recevoir des appels de fonction ordinaires ou des quantités directes.
Si wait n'attend pas un objet promis, le résultat de l'opération d'expression est ce qu'il attend.
S'il s'agit d'un objet de promesse, wait bloquera le code suivant. Lorsque l'objet de promesse est traité avec succès, la valeur obtenue est le résultat de l'opération de l'expression d'attente. Bien que wait bloque, wait est en async. Tous les blocages qu'il contient sont encapsulés dans un objet de promesse et exécutés de manière asynchrone.

Tout objet Promise après qu'une instruction wait passe à l'état de rejet, l'exécution de l'intégralité de la fonction asynchrone sera alors interrompue.

async function Async() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}
let result1 = Async();
console.log(result1);

À en juger par les résultats, la deuxième instruction wait ne sera pas exécutée car le statut de la première instruction wait change pour rejeter.

3. Gestion des erreurs de la fonction asynchrone

Si une erreur se produit dans l'opération asynchrone après l'attente, alors l'objet de promesse renvoyé par la fonction asynchrone est rejeté.

let a;
async function f() {
    await Promise.reject('error');
    a = await 1; // await 没有执行
}
f().then(v => console.log(a));

D'après les résultats, lorsqu'une des attentes de la fonction asynchrone apparaît dans l'état de rejet, les attentes suivantes ne seront pas exécutées. La solution générale consiste à utiliser try...catch.

// 正确的写法
let a;
async function f() {
    try {
        await Promise.reject('error')
    } catch (error) {
        console.log(error);
    }
    a = await 1;
    return a;
}

f().then(v => console.log(a)); // 1

D'après les résultats, cela résout très bien le problème. Lorsqu'il y a plusieurs attentes qui ne seront pas exécutées, elles peuvent être placées dans try...catch.

4. Conclusion

Avantages de async|await :

• async|await résout le problème de l'enfer des rappels
• async|await prend en charge l'exécution simultanée
• async|await est plus concis pour le traitement asynchrone
• async|await peut détecter les erreurs dans try...catch

[Apprentissage recommandé : Tutoriel avancé javascript]

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!