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

Unterschied zwischen MySQL-Update-Set und und

Inhaltsverzeichnis Problembeschreibung Ursachenan...

Die benutzerdefinierte Vue-Komponente implementiert eine bidirektionale Bindung

Szenario: Die von uns häufig verwendeten Interakt...

Nach dem Docker-Lauf ist der Status immer „Beendet“

füge -it hinzu docker run -it -name test -d nginx...

NodeJS realisiert die Bildtextsegmentierung

In diesem Artikel wird der spezifische Code von N...

Teilen Sie 8 sehr nützliche CSS-Entwicklungstools

CSS3-Mustergalerie Diese CSS3-Musterbibliothek ze...

Implementierung des Aufbaus eines Kubernetes-Clusters mit VirtualBox+Ubuntu16

Inhaltsverzeichnis Über Kubernetes Grundlegende U...

Swiper+echarts realisiert den Links- und Rechts-Scrolleffekt mehrerer Dashboards

In diesem Artikel wird der spezifische Code von S...

Implementierung des Pushens von Docker-Images zum Docker Hub

Nachdem das Image erfolgreich erstellt wurde, kan...

Axios Sekundärkapselungsbeispiel Demo im Projekt

1. Warum verpacken? Erleichtert das Aufrufen von ...

So fügen Sie einem laufenden Docker-Container dynamisch ein Volume hinzu

Jemand hat mich schon einmal gefragt, ob es mögli...