Primeiros passos com promessas JavaScript

Código assíncrono é útil para executar tarefas que são demorado mas, claro, é não desprovido de cons. Usos de código assíncrono funções de callback para processar seus resultados, no entanto, funções de callback não pode retornar valores que funções JavaScript típicas podem.

Assim, eles não apenas eliminam nossa capacidade de controlar execução da função mas também fazer tratamento de erros um pouco de aborrecimento. É aqui que o Promessa objeto vem, como pretende preencher algumas das buracos na codificação assíncrona.

Promessa é tecnicamente um objeto interno padrão em JavaScript, o que significa que vem integrado ao JavaScript. É usado para representar o resultado eventual de um bloco de código assíncrono (ou a razão pela qual o código falhou) e tem métodos para controlar a execução do código assíncrono.

Sintaxe

Nós podemos criar uma instância do Promessa objeto usando o Novo palavra chave:

 nova promessa (função (resolver, rejeitar) ); 

A função passado como parâmetro ao Promessa() construtor é conhecido como o executor. Ele contém o código assíncrono e tem dois parâmetros do Função tipo, referido como resolver e rejeitar funções (mais sobre estes em breve).

Estados do Promessa objeto

o Estado inicial de um Promessa objeto é chamado pendente. Neste estado, o resultado da computação assíncrona não existe.

O estado inicial pendente muda para realizada estado quando o cálculo é bem sucedido. o resultado do cálculo está disponível neste estado.

Caso o cálculo assíncrono falha, a Promessa objeto se move para o rejeitado estado de sua inicial pendente Estado. Neste estado, o razão da falha de computação (isto é, mensagem de erro) é disponibilizada.

Para ir de pendente para realizada Estado, resolver() é chamado. Para ir de pendente para rejeitado Estado, rejeitar() é chamado.

o então e pegar métodos

Quando o estado muda de pendente para realizada, o manipulador de eventos do Promessa Objeto então método É executado. E quando o estado muda de pendente para rejeitado, o manipulador de eventos do Promessa Objeto pegar método É executado.

Exemplo 1

“Não prometido” código

Suponha que haja um ola.txt arquivo contendo o “Olá” palavra. Veja como podemos escrever um pedido AJAX para buscar esse arquivo e mostre seu conteúdo, sem usar o Promessa objeto:

 function getTxt () deixa xhr = novo XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (esta.response); pausa; case 404: lance 'Arquivo não encontrado'; padrão: throw 'Falha ao buscar o arquivo';  catch (err) console.log (err);  getTxt (); 

Se o conteúdo do arquivo foi buscado com sucesso, ou seja,. o código de status de resposta é 200, o texto de resposta é escrito no documento. Se o arquivo for não encontrado (status 404), uma “Arquivo não encontrado” mensagem de erro é lançada. Caso contrário, um mensagem de erro geral indicando a falha de buscar o arquivo é lançado.

“Prometido” código

Agora vamos Promisify o código acima:

 function getTxt () return new Promise (função (resolver, rejeitar) deixar xhr = novo XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('texto / simples'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resolver (this.response); case 404: reject ('Arquivo não encontrado'); padrão: reject ('Falha ao buscar o arquivo ');;);  getTxt (). then (função (txt) document.write (txt);). catch (função (err) console.log (err);); 

o getTxt () função está agora codificada para retornar uma nova instância do Promessa objeto, e sua função executora contém o código assíncrono de antes.

Quando o código de status de resposta é de 200, a Promessa é realizada por chamando resolver() (a resposta é passada como o parâmetro de resolver()). Quando o código de status é 404 ou outro, o Promessa é rejeitado usando rejeitar() (com a mensagem de erro apropriada como o parâmetro de rejeitar()).

o manipuladores de eventos para o então() e pegar() métodos do Promessa objeto são adicionado no final.

Quando o Promessa é realizada, o manipulador do então() método é executado. Seu argumento é o parâmetro passou de resolver(). Dentro do manipulador de eventos, o texto de resposta (recebido como argumento) é escrito no documento.

Quando o Promessa é rejeitado, o manipulador de eventos do pegar() método é executado, registrando o erro.

o principal vantagem da versão Promisified acima do código é a tratamento de erros. Em vez de lançar Exceções Não Capturadas - como na versão Não-Prometida - mensagens de falha apropriadas são retornados e registrados.

Mas não é só o retornando do mensagens de falha mas também do resultado do cálculo assíncrono isso pode ser verdadeiramente vantajoso para nós. Para ver isso, precisamos expandir nosso exemplo.

Exemplo 2

“Não prometido” código

Em vez de apenas exibir o texto de ola.txt, eu quero combiná-lo com o “Mundo” palavra e exibi-lo na tela depois de um tempo limite de 2 segundos. Aqui está o código que eu uso:

 function getTxt () deixa xhr = novo XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (concatTxt (this.response)); pausa; case 404: lance 'Arquivo não encontrado'; padrão: throw 'Falha ao buscar o arquivo';  catch (err) console.log (err);  função concatTxt (res) setTimeout (function () retorno (res + 'World'), 2000);  getTxt (); 

No código de status 200, o concatTxt () função é chamada para concatenar o texto de resposta com o “Mundo” palavra antes de escrever no documento.

Mas esse código não funcionará como desejado. o setTimeout () função de retorno de chamada não é possível retornar a string concatenada. O que será impresso no documento é Indefinido porque isso é que concatTxt () devolve.

“Prometido” código

Então, para fazer o código funcionar, vamos Promisify o código acima, Incluindo concatTxt ():

 function getTxt () return new Promise (função (resolver, rejeitar) deixar xhr = novo XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('texto / simples'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resolver (this.response); case 404: reject ('Arquivo não encontrado'); padrão: reject ('Falha ao buscar o arquivo ');;);  função concatTxt (txt) return new Promise (função (resolver, rejeitar) setTimeout (function () resolver (txt + 'World');, 2000););  getTxt (). então ((txt) => return concatTxt (txt);). então ((txt) => document.write (txt);). catch ((err) => console. log (err);); 

Assim como getTxt (), a concatTxt () função também retorna um novo Promessa objeto em vez do texto concatenado. o Promessa retornado por concatTxt () é resolvido dentro função de callback de setTimeout ().

Perto do final do código acima, o manipulador de eventos do primeiro então() método é executado quando o Promessa do getTxt () é realizada, ou seja, quando o arquivo é buscado com sucesso. Dentro desse manipulador, concatTxt () é chamado e a Promessa retornado por concatTxt () é devolvido.

O manipulador de eventos do segundo então() método é executado quando o Promessa retornado por concatTxt () é realizada, ou seja, o tempo limite de dois segundos acabou e resolver() é chamado com a string concatenada como seu parâmetro.

Finalmente, pegar() pega todas as exceções e mensagens de falha de ambas as promessas.

Nesta versão promissora, o “Olá Mundo” string será impresso com sucesso para o documento.