Windows Dev Center

Início rápido: usando objetos Promise (HTML)

Você pode permitir que a interface do usuário tenha maior capacidade de resposta fazendo alguns tipos de processamento de forma assíncrona, deixando o thread da interface do usuário do aplicativo livre para responder à entrada do usuário. Este guia de início rápido mostra como fazer a programação assíncrona em seus aplicativos do Tempo de Execução do Windows.

As APIs assíncronas na Biblioteca do Windows para JavaScript e no Tempo de Execução do Windows são representadas no JavaScript como promessas, que são definidas na proposta Promessas comuns do JS/A. Você pode encontrar mais informações sobre programação assíncrona e promessas em Programação assíncrona em JavaScript

Para dar mais robustez ao seu código, inclua tratamento de erros ao usar promessas. Este guia de início rápido mostra apenas uma das muitas formas de manipulação de erros, mas você pode aprender mais em Como manipular erros com promessas em JavaScript.

Pré-requisitos

Para concluir este guia de início rápido, você tem que conseguir criar um aplicativo básico do Tempo de Execução do Windows que use WinJS. Para obter ajuda na criação do seu primeiro aplicativo, consulte Criar seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript.

Instruções

1. Usando uma função que retorna uma promessa

Vejamos um exemplo simples de promessa. Criaremos um aplicativo que pega uma URL, tenta contatar o site e, então, reporta se teve sucesso.

  1. Crie um aplicativo do Tempo de Execução do Windows em branco chamado TestPromise.

  2. Adicione um elemento INPUT.

    
    <div>
    <input id="inUrl" />
    </div>
    
    
  3. Adicione um elemento DIU que exiba os resultado da URL.

    
    <div id="divResult">Result</div>
    
    
  4. Adicione as seguintes instruções de estilo a "default.css".
    
    input {
       
    }
    
    
  5. Adicione um manipulador de alterações para o elemento INPUT. Você pode fazer isso como parte da função WinJS.Utilities.ready. Ela é chamada logo após o evento DOMContentLoaded, que é acionado após a análise da página, mas antes que todos os recursos sejam carregados.

    Adicione o seguinte código ao manipulador de eventos app.onactivated em "default.js".

    
    WinJS.Utilities.ready(function () {
        var input = document.getElementById("inUrl");
        input.addEventListener("change", changeHandler);
      }, false);
    
    
  6. No manipulador de alterações, chame xhr, passando a URL inserida pelo usuário, e atualize o DIV de resultado com o resultado. A função xhr retorna Promise para que seja possível usar a função then ou done da promessa para atualizar a interface do usuário. O método then é executado assim que a função xhr criar XmlHttpRequest com êxito ou obter um erro. A função done é a mesma, a não ser pelo fato de que é garantida para gerar qualquer erro que não seja resolvido dentro da função.

    Você pode incluir até três parâmetros em then ou done: a função completed que manipula a promessa quando é realizada sem erros, a função error que manipula os erros e a função progress que mostra o andamento da promessa até sua conclusão. Agora, vamos mostrar apenas como adicionar a função completed e salvar a manipulação do erro para uma outra etapa. A função completed define a cor da tela de fundo do DIV de resultado como verde e define o texto como "Sucesso".

    
    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. Compile e depure o aplicativo e, então, insira uma URL. (Depois que você inserir a URL, talvez precise clicar fora do controle INPUT para que a alteração do evento seja aplicada.) Se a URL for válida, o DIV de resultado deverá ficar verde e exibir "Sucesso". Se você inserir uma URL inválida, nada acontecerá.

2. Manipulando erros

  1. Para manipular erros, adicione uma função error dentro da função then que defina a cor da tela de fundo do botão Sucesso como vermelho e o texto como a mensagem de erro, caso haja alguma.

    
    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. Compile e depure o aplicativo. Se você inserir uma URL inválida, o botão ficará vermelho e exibirá a mensagem de erro.

Resumo e próximas etapas

Neste guia de início rápido, você aprendeu a usar uma função que retorna uma promessa e a realizar um tipo de manipulação de erros.

Os tópicos seguintes explicam cenários mais complexos com promessas:

Tópicos relacionados

Programação assíncrona em JavaScript

 

 

Mostrar:
© 2015 Microsoft