Windows Dev Center

Come gestire gli errori con le promesse (HTML)

A volte non è facile stabilire come gestire le eccezioni nelle varie fasi di una promessa. In Guida introduttiva: uso delle promesse in JavaScript abbiamo descritto come utilizzare una normale promessa della libreria Windows per JavaScript e gestire gli errori nella funzione then.

In questo argomento descriviamo vari metodi per intercettare e gestire gli errori quando si utilizzano le promesse. Non devi implementare tutti i metodi di gestione degli errori descritti, ma piuttosto scegliere quello più adatto alla tua app.

Prerequisiti

  • Il codice usato in questo argomento si basa sull'app creata in Guida introduttiva: uso delle promesse in JavaScript, perciò per seguire meglio ti consigliamo di creare prima l'app. Nota che i colori cui facciamo riferimento di seguito vengono visualizzati come descritto solo se usi il foglio di stile "ui-dark.css".

Istruzioni

Passaggio 1: Attiva le eccezioni first-chance di JavaScript

Se attivi le eccezioni first-chance, sarai in grado di vedere le eccezioni senza dover fare altro per gestirle. In Visual Studio, scegli Eccezioni dal menu Debug e nella finestra di dialogo Eccezioni assicurati che l'opzione Eccezioni in fase di esecuzione di JavaScript sia impostata su Generata. Al termine, esegui l'app in modalità debug. Quando viene generata un'eccezione compare una finestra contenente un messaggio di errore. Questo tipo di finestra di dialogo viene visualizzato solo quando l'applicazione è in esecuzione nel debugger, in questo modo gli utenti non vedono le eccezioni.

Passaggio 2: Aggiungi un gestore di errori a una funzione then o done

Quando usi una promessa, aggiungi una funzione then o done per gestire in modo esplicito il valore della promessa completato (vale a dire, il valore restituito dalla promessa se non ci sono errori) e il valore di errore. Le funzioni then e done assumono entrambe, come parametri facoltativi, tre funzioni (completed, error e progress). Usa la funzione completed per eseguire aggiornamenti dopo che la promessa è stata soddisfatta, la funzione error per gestire gli errori e la funzione progress per visualizzare o registrare lo stato di avanzamento della promessa.

Ci sono un paio di differenze tra then e done:

  • La funzione then restituisce una promessa, ma done non restituisce un valore. Puoi usare le funzioni then come funzioni intermedie in una catena (myPromise().then().then().then()), ma done deve essere l'ultima funzione.

  • Le eccezioni non gestite di una funzione then vengono acquisite automaticamente come parte dello stato della promessa, mentre le eccezioni non gestite di una funzione done vengono generate. Entrambe le funzioni possono gestire eccezioni passate a loro in quanto parte dello stato di una promessa.

Vediamo ora qualche metodo per gestire gli errori nelle funzioni then e done. In questo esempio creeremo una catena di due funzioni then, dove la prima funzione then passa un errore alla seconda.

  1. Nel progetto TestPromise aggiungi un secondo elemento DIV e associalo all'ID "div2":

    
    <div id="div2">Second</div>
    
    
  2. Nel gestore modifiche, rimuovi il gestore errori dalla funzione then e recupera il secondo elemento DIV:

    
    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. Aggiungi una seconda funzione then e aggiungi a questa una funzione fulfilled che cambia il colore del secondo elemento DIV in caso di risultato positivo. Aggiungi a quella funzione il gestore di errori originario.

    
    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. Quando esegui questo codice nel debugger, prova a immettere un URL non valido. Come puoi vedere, l'esecuzione inserisce la funzione di errore nella seconda funzione then. Di conseguenza, il primo elemento DIV dovrebbe essere di colore rosso e il secondo DIV di colore nero.

Nell'esempio che segue rimuoveremo la funzione error dalla seconda funzione then e aggiungeremo una funzione done senza gestore di errori

  1. Nel progetto TestPromise aggiungi un secondo elemento DIV con un elemento "div2", se non lo hai già fatto.

  2. Modifica il gestore di modifiche in modo da rimuovere la funzione error dalla seconda funzione then e aggiungi una funzione done che faccia diventare blu il secondo elemento DIV. Il codice del gestore di modifiche sarà simile al seguente:

    
    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. Quando esegui questo codice nel debugger, prova a immettere un URL non valido. Dovresti vedere una finestra contenente un messaggio di errore. Il primo e il secondo elemento DIV dovrebbero essere entrambi di colore nero perché il codice delle funzioni then o della funzione done non è stato eseguito.

Passaggio 3: Aggiungi un gestore WinJS.promise.onerror

L'evento onerror si verifica tutte le volte che in una promessa è presente un errore di runtime. Puoi utilizzare il gestore di errori per impostare punti di interruzione durante il debug o per attività di gestione generali, ad esempio la registrazione degli errori. Siccome si tratta di un meccanismo di gestione degli errori generali, potresti non ricevere molti dettagli sul codice o sull'input dell'utente che ha causato l'errore.

Ecco come aggiungere un gestore di errori generali.

  1. Nel progetto TestPromise, rimuovi la funzione then dal codice changeHandler. La funzione changeHandler risultante dovrebbe avere questo aspetto:

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
    
        WinJS.xhr({url: e.target.value});
    }
    
    
    
  2. Crea una funzione di gestione degli errori generali e sottoscrivi l'evento onerror nel gestore dell'evento app.activated:

    
    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;
        }
    
    
    

    L'evento di errore fornisce informazioni generali sull'errore, ad esempio l'eccezione, la promessa in cui si è verificato e lo stato corrente della promessa (che è sempre error). È però probabile che non fornisca tutte le informazioni che ti servono per gestire correttamente l'errore. Può tuttavia fornire informazioni utili sugli errori che non gestisci in modo esplicito in altri punti del codice.

Argomenti correlati

Programmazione asincrona in JavaScript

 

 

Mostra:
© 2015 Microsoft