Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Executando Promises com JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

Portuguese (Português) translation by Rafael Corrêa Gomes (you can also view the original English article)

JavaScript, através da sua popularidade e melhorias recentes, é cada vez mais melhor amigo do programador web. E como todos os melhores amigos, JavaScript mantém suas promessas.

Agora isso pode soar um pouco estranho, mas é verdade. Navegadores mais atuais apoiar o que é chamado o objeto da promessa. Uma promessa é como uma função em que representa um pedaço de código ou uma tarefa que você gostaria de ser executado em algum momento no futuro.

Aqui é o que parece uma promessa.

Você pode ver aqui que quando criamos uma promessa, que nós dar-lhe um único argumento, que é uma função que contém código que gostaríamos de executar em algum momento no futuro. Você pode ter também ter notado os dois argumentos na função passado para a promessa, resolve e reject. Estes são também funções e são nossa maneira de dizer que a promessa se ele fez o que prometeu fazer. Isto é como você os usaria:

Esta promessa é obviamente sempre vai resolver como, if a instrução sempre será verdade. Isto é apenas para fins de aprendizagem — vamos fazer algo mais realista mais tarde — mas imagine substituindo o true com um trecho de código que você não estava 100% de certeza que ia funcionar.

Agora que criamos uma promessa, como podemos usá-lo? Bem, precisamos contar quais são as funções de resolve e reject. Podemos fazer isso usando do promessa o método then.

Porque nossa se declaração é sempre passando true seleção, o código acima sempre registrará "Olá Tuts + fãs!" para o console. Também vai fazer isso imediatamente. Isso ocorre porque o código dentro do construtor da nossa promessa é síncrono, significando que ele não esteja à espera qualquer operação para executar. Tem todas as informações que precisa para continuar e fá-lo logo que possível.

Onde promessas realmente brilham, porém, é quando se trata de tarefas assíncronas — tarefas onde você não sabe quando exatamente a promessa será cumprida. Um exemplo real de uma tarefa assíncrona está buscando um recurso, como um arquivo JSON, por exemplo, através de AJAX. Não sabemos quanto tempo o servidor vai levar para responder, e pode falhar. Vamos adicionar em algumas AJAX ao nosso código de promessa.

O código aqui é só padrão JavaScript para executar uma solicitação AJAX. Solicitamos um recurso, neste caso um JSON em um URL especificado do arquivo e esperar por ele para responder. Nós nunca saberemos exatamente quando. E obviamente não queremos interromper a execução do script para esperá-lo, então o que vamos fazer?

Bem, felizmente nós colocamos esse código dentro de uma promessa. Colocando-as aqui, estamos basicamente dizendo, "Hey pedaço de código, eu tenho que ir agora, mas eu vou te ligar mais tarde e diz-te quando executar. Promise você fá-lo e dizer-me quando acabares?" E o código vai dizer, "Sim, claro. Eu prometo."

Uma coisa importante a notar na parte superior do código é o chamamento das funções de resolve e reject. Lembre-se, estas são nossa maneira de dizer a nossa promessa que nosso código tem ou não tem executado com êxito. Caso contrário, nós nunca saberemos.

Usando o mesmo código do nosso exemplo básico, podemos ver como o nosso pedido de AJAX dentro a promessa agora vai funcionar.

Eu sabia que podia confiar em você, myPromise.

Encadeamento de promessas

Agora, você pode estar pensando neste momento que as promessas são funções de callback apenas fantasia com uma sintaxe mais agradável. Isso é verdadeiro para um grau, mas para continuar com nosso exemplo de AJAX, disse que precisava de fazer mais alguns pedidos, cada pedido com base no resultado da última. Ou se você precisava processar o JSON primeiro?

Fazendo isso com retornos de chamada acabaria em pesados aninhamento de funções, cada um cada vez mais difícil de acompanhar. Felizmente, no mundo das promessas nós pode encadear tal como de funções juntos então. Aqui está um exemplo onde assim que recebermos o JSON para o comentário de um usuário em nosso blog falso, então nós queremos certificar-se de que é tudo em minúsculas antes de fazer alguma coisa com isso.

Você pode ver aqui que enquanto nossa chamada inicial foi assíncrona, é possível encadear chamadas síncronas também. O código em cada função resolve dentro do then será chamado quando cada um retorna. Você vai notar também que não há somente um erro função especificada aqui para toda a cadeia. Colocando isso no final da cadeia como a função de reject na última then, qualquer promessa da cadeia que chama reject chamará este.

Agora que estamos um pouco mais confiantes com promessas, vamos criar outro em conjunto com o acima. Vamos criar um que leva nossa minúsculas nova endereço de e-mail e vontade (fingir) envie um e-mail para esse endereço. Este é apenas um exemplo para ilustrar algo assíncrona — pode ser qualquer coisa, como entrar em contato com um servidor para ver se o e-mail foi sobre uma lista branca, ou se o usuário está logado. Vamos precisar dar o endereço de e-mail para a nova promessa, mas promessas não aceitam argumentos. A maneira de contornar isso é encapsular a promessa em uma função que, desta forma:

Estamos usando a chamada setTimeout aqui simplesmente falsificar uma tarefa que leva poucos segundos para executar de forma assíncrona.

Então, como usamos nossa função nova promessa de criação? Desde que cada um resolve função usada dentro um then deve retornar uma função, então podemos usá-lo em uma maneira similar às nossas tarefas síncronas.

Vamos rever este fluxo só para resumir o que está acontecendo. Nossa myPromise promessa original solicita um pedaço de JSON. Quando esse JSON é recebido (não sabemos quando), podemos transformar o JSON em um objeto JavaScript e retornar esse valor.

Depois disso, podemos obter o endereço de e-mail fora do JSON e torná-lo em minúsculas. Em seguida, enviamos um e-mail para esse endereço, e novamente não sabemos quando vai terminar, mas quando ele faz nós vai saída uma mensagem de sucesso para o console. Não pesados aninhando à vista.

Conclusão

Espero que esta foi uma introdução útil para promessas e lhe deu um bom motivo para começar a usá-los em seus projetos de JavaScript. Se você quer aprender mais sobre promessas mais pormenorizadamente, confira o excelente artigo de HTML5 Rocks de Jake Archibald sobre este assunto.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.