Eine Anleitung zum ordnungsgemäßen Fehlerhandling in JavaScript

Schlüsselpunkte

• Verwenden Sie den try…catch -Schürtblock geschickt, um Ausnahmen effektiv zu verwalten, wodurch der Debugging -Prozess verbessert wird, indem Fehler auf den Anrufstapel sprudeln und damit Fehler klarer angezeigt werden.
• Implementieren Sie globale Fehlerhandler (z. B. window.onerror Ereignisse), um die Fehlerbehandlung für die einfache Verwaltung und Wartung in verschiedenen Teilen der Anwendung zu zentralisieren und zu vereinfachen.
• Verwenden Sie die Fähigkeit des Browsers, detaillierte Fehlerinformationen (einschließlich Anrufstack) aufzuzeichnen, um die Fehlerdiagnose zu verbessern und die Quelle und den Kontext des Fehlers klarer zu verstehen.
• Beheben Sie das asynchrone Fehlerhandling -Puzzle, indem Sie try…catch im setTimeout -Block verwenden oder einen globalen Fehlerhandler verwenden, der für alle Ausführungskontexte geeignet ist, um sicherzustellen, dass Fehler im asynchronen Code effektiv erfasst und verwaltet werden.
• Verbessern Sie Fehlermeldungen, indem Sie benutzerdefinierte Fehlertypen oder Anreicherung von Fehlermeldungen erstellen, wodurch die Identifizierung und Behebung spezifischer Probleme einfacher wird und die Gesamtrobustheit des JavaScript -Codes verbessert wird.

Fehlerbehebung in JavaScript ist voller Herausforderungen. Folgen Sie Murphys Gesetz, alles, was schief gehen kann, wird schief gehen. In diesem Artikel wird die Fehlerbehandlung in JavaScript untersucht, Fallen, Best Practices und Asynchroncode und AJAX als Beispiele erläutert.

Dieser Artikel wurde am 8. Juni 2017 aktualisiert, um das Leser -Feedback zu beheben. Insbesondere wurden Dateinamen zum Code-Snippet hinzugefügt, Unit-Tests wurden gereinigt, Wrapper-Muster wurden zu uglyHandler hinzugefügt, und Abschnitte über CORs und Fehlerhandler von Drittanbietern wurden hinzugefügt.

Ich denke, JavaScripts ereignisorientiertes Paradigma verleiht der Sprache Reichtum. Ich denke gerne meinen Browser als diese ereignisgesteuerte Maschine, und Fehler sind keine Ausnahme. Wenn ein Fehler auftritt, wird ein Ereignis in einem bestimmten Zeitpunkt geworfen. Theoretisch kann gesagt werden, dass Fehler nur einfache Ereignisse in JavaScript sind.

Wenn Sie dies seltsam finden, tragen Sie bitte Ihren Sicherheitsgurt, da Sie eine schöne Reise haben werden. In diesem Artikel werde ich mich nur auf das clientseitige JavaScript konzentrieren.

Dieses Thema basiert auf dem Konzept, das in "hervorragende Ausnahmehandhabung in JavaScript" erklärt wurde. Wenn Sie damit nicht vertraut sind, empfehle ich, die Grundlagen zu lesen. In diesem Artikel geht auch davon aus, dass Sie ein moderates JavaScript -Wissen haben. Wenn Sie Ihr Level verbessern möchten, melden Sie sich für SitePoint Premium an und sehen Sie sich unseren Kurs JavaScript an: Nächsten? Die erste Lektion ist kostenlos.

In beiden Fällen ist es mein Ziel, die erforderlichen Bedingungen über die Handhabung der Ausnahmen hinaus zu untersuchen. Nachdem Sie diesen Artikel gelesen haben, werden Sie beim nächsten Mal einen guten try...catch -Block sehen, bevor Sie handeln.

Demo

Das Demo -Programm, das in diesem Artikel verwendet werden soll

Alle Schaltflächen detonieren beim Klicken eine "Bombe". Diese Bombe simuliert eine Ausnahme, die als Typeerror ausgelöst wird. Das Folgende ist die Definition dieses Moduls:

// scripts/error.js

function error() {
  var foo = {};
  return foo.bar();
}

Erstens deklariert diese Funktion ein leeres Objekt namens Foo. Bitte beachten Sie, dass bar() nirgendwo definiert ist. Verwenden wir einen guten Unit -Test, um zu überprüfen, ob dies eine Bombe detoniert:

// tests/scripts/errorTest.js

it('throws a TypeError', function () {
  should.throws(error, TypeError);
});

Dieser Unit -Test verwendet Mokka für Testbehauptungen und Verwendungen für Behauptungen. Mokka ist ein Testläufer und sollte die Assertion -Bibliothek ist. Wenn Sie damit nicht vertraut sind, können Sie die Test -API erkunden. Der Test beginnt mit it('description') und endet mit einem Pass/Ausfall in should. Unit -Tests werden auf dem Knoten durchgeführt und benötigen keinen Browser. Ich empfehle Ihnen, diese Tests zu beachten, da sie die Schlüsselkonzepte mit reinem JavaScript beweisen.

Nach dem Klonen des Repositorys und der Installation der Abhängigkeiten können Sie die Tests mit npm t ausführen. Alternativ können Sie diesen einzelnen Test wie folgt ausführen: ./node_modules/mocha/bin/mocha tests/scripts/errorTest.js.

Wie gezeigt, definiert error() ein leeres Objekt und versucht dann, auf eine Methode zuzugreifen. Da bar() im Objekt nicht existiert, macht es eine Ausnahme. Vertrauen Sie mir, für dynamische Sprachen wie JavaScript passiert dies allen!

Schlechtes Handling

Es gibt als nächstes einige schlechte Fehlerbehandlungen. Ich habe den Handler auf der Schaltfläche aus der Implementierung abstrahiert. So sieht der Handler aus:

// scripts/badHandler.js

function badHandler(fn) {
  try {
    return fn();
  } catch (e) { }
  return null;
}

Dieser Handler empfängt einen fn Rückruf als Parameter. Dieser Rückruf wird dann innerhalb der Handler -Funktion aufgerufen. Unit -Tests zeigen, wofür es ist:

// tests/scripts/badHandlerTest.js

it('returns a value without errors', function() {
  var fn = function() {
    return 1;
  };

  var result = badHandler(fn);

  result.should.equal(1);
});

it('returns a null with errors', function() {
  var fn = function() {
    throw new Error('random error');
  };

  var result = badHandler(fn);

  should(result).equal(null);
});

Wie Sie sehen, wird dieser schlechte Fehlerbehandler null zurückgegeben, wenn etwas schief geht. Der Rückruf fn() kann auf eine juristische Methode oder eine Bombe verweisen.

Der folgende Klick -Ereignishandler erklärt den Rest der Geschichte:

// scripts/badHandlerDom.js

(function (handler, bomb) {
  var badButton = document.getElementById('bad');

  if (badButton) {
    badButton.addEventListener('click', function () {
      handler(bomb);
      console.log('Imagine, getting promoted for hiding mistakes');
    });
  }
}(badHandler, error));

oops, ich bekomme nur ein null. Dies ließ mich nichts ignorierten, als ich versuchte herauszufinden, was schief ging. Diese Strategie zur stillen Versagen reicht von schlechter Benutzererfahrung bis hin zu Datenbeschäftigung. Es ist frustrierend, dass ich Stunden damit verbringen könnte, die Symptome zu debuggen und den try-catch -Block zu ignorieren. Dieser böse Handler wird Fehler im Code verschlingen und so tun, als wäre alles in Ordnung. Dies kann für Organisationen, die keine Wertschöpfungsqualität bewerten, akzeptabel sein. Durch Verstecken von Fehlern können Sie jedoch in Zukunft Stunden zum Debuggen verbringen. In einer mehrschichtigen Lösung mit einem tiefen Anrufstapel ist es unmöglich herauszufinden, wohin der Fehler läuft. In Bezug auf die Fehlerbehandlung ist dies sehr schlecht.

Strategie zur stillen Misserfolg bringt Sie dazu, einen besseren Fehler zu tun. JavaScript bietet eine elegantere Möglichkeit, Ausnahmen zu bewältigen.

(Der folgende Inhalt ähnelt der vorherigen Ausgabe, mit der Ausnahme, dass die Sprache und der Ausdruck subtil angepasst wurden, um den Artikel präzise zu halten und Duplikation zu vermeiden.)

... (Der Rest ähnelt der vorherigen Ausgabe, außer dass die Sprache und der Ausdruck subtil angepasst werden, um den Artikel präzise zu halten und Duplikation zu vermeiden.) ...

Das obige ist der detaillierte Inhalt vonEine Anleitung zum ordnungsgemäßen Fehlerhandling in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!