Como escrever um código JavaScript mais elegante com promessas

Você pode ter ouvido promessas, e muitas pessoas estão falando sobre isso, usando, mas não sabe por que elas são tão especiais. Você não pode usar retornos de chamada? O que é especial? Neste artigo, vamos dar uma olhada no que são promessas e como usá -los para escrever um código JavaScript mais elegante.

Promessas fáceis de ler

Por exemplo, queremos obter alguns dados da API HipsterJesus e adicionar esses dados à nossa página. Os dados de resposta dessas APIs são os seguintes:

 {"text": "<p> Lorem ipsum ... </p>", "params": {"paras": 4, "tipo": "hipster-latin"}}

Para usar retornos de chamada, geralmente escrevemos algo como o seguinte:

 $ .getjson ('http://hipsterjesus.com/api/', function (data) {$ ('body'). Append (data.text);});

Se você tiver experiência em usar o jQuery, reconhecerá que criamos uma solicitação GET e queremos que a resposta seja JSON. Também passamos uma função de retorno de chamada para aceitar o JSON da resposta para adicionar os dados ao documento.

Outra maneira de escrever é usar o objeto Promise devolvido pelo método getjson. Você pode vincular um retorno de chamada diretamente a este objeto de retorno.

 var prometo = $ .getjson ('http://hipsterjesus.com/api/'); promessa.done (function (data) {$ ('body'). append (data.text);});

No exemplo de retorno de chamada acima, ele adiciona o resultado da solicitação da API ao documento quando a resposta for bem -sucedida. Mas o que acontece quando a resposta falha? Podemos vincular um processador com falha em nossa promessa.

 var prometo = $ .getjson ('http://hipsterjesus.com/api/'); promessa.done (function (dados) {$ ('body'). append (data.text);}); prometo.fail (function () {$ ('body'). Append ('<p> oh não, algo hold hour hour hedro

A maioria das pessoas exclui a variável Promise, que é mais concisa e pode ver a função do código rapidamente.

 $ .getjson ('http://hipsterjesus.com/api/') .done (function (dados) {$ ('body'). Append (data.text);}). Fail (function () {$ ('body'). Append ('<p> oh, não, algo foi errado! </p>');

O JQuery também contém um manipulador de eventos que acontece o tempo todo e será chamado independentemente do sucesso ou falha da solicitação.

 $ .getjson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('corpo'). append (data.text);}). falha (function () {$ ('body'). append ('<p> oh, não, algo foi errado! </p>'); prometa isso sempre será adicionado!. </p> ');

Ao usar as promessas, a ordem dos retornos de chamada é o esperado. Podemos garantir que o retorno de chamada normal seja chamado primeiro, depois o retorno de chamada com falha e, finalmente, o retorno de chamada que continua acontecendo.

Melhor API

Por exemplo, queremos criar um objeto encapsulado da API do hipsterjesus. Adicionaremos um método - html, que retorna dados HTML da API. Ao contrário da configuração de um processador de retorno de chamada para analisar solicitações, podemos fazer com que o método retorne um objeto Promise.

 var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }};

Isso é legal, para que possamos ignorar o objeto Promise sem nos preocupar com quando ou como analisar seu valor. Qualquer código que exija um valor de retorno de promessa pode ser registrado com um retorno de chamada de resposta bem -sucedido.

O método então nos permite modificar o resultado da promessa e passá -lo para o próximo processador na cadeia. Isso significa que agora podemos usar a nova API assim:

 hipsterjesus.html (). feito (function (html) {$ ("corpo"). Appender (html);});

Até recentemente, o AngularJS tem um recurso assassino, onde os modelos podem estar diretamente vinculados às promessas. No controlador do Angular, como este:

 $ scope.hipsteripsum = $ http.get ('http://hipsterjesus.com/api/');

Dessa maneira, é muito fácil escrever {{hipsteripsum.text}} no modelo. Quando a promessa resolve, o Angular não precisa atualizar automaticamente a visualização. Infelizmente, a equipe Angular abandonou esse recurso. Agora ele pode ser ativado ligando para $ parseprovider.unwrapromises (true). Espero que o Angular já tenha esse recurso incluído em outras estruturas (vou ficar de olho nele).

Chamada de cadeia

A melhor parte da promessa é que você pode amarrá -los. Por exemplo, queremos adicionar um método a uma API que retorne uma matriz.

 var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }, parágrafos: function () {return this.html (). Então (function (html) {return html.replace (/<[^>]+>/g, "") .split ("");}); }};

Usamos esse método HTML no método acima, usamos -o no método dos parágrafos. Como o valor de retorno da função de retorno de chamada promessa é passado para o próximo retorno de chamada na cadeia, somos livres para criar métodos pequenos e funcionais para alterar os dados ao passar por eles.

Podemos conectar promessas a qualquer momento, conforme necessário. Vamos adicionar um.

 var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }, parágrafos: function () {return this.html (). Então (function (html) {return html.replace (/<[^>]+>/g, "") .split ("");}); }, frases: function () {return this.paragraphs (). Então (function (parágrafos) {return [] .concat.apply ([], paragraphs.map (function (parágrafo) {return parágrafo.split ( /.);});}); }};

Várias chamadas

Talvez a característica mais proeminente da promessa seja a capacidade de chamar várias APIs. O que acontece se você precisar criar duas chamadas de API ao mesmo tempo ao usar um retorno de chamada? Você pode escrever isso:

 var FirstData = null; var SecondData = null; var responseCallback = function () {if (! FirstData ||! SecondData) return; // faça algo} $. get ("http://example.com/first", function (dados) {FirstData = data; responseCallback ();}); $ .get ("http://example.com/second", function (data) {SecondData = data; Responsecallback ();});

Isso é muito mais fácil de usar a promessa:

 var FirstPromise = $ .get ("http://example.com/first"); var sechPromise = $ .get ("http://example.com/second"); $ .When (FirstPromise, SecondProme) .Done (function (FirstData, SecondData) {// faça algo});

Aqui, usamos o método quando ligá -lo a um processador chamado quando ambas as solicitações são concluídas.

para concluir

Isso é promessa. Espero que você pense imediatamente em algumas coisas terríveis que podem ser alcançadas com promessa. O que você mais gosta em usá -los? Diga -me nos comentários!

*Nota: Para simplificar, este artigo usa a execução tardia do jQuery. Existem diferenças sutis entre o objeto diferido do jQuery e as promessas/a+ especificação, o que é mais padrão.

O artigo acima como usar as promessas de escrever um código JavaScript mais elegante é todo o conteúdo que compartilho com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.