Eine elegantere Methode zur Fehlerbehandlung in JavaScript async await

Eine elegantere Methode zur Fehlerbehandlung in JavaScript async await

Hintergrund

Ein neuer Kollege ist dem Team beigetreten und hat festgestellt, dass unser Teamcode-Standard das Hinzufügen von try...catch zum asynchronen Warten erfordert. Er war sehr verwirrt. Wenn es viele (nicht konzentrierte) Orte gäbe, wäre es dann nicht notwendig, viele Orte hinzuzufügen? Ist das nicht unelegant?

Warum Fehlerbehandlung?

JavaScript ist eine Single-Thread-Sprache. Wenn try...catch nicht hinzugefügt wird, wird ein Fehler direkt gemeldet und die Ausführung wird nicht fortgesetzt. Das bedeutet natürlich nicht, dass Sie Ihren Code mit try...catch umschließen müssen. Wenn Sie try...catch verwenden, wissen Sie, dass der Code an dieser Stelle wahrscheinlich einen Fehler meldet. Daher verwenden Sie try...catch, um ihn zu erfassen und zu verarbeiten, und lassen das Programm weiter ausführen.

Ich verstehe, dass wir beim Ausführen von async await normalerweise in einem asynchronen Szenario arbeiten. Dieses Szenario sollte den Prozess nicht blockieren, daher wird empfohlen, try...catch zu verwenden.

async await elegantere Fehlerbehandlung

Aber es stimmt, wie der Kollege sagte, das Hinzufügen von try...catch ist kein sehr elegantes Verhalten. Also habe ich gegoogelt und herausgefunden, wie man asynchrones Warten ohne Try-Catch-Blöcke in Javascript schreibt. In diesem Artikel wird eine elegantere Methode beschrieben, damit umzugehen, und in einer Bibliothek gekapselt - await-to-js. Diese Bibliothek hat nur eine Funktion und wir können diese Funktion vollständig auf unser Geschäft anwenden, wie unten gezeigt:

/**
 * @param { Versprechen } Versprechen
 * @param { Object= } errorExt – Zusätzliche Informationen, die Sie an das err-Objekt übergeben können
 * @return { Versprechen }
 */
Exportfunktion nach <T, U = Fehler> (
  Versprechen: Versprechen<T>,
  errorExt?: Objekt
): Versprechen<[U, undefiniert] | [null, T]> {
  Rückgabeversprechen
    .then<[null, T]>((data: T) => [null, data]) // Die Ausführung ist erfolgreich, das erste Element des zurückgegebenen Arrays ist null. Das zweite ist das Ergebnis.
    .catch<[U, undefiniert]>((err: U) => {
      wenn (FehlerExt) {
        Objekt.assign(err, errorExt);
      }

      return [err, undefined]; // Ausführung fehlgeschlagen, das erste Element im zurückgegebenen Array ist die Fehlermeldung, das zweite Element ist undefiniert
    });
}

Standardmäßig exportieren nach;

Hier gibt es einen erforderlichen Wissenspunkt: „await“ wartet auf den Rückgabewert eines Promise.

Normalerweise folgt auf den „await“-Befehl ein Promise-Objekt, das das Ergebnis zurückgibt. Wenn es kein Promise-Objekt ist, wird der entsprechende Wert direkt zurückgegeben.

Wir müssen also nur die Eigenschaften von Promise ausnutzen und in promise.then bzw. promise.catch unterschiedliche Arrays zurückgeben. Wenn dies erfüllt ist, ist das erste Element des zurückgegebenen Arrays null und das zweite ist das Ergebnis. Bei einer Ablehnung ist das erste Element im zurückgegebenen Array die Fehlermeldung und das zweite Element ist undefiniert. Wenn Sie es verwenden, können Sie feststellen, ob ein Fehler vorliegt, indem Sie beurteilen, ob das erste Element leer ist. Die spezifische Verwendung lautet wie folgt:

importieren nach von „await-to-js“;
// Wenn Sie CommonJS verwenden (also eine NodeJS-Umgebung), sollte es lauten:
// const bis = erfordern ('await-to-js').default;

asynchrone Funktion asyncTaskWithCb(cb) {
     let err, Benutzer, gespeicherteAufgabe, Benachrichtigung;

     [ err, Benutzer ] = warte auf(UserModel.findById(1));
     if(!user) return cb('Kein Benutzer gefunden');

     [ err, gespeicherteAufgabe ] = warte auf(TaskModel({userId: user.id, name: 'Demo Task'}));
     if(err) return cb('Beim Speichern der Aufgabe ist ein Fehler aufgetreten');

    if(user.notificationsEnabled) {
       [ err ] = warte auf (NotificationService.sendNotification (user.id, 'Task erstellt'));
       if(err) return cb('Fehler beim Senden der Benachrichtigung');
    }

    wenn(savedTask.assignedUser.id !== user.id) {
       [ err, notification ] = warte auf (NotificationService.sendNotification(savedTask.assignedUser.id, 'Aufgabe wurde für Sie erstellt'));
       if(err) return cb('Fehler beim Senden der Benachrichtigung');
    }

    cb(null, gespeicherteAufgabe);
}

Zusammenfassung

Ich persönlich denke, dass es notwendig ist, die Fehlerbehandlung in asynchrones Warten einzufügen, aber es gibt mehr Lösungen als nur try...catch. Indem wir die Funktionen von „async await“ und „Promise“ nutzen, können wir mit „async await“-Fehlern eleganter umgehen.

Zusammenfassen

Damit ist dieser Artikel über eine elegantere Fehlerbehandlungsmethode für asynchrones Warten in JavaScript abgeschlossen. Weitere Informationen zur eleganten Fehlerbehandlung mit asynchronem Warten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • So verwenden Sie async und await richtig in JS-Schleifen
  • So verwenden Sie async await elegant in JS
  • Eine einfache und eingehende Studie zu Async und Await in JavaScript
  • Die Verwendung und Methoden von async und await in JavaScript
  • Detaillierte Erklärung von JavaScript Promise und Async/Await
  • So verwenden Sie async und await in JS

<<:  Implementierung des Deployment-War-Package-Projekts mit Docker

>>:  Detaillierte Erklärung der MySQL-Alter-Ignore-Syntax

Artikel empfehlen

Detaillierte Erläuterung des Beispiels für MySQL-Integritätsbeschränkungen

Dieser Artikel beschreibt die MySQL-Integritätsbe...

Detaillierte Erläuterung der praktischen Anwendung der Centos7 ESXi6.7-Vorlage

1. Erstellen Sie ein Centos7.6-System und optimie...

Diagramm des Prozesses zur Implementierung eines Richtungsproxys durch Nginx

Dieser Artikel stellt hauptsächlich den Prozess d...

Vue3 realisiert den Bildlupeneffekt

In diesem Artikelbeispiel wird der spezifische Co...

Lösung für das Problem ungenauer JS-Zahlen

Die verständlichste Erklärung des Genauigkeitspro...

CSS verwendet das Autoflow-Attribut, um einen Sitzauswahleffekt zu erzielen

1. Autoflow-Attribut: Wenn die Länge und Breite d...

TimePicker im Element deaktiviert einen Teil der Zeit (deaktiviert auf Minuten)

Die Projektanforderungen lauten: Datum und Uhrzei...

Analyse gängiger Anwendungsbeispiele von MySQL-Prozessfunktionen

Dieser Artikel veranschaulicht anhand von Beispie...