So wird’s gemacht: Behandeln von Fehlern mit Zusagen (HTML)

Applies to Windows and Windows Phone

Manchmal ist es schwierig zu entscheiden, wie Ausnahmen in den verschiedenen Phasen einer Zusage behandelt werden sollen. Im Artikel zu Schnellstart: Verwenden von Zusagen in JavaScript haben wir gezeigt, wie Sie eine einfache Zusage aus der Windows-Bibliothek für JavaScript verwenden und Fehler in der then-Funktion behandeln.

In diesem Thema zeigen wir verschiedene Möglichkeiten zum Abfangen und Behandeln von Fehlern bei Verwendung von Zusagen. Sie müssen nicht alle diese Fehlerbehandlungsarten implementieren. Suchen Sie sich die Art der Fehlerbehandlung aus, die am besten für die App geeignet ist.

Voraussetzungen

  • Der Code in diesem Thema basiert auf der im Artikel zu Schnellstart: Verwenden von Zusagen in JavaScript erstellten App. Wenn Sie mitmachen möchten, sollten Sie daher zuerst die App erstellen. Beachten Sie, dass die unten erwähnten Farben nur dann wie beschrieben angezeigt werden, wenn Sie das Stylesheet "ui-dark.css" verwenden.

Anweisungen

Schritt 1: Aktivieren von JavaScript-Ausnahmen (erste Chance)

Wenn Sie Ausnahmen (erste Chance) aktivieren, können Sie Ausnahmen sehen und müssen ansonsten nichts zu ihrer Behandlung unternehmen. Wählen Sie in Visual Studio im Menü Debuggen die Option Ausnahmen aus. Vergewissern Sie sich im Dialogfeld Ausnahmen, dass für JavaScript Runtime Exceptions die Option Ausgelöst ausgewählt ist. Führen Sie anschließend die App im Debugmodus aus. Wenn eine Ausnahme ausgelöst wird, wird ein Meldungsfeld mit einem Fehler angezeigt. Diese Art von Dialogfeld sehen Sie nur, wenn die App im Debugger ausgeführt wird, das heißt, für Benutzer sind diese Ausnahmen nicht sichtbar.

Schritt 2: Hinzufügen eines Fehlerhandlers in einer then- oder done-Funktion

Wenn Sie eine Zusage verwenden, sollten Sie eine then- oder done-Funktion hinzufügen, um den abgeschlossenen Wert der Zusage (das heißt den Wert, der von der Zusage zurückgegeben wird, wenn kein Fehler vorliegt) und den Fehlerwert explizit zu behandeln. then und done akzeptieren drei Funktionen (completed, errorund progress) als optionale Parameter. Sie verwenden die completed-Funktion, um Updates auszuführen, nachdem die Zusage erfüllt wurde, die error-Funktion, um Fehler zu behandeln, und die progress-Funktion, um den Status der Zusage anzuzeigen oder zu protokollieren.

Es gibt ein einige Unterschiede zwischen then und done:

  • Die then-Funktion gibt eine Zusage zurück, aber done gibt keinen Wert zurück. Sie können then-Funktionen als Zwischenfunktionen in einer Kette (myPromise().then().then().then()) verwenden, aber done muss die letzte Funktion sein.

  • Unbehandelte Ausnahmen in einer then-Funktion werden automatisch als Teil des Zusagenzustands erfasst, aber unbehandelte Ausnahmen in einer done-Funktion werden ausgelöst. Beide Funktionen können Ausnahmen behandeln, die ihnen als Teil des Zusagenzustands übergeben wurden.

Betrachten wir eine Reihe von Möglichkeiten für die Behandlung von Fehlern in then- und done-Funktionen. In diesem Beispiel richten wir eine Kette aus zwei then-Funktionen ein, wobei die erste then-Funktion der zweiten einen Fehler übergibt.

  1. Fügen Sie im Projekt "TestPromise" ein zweites DIV-Element ein und geben Sie diesem die ID "div2":

    
    <div id="div2">Second</div>
    
    
  2. Entfernen Sie im Änderungshandler den Fehlerhandler aus der then-Funktion, und rufen Sie das zweite DIV-Element ab:

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
        var twoDiv = document.getElementById("div2");
    
        WinJS.xhr({url: e.target.value}).then(function fulfilled (result) {
                if (result.status === 200) {
                    resDiv.style.backgroundColor = "lightGreen";
                    resDiv.innerText = "Success";
            });
    }
    
    
  3. Fügen Sie eine zweite then-Funktion hinzu, und fügen Sie ihr eine fulfilled-Funktion hinzu, die bei erfolgreichem Ergebnis die Farbe des zweiten DIV-Elements ändert. Fügen Sie den ursprünglichen Fehlerhandler dieser Funktion hinzu.

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
        var twoDiv = document.getElementById("div2");
    
        WinJS.xhr({ url: e.target.value })
            .then(function (result) {
                if (result.status === 200) {
                    resDiv.style.backgroundColor = "lightGreen";
                    resDiv.innerText = "Success";
                }
                return result;
            })
            .then(function (result) {
                if (result.status === 200) {
                    twoDiv.style.backgroundColor = "yellow";
                }
            },
            function (e) {
                resDiv.style.backgroundColor = "red";
    
                if (e.message != undefined) {  // If the URL is really malformed or blank.
                    resDiv.innerText = e.message;
                }
                else if (e.statusText != undefined) { // If an XmlHttpRequest is made.
                    resDiv.innerText = e.statusText;
                }
                else {
                    resDiv.innerText = "Error";
                }
            });
        }
    
    
    
  4. Wenn Sie diesen Code im Debugger ausführen, versuchen Sie, eine ungültige URL einzugeben. Sie sehen, dass die Ausführung in der zweiten then-Funktion zur Fehlerfunktion wechselt. Daher sollte das erste DIV-Element rot sein und das zweite schwarz.

Im folgenden Beispiel entfernen wir die error-Funktion aus der zweiten then-Funktion und fügen eine done-Funktion ohne Fehlerhandler hinzu.

  1. Fügen Sie im Projekt "TestPromise" ein zweites DIV-Element "div2" hinzu, falls dies nicht bereits geschehen ist.

  2. Ändern Sie den Änderungshandler, um die Fehlerfunktion aus der zweiten then-Funktion zu entfernen, und fügen Sie eine done-Funktion hinzu, die das zweite DIV-Element in Blau anzeigt. Der Code für den Änderungshandler sieht so aus:

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
        var twoDiv = document.getElementById("div2");
    
        WinJS.xhr({ url: e.target.value })
            .then(function (result) {
                if (result.status === 200) {
                    resDiv.style.backgroundColor = "lightGreen";
                    resDiv.innerText = "Success";
                }
                return result;
            })
            .then(function (result) {
                if (result.status === 200) {
                    twoDiv.style.backgroundColor = "yellow";
                }
            })
            .done(function (result) {
                if (result.status === 200) {
                    twoDiv.style.backgroundColor = "lightBlue";
            }
        });
    }
    
    
    
  3. Wenn Sie diesen Code im Debugger ausführen, versuchen Sie, eine ungültige URL einzugeben. Daraufhin sollte ein Meldungsfeld mit einem Fehler angezeigt werden. Das erste und das zweite DIV-Element sollten schwarz sein, da kein Code in den then-Funktionen oder der done-Funktion ausgeführt wurde.

Schritt 3: Hinzufügen eines WinJS.promise.onerror-Handlers

Das onerror-Ereignis tritt auf, wenn ein Laufzeitfehler in einer Zusage festgestellt wird. Sie können mit dem Fehlerhandler beim Debuggen Haltepunkte festlegen oder die allgemeine Fehlerbehandlung ermöglichen, beispielsweise durch Fehlerprotokollierung. Da es sich hierbei jedoch um einen allgemeinen Fehlerbehandlungsmechanismus handelt, erhalten Sie möglicherweise nicht viele Details dazu, welcher Code oder welche Benutzereingabe genau den Fehler verursacht hat.

So fügen Sie einen allgemeinen Fehlerhandler hinzu:

  1. Entfernen Sie im Projekt "TestPromise" die then-Funktion aus dem changeHandler-Code. Die sich ergebende changeHandler-Funktion sieht so aus:

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
    
        WinJS.xhr({url: e.target.value});
    }
    
    
    
  2. Erstellen Sie eine allgemeine Fehlerbehandlungsfunktion, und abonnieren Sie das onerror-Ereignis im app.activated-Ereignishandler:

    
    app.activatedHandler = function (args) {
        var input = document.getElementById("inUrl");
        input.addEventListener("change", changeHandler);
        WinJS.Promise.onerror = errorHandler
    }
    function errorhandler(event) {
            var ex = event.detail.exception;
            var promise = event.detail.promise;
        }
    
    
    

    Das Fehlerereignis enthält allgemeine Fehlerinformationen, beispielsweise die Ausnahme, die Zusage, in der die Ausnahme aufgetreten ist, und den aktuellen Zustand der Zusage (der immer error entspricht). Das Ereignis enthält jedoch wahrscheinlich nicht alle Informationen, die Sie benötigen, um den Fehler ordnungsgemäß zu behandeln. Trotzdem erhalten Sie hilfreiche Informationen zu Fehlern, die Sie an keiner anderen Stelle im Code explizit behandeln können.

Verwandte Themen

Asynchrone Programmierung in JavaScript

 

 

Anzeigen:
© 2014 Microsoft