Como manipular erros com promessas

Como manipular erros com objetos Promise (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Às vezes é difícil saber como manipular as exceções nos diferentes estágios de uma promessa. No Guia rápido: usando as promessas no JavaScript nós mostramos como usar a Biblioteca básica do Windows para JavaScript e como manipular erros na função then.

Nesse tópico mostramos várias formas de encontrar e manipular erros ao usar as promessas. Você não precisa implementar todos os tipos de manipulação de erro, mas deve selecionar o respectivo tipo de manipulação que melhor se adapte ao seu aplicativo.

Pré-requisitos

  • O código neste tópico baseia-se no aplicativo criado no Guia rápido: usando as promessas no JavaScript, dessa forma, se deseja continuar, é necessário criar o aplicativo primeiro. Observe que as cores mencionadas abaixo serão exibidas como publicadas apenas se você usar a folha de estilos "ui-dark.css".

Instruções

Etapa 1: Ativar exceções de primeira chance no JavaScript

Se você ativar as exceções de primeira chance , poderá ver as exceções sem precisar fazer nada mais para manipulá-las. No Visual Studio, no menu Depurar, selecione Exceções, e na caixa de diálogo Exceções, verifique se as Exceções de tempo de execução do JavaScript estão selecionadas para serem Lançadas. Ao fazer isso, execute o aplicativo no modo de depuração. Quando uma exceção é lançada, você vê uma caixa de mensagens que exibe um erro. Você vê essa caixa de diálogo apenas quando o aplicativo está sendo executado no depurador, assim, os usuários não veem as exceções.

Etapa 2: Adicionar um manipulador de erro em uma função existente ou concluída

Ao usar uma promessa, você deve adicionar uma função then ou done para manipular explicitamente o valor completo da promessa (ou seja, o valor que é retornado pela promessa caso não ocorra nenhum erro) e o valor de erro. Ambos then e done assumem três funções (completed, error, e progress) como parâmetros opcionais. A função completed é usada para realizar atualizações após o preenchimento da promessa, a função error é usada para manipular os erros e a função progress para exibir ou registrar o progresso que a promessa está criando.

Há diversas diferenças entre then e done:

  • A função then retorna uma promessa, mas done não retorna um valor. Você pode usar as funções then como funções intermediárias em uma cadeia (myPromise().then().then().then()), mas done deve ser a última função.

  • As exceções não manipuladas em uma função then são capturadas de forma silenciosa como parte do estado da promessa, mas as exceção não manipuladas em uma função done são lançadas. As duas funções podem manipular as exceções que foram passadas a elas como parte do estado da promessa.

Vamos verificar algumas formas de manipular erros nas funções then e done. Neste exemplo, nós configuramos uma cadeia de duas funções then onde a primeira then transmite um erro para a segunda.

  1. No projeto TestPromise, adicione um segundo elemento DIV e identifique-o como "div2":

    
    <div id="div2">Second</div>
    
    
  2. No manipulador de alteração, remova o manipulador de erro da função then, e obtenha o segundo 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. Adicione uma segunda função then e adicione à mesma uma função fulfilled que altera a cor do segundo DIV se o resultado for bem-sucedido. Adicione o manipulador de erro original a esta função.

    
    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. Ao executar esse código no depurador, tente inserir uma URL que não seja válida. Você pode ver que a execução insere a função de erro na segunda função then. Como resultado, o primeiro DIV deve ser vermelho e o segundo DIV deve ser preto.

No seguinte exemplo, removemos a função error da segunda função then e adicionamos uma função done que não possui um manipulador de erro.

  1. No projeto TestPromise, se você ainda não tiver adicionado um segundo elemento DIV com um elemento de "div2", faça isso agora.

  2. Modifique o manipulador de alteração para remover a função de erro da segunda then e adicione uma função done que torne o segundo DIV azul. O código do manipulador de alteração deve ter esta aparência:

    
    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. Ao executar esse código no depurador, tente inserir uma URL que não seja válida. Você deve ver uma caixa de mensagens exibindo um erro. Ambos os DIVs devem ser pretos, porque nenhum código nas funções then ou na função done foi executado.

Etapa 3: Adicionar um manipulador WinJS.promise.onerror

O evento onerror ocorre sempre que um erro de tempo de execução é encontrado em uma promessa. Você pode usar o manipulador de erro para definir os pontos de interrupção enquanto estiver depurando ou pode fornecer a manipulação de erro geral como por exemplo o log de erros. Mas como trata-se de um mecanismo de manipulação de erro geral, é possível que você não obtenha muitos detalhes sobre o código exato ou a entrada que causou o erro.

Veja como adicionar um manipulador de erro geral:

  1. No projeto TestPromise, remova a função then do código changeHandler. A função changeHandler resultante deve ser similar a isto:

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
    
        WinJS.xhr({url: e.target.value});
    }
    
    
    
  2. Crie uma função de manipulação de erro geral e assine o evento onerror no manipulador de eventos 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;
        }
    
    
    

    O evento de erro fornece informações de erros gerais como por exemplo, a exceção, a promessa onde ocorreu e o estado atual da promessa (o qual sempre é error). Porém, é provável que não forneça todas as informações necessárias para manipular o erro. Além disso, o evento pode fornecer informações úteis sobre erros que você não manipule explicitamente em outro lugar no código.

Tópicos relacionados

Programação assíncrona em JavaScript

 

 

Mostrar:
© 2017 Microsoft