Schnellstart: Verwenden von Zusagen (HTML)

Applies to Windows and Windows Phone

Sie können Ihre UI dynamischer gestalten, indem Sie einige Prozessarten asynchron ablaufen lassen. Damit bleibt der UI-Thread der App frei und kann auf Benutzereingaben reagieren. In dieser Schnellstartanleitung erfahren Sie, wie die asynchrone Programmierung in Ihren Windows-Runtime-Apps funktioniert.

Asynchrone APIs in der Windows-Bibliothek für JavaScript und Windows-Runtime werden in JavaScript als Zusagen dargestellt, die im Vorschlag Common JS Promises/A (Gängige JS-Zusagen/A) definiert sind. Weitere Informationen zu asynchroner Programmierung und Zusagen finden Sie in Asynchrone Programmierung in JavaScript.

Ihr Code wird zuverlässiger, wenn Sie mit Zusagen eine gewisse Fehlerbehandlung einbeziehen. Dieser Schnellstart befasst sich nur mit einer der vielen Möglichkeiten, wie Sie Fehler behandeln können. Weitere Informationen finden Sie in Behandeln von Fehlern mit Zusagen in JavaScript.

Voraussetzungen

Für diese Schnellstartanleitung müssen Sie eine allgemeine Windows-Runtime-App erstellen können, die WinJS verwendet. Informationen zum Erstellen Ihrer ersten App finden Sie unter Erstellen Ihrer ersten Windows-Runtime-App mit JavaScript.

Anweisungen

1. Verwenden einer Funktion, die eine Zusage zurückgibt

Sehen wir uns ein einfaches Beispiel einer Zusage an. Wir erstellen eine App, die mit einer URL eine Site aufrufen und dann melden soll, ob das funktioniert hat.

  1. Erstellen Sie eine leere Windows-Runtime-App namens TestPromise.

  2. Fügen Sie ein INPUT-Element hinzu.

    
    <div>
    <input id="inUrl" />
    </div>
    
    
  3. Fügen Sie ein DIV-Element hinzu, mit dem das Ergebnis für die URL angezeigt wird.

    
    <div id="divResult">Result</div>
    
    
  4. Fügen Sie folgende Stilanweisungen zu "default.css" hinzu.
    
    input {
       
    }
    
    
  5. Fügen Sie einen Änderungshandler für das INPUT-Element hinzu. Sie können dies im Rahmen der WinJS.Utilities.ready-Funktion tun. Sie wird direkt nach dem DOMContentLoaded-Ereignis aufgerufen. Dieses Ereignis wird nach dem Analysieren der Seite, jedoch vor dem Laden aller Ressourcen ausgelöst.

    Fügen Sie den folgenden Code zum app.onactivatedEreignishandler in "default.js" hinzu.

    
    WinJS.Utilities.ready(function () {
        var input = document.getElementById("inUrl");
        input.addEventListener("change", changeHandler);
      }, false);
    
    
  6. Rufen Sie im Änderungshandler xhr auf, um in der URL den eingegebenen Benutzer zu übergeben und das result-DIV-Element mit dem Ergebnis zu aktualisieren. Die xhr-Funktion gibt eine Promise zurück. Wir können dann mit der then- oder done-Funktion der Zusage die UI aktualisieren. Die then-Methode wird ausgeführt, sobald die xhr-Funktion erfolgreich XmlHttpRequest ausgeführt oder einen Fehler empfangen hat. Die done-Funktion ist dieselbe, außer dass sie sicher einen Fehler auslöst, der nicht innerhalb der Funktion gehandhabt wird.

    Sie können für then oder done bis zu drei Parameter bereitstellen: eine completed-Funktion, die die Zusage verarbeitet (wenn diese fehlerfrei erfüllt wurde), eine error-Funktion, die Fehler verarbeitet, und eine progress-Funktion, die den Verlauf der Zusage bis zu ihrem Abschluss anzeigt. Hier erklären wir jedoch zunächst nur, wie die completed-Funktion hinzugefügt wird, und zeigen die Fehlerbehandlung in einem anderen Schritt. Die completed-Funktion legt die Hintergrundfarbe für das result-DIV-Element auf Grün und den Text auf "Success" (Erfolg) fest.

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
    
        WinJS.xhr({ url: e.target.value }).then(function completed(result) {
            if (result.status === 200) {
                 resDiv.style.backgroundColor = "lightGreen";
                 resDiv.innerText = "Success";
             }
         });
     }
    
    
  7. Erstellen und Debuggen Sie die App, und geben Sie dann die URL ein. (Nachdem Sie die URL eingegeben haben, müssen Sie möglicherweise außerhalb des INPUT-Steuerelements klicken, damit das Änderungsereignis eintritt.) Ist die URL gültig, wird das result-DIV-Element grün und zeigt "Success" an. Wenn Sie eine ungültige URL eingeben, geschieht nichts.

2. Behandeln von Fehlern

  1. Fügen Sie für die Fehlerbehandlung eine error-Funktion innerhalb der then-Funktion hinzu, mit der die Hintergrundfarbe der Schaltfläche Success auf rot und der Text auf die Fehlermeldung (sofern vorhanden) gesetzt wird.

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
    
        WinJS.xhr({url: e.target.value}).then(
            function fulfilled (result) {
                if (result.status === 200) {
                    resDiv.style.backgroundColor = "lightGreen";
                    resDiv.innerText = "Success";
                }
            }, 
            function error(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";
                }
        });
    }
    
    
  2. Erstellen und Debuggen Sie die App. Wenn Sie eine ungültige URL eingeben, wird die Schaltfläche rot und zeigt die Fehlermeldung an.

Zusammenfassung und nächste Schritte

In dieser Schnellstartanleitung haben Sie erfahren, wie Sie eine Funktion verwenden, die eine Zusage zurückgibt, und Sie haben eine Art der Fehlerbehandlung kennengelernt.

In den folgenden Themen werden komplexere Szenarios mit Zusagen behandelt:

Verwandte Themen

Asynchrone Programmierung in JavaScript

 

 

Anzeigen:
© 2014 Microsoft