diff options
Diffstat (limited to 'files/pt-br/web/javascript/reference/global_objects/promise')
10 files changed, 1384 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/all/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/all/index.html new file mode 100644 index 0000000000..eec13d056a --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/promise/all/index.html @@ -0,0 +1,245 @@ +--- +title: Promise.all() +slug: Web/JavaScript/Reference/Global_Objects/Promise/all +tags: + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Method + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>Promise.all(iterable)</strong></code> retorna uma única {{jsxref("Promise")}} que resolve quando todas as promises no argumento iterável forem resolvidas ou quando o iterável passado como argumento não contém promises. É rejeitado com o motivo da primeira promise que foi rejeitada.</p> + +<p>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</p> + +<div class="hidden"> +<p>A fonte para essa demonstração interativa está em um repositório no GitHub. Se você quiser contribuir para esse projeto de demonstrações iterativas, por favor, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envienos um pull request.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><var>Promise.all(iterable)</var>;</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt>iterable</dt> + <dd>Um objeto <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Iteration_protocols">iterável</a>, como um {{jsxref("Array")}} ou {{jsxref("String")}}.</dd> +</dl> + +<h3 id="Retorno">Retorno</h3> + +<ul> + <li>Uma {{jsxref("Promise")}}<strong> já resolvida</strong> se o iterável passado for vazio.</li> + <li>Uma {{jsxref("Promise")}} <strong>resolvida assíncronamente</strong> se o iterável passado não conter promises. Nota, Google Chrome 58 retorna uma promise <strong>já resolvida</strong> nesse caso.</li> + <li>Uma {{jsxref("Promise")}} <strong>pendente</strong> em todos os outros casos. Essa promise retornada é então resolvida/rejeitada <strong>assíncronamente</strong> (tão logo a pilha esteja vazia) quando todas as promises no dado iterável forem resolvidas, ou se alguma das promises for rejeitada. Veja o exemplo sobre "Assincronia ou sincronia da Promise.all" abaixo. Os valores retornados estarão na ordem em que as promises foram passadas. independentemente da ordem em que forem concluídas.</li> +</ul> + +<h2 id="Descrição">Descrição</h2> + +<p>Esse método pode ser usado para agregar resultados de várias promises.</p> + +<h3 id="Resolução">Resolução</h3> + +<p>A promise retornada é resolvida com um array contendo <strong>todos</strong> os valores dos iteráveis passados como argumento (como valores que não são promises).</p> + +<ul> + <li>Se um iterável vazio é passado, então esse método retorna (sincronamente) uma promise já resolvida.</li> + <li>Se todas as promises passadas forem resolvidas, ou não forem promises, a promise retornada por <code>Promise.all</code> é resolvida assincronamente.</li> +</ul> + +<h3 id="Rejeição">Rejeição</h3> + +<p>Se qualquer uma das promises passadas for rejeitada, <code>Promise.all</code> assíncronamente é rejeitada com o valor da promise rejeitada, independentemente se outras promises foram resolvidas.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Utilizando_Promise.all">Utilizando Promise.all </h3> + +<p><code>Promise.all</code> espera que todas as promises sejam resolvidas (ou a primeira rejeição).</p> + +<pre class="notranslate"><code class="language-js">var p1 = Promise.resolve(3); +var p2 = 1337; +var p3 = new Promise((resolve, reject) => { + setTimeout(() => { + resolve("foo"); + }, 100); +}); + +Promise.all([p1, p2, p3]).then(valores=> { + console.log(valores); // [3, 1337, "foo"] +});</code> +</pre> + +<p>Se o iterável conter valores que não são promises, eles serão ignorados, mas ainda serão contados no array da promise retornada (se a promise for resolvida):</p> + +<pre class="notranslate"><code class="language-js">// Essa será considerada como se o iterável passado fosse vazio, logo ela será resolvido +var p = Promise.all([1,2,3]); +// Essa será considerada como se o iterável passado contém apenas a promise resolvida com o valor "444", logo ela é resolvida +var p2 = Promise.all([1,2,3, Promise.resolve(444)]); +// Esse será considerada como se o iterável passado contém apenas o valor de rejeição "555" da promise, logo ela é rejeitada +var p3 = Promise.all([1,2,3, Promise.reject(555)]); + +// Utilizando setTimeout para executar código depois que a pilha estiver vazia +setTimeout(function() { + console.log(p); + console.log(p2); + console.log(p3); +}); + +// logs +// Promise { <estado>: "resolvida", <valor>: Array[3] } +// Promise { <estado>: "resolvida", <valor>: Array[4] } +// Promise { <estado>: "rejeitada", <razão>: 555 }</code> +</pre> + +<h3 id="Assincronia_ou_sincronia_da_Promise.all">Assincronia ou sincronia da Promise.all</h3> + +<p>O exemplo a seguir demonstra a assincronia (ou sincronia, se o iterável passado for fazio) de <code>Promise.all</code>:</p> + +<pre class="notranslate"><code class="language-js">// Passamos o argumento como um array de promises que já estão resolvidas para disparar Promise.all a mais rápido possível +var arrayPromisesResolvidas = [Promise.resolve(33), Promise.resolve(44)]; + +var p = Promise.all(arrayPromisesResolvidas); +// Logando imediatamente o valor de p +console.log(p); + +// Utilizando setTimeout para executar código depois que a pilha estiver vazia +setTimeout(function() { + console.log('a pilha está vazia agora'); + console.log(p); +}); + +// logs, em ordem: +// Promise { <estado>: "pendente" } +// a pilha está vazia agora +// Promise { <estado>: "resolvida", <valor>: Array[2] }</code> +</pre> + +<p>A mesma coisa acontece se <code>Promise.all</code> for rejeitada:</p> + +<pre class="notranslate"><code class="language-js">var arrayPromisesMisturadas = [Promise.resolve(33), Promise.reject(44)]; +var p = Promise.all(arrayPromisesMisturadas); +console.log(p); +setTimeout(function() { + console.log('a pilha está vazia agora'); + console.log(p); +}); + +// logs +// Promise { <estado>: "pendente" } +// a pilha está vazia agora +// Promise { <estado>: "rejeitada", <razão>: 44 }</code> +</pre> + +<p>Mas, <code>Promise.all</code> resolve sincromamente <strong>se e somente se</strong> o iterável passado for vazio:</p> + +<pre class="notranslate"><code class="language-js">var p = Promise.all([]); // será resolvida imediatamente +var p2 = Promise.all([1337, "oi"]); // um valor que não é uma promise será ignorado, mas a avaliação será feita assíncronamente +console.log(p); +console.log(p2) +setTimeout(function() { + console.log('a pilha está vazia agora'); + console.log(p2); +}); + +// logs +// Promise { <estado>: "resolvida", <valor>: Array[0] } +// Promise { <estado>: "pendente" } +// a pilha está vazia agora +// Promise { <estado>: "resolvida", <valor>: Array[2] }</code> +</pre> + +<h3 id="Comportamente_de_falhar_rapidamente_de_Promise.all">Comportamente de falhar rapidamente de Promise.all</h3> + +<p><code>Promise.all</code> é rejeitada se qualquer um dos elementos for rejeitado. Por exemplo, se você passar quartro promises que resolvem após um intervalo de tempo e uma promise que rejeita imediatamente, então <code>Promise.all</code> será rejeitada imediatamente.</p> + +<pre class="notranslate"><code class="language-js">var p1 = new Promise((resolve, reject) => { + setTimeout(() => resolve('um'), 1000); +}); +var p2 = new Promise((resolve, reject) => { + setTimeout(() => resolve('dois'), 2000); +}); +var p3 = new Promise((resolve, reject) => { + setTimeout(() => resolve('três'), 3000); +}); +var p4 = new Promise((resolve, reject) => { + setTimeout(() => resolve('quatro'), 4000); +}); +var p5 = new Promise((resolve, reject) => { + reject(new Error('rejeitada')); +}); + + +// Usando .catch: +Promise.all([p1, p2, p3, p4, p5]) +.then(valores => { + console.log(valores); +}) +.catch(erro => { + console.log(erro.message) +}); + +// No console: +// "rejeitada"</code> +</pre> + +<p>É possível mudar esse comportamente lidando com possíveis rejeições:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var p1 = new Promise((resolve, reject) => { + setTimeout(() => resolve('p1_resolução_atrasada'), 1000); +}); + +var p2 = new Promise((resolve, reject) => { + reject(new Error('p2_rejeição_imediata')); +}); + +Promise.all([ + p1.catch(erro => { return erro }), + p2.catch(erro => { return erro }), +]).then(valores => { + console.log(valores[0]) // "p1_resolução_atrasada" + console.log(valores[1]) // "Erro: p2_rejeição_imediata" +})</code></pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> + <p>Definição inicial em um padrão ECMA.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_browsers">Compatibilidade com browsers</h2> + +<div class="hidden"> +<p>Para contribuir para esse dado de compatibilidade, por favor, escreva um pull request para o repositório: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> +</div> + +<p>{{Compat("javascript.builtins.Promise.all")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.race()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/allsettled/index.html new file mode 100644 index 0000000000..770a4fd3a7 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/promise/allsettled/index.html @@ -0,0 +1,64 @@ +--- +title: Promise.allSettled() +slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +--- +<p>{{JSRef}}</p> + +<p>O método <code><strong>Promise.allSettled()</strong></code> retorna uma promessa que é resolvida após todas as promessas dadas serem resolvidas ou rejeitadas, com um array de objetos que descrevem o resultado de cada promessa.</p> + +<p>É tipicamente usado quando você tem múltiplas tarefas assíncronas que não são dependentes das conclusões umas das outras, ou quando você sempre quer ter o resultado de cada promessa.</p> + +<p>Para comparação, a promessa retornada por {{jsxref("Promise.all()")}} pode ser mais apropriada para tarefas que dependem umas das outras, ou se você precisa que todas as tarefas sejam rejeitadas quando apenas uma é. </p> + +<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><em>promise</em>.allSettled(<em>iterable</em>);</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>Um objeto <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterável</a>, como um {{jsxref("Array")}}, onde cada membro é uma <code>Promise</code>.</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>Uma {{jsxref("Promise")}} <strong>pendente</strong> que vai ser <strong>preenchida assíncronamente</strong> quando todas as promessas na coleção fornecida forem completas, sendo aceitas ou rejeitadas. Quando isso acontecer, é retornado um array contendo um resultado para cada promessa passada como entrada.</p> + +<p>Para cada objeto no array retornado, existe uma string <code>status</code>. Se o status for <code>fulfilled</code>, então o campo <code>value</code> estará presente. Se o status for <code>rejected</code>, então o campo <code>reason</code> estará presente. O valor (value) ou o motivo da falha (reason) refletem o valor com que cada promessa foi completada (ou rejeitada).</p> + +<h2 id="Especificaçṍes">Especificaçṍes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://tc39.es/proposal-promise-allSettled/"><code>Promise.allSettled()</code> (TC39 Stage 4 Draft)</a></td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p class="hidden">Para contribuir com os dados de compatibilidae, por favor faça um pull request nesse repositório: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Archive/Add-ons/Techniques/Promises">Promessas</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Usando promessas</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Programando assincronamente de maneira elegante usando promessas</a></li> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.all()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/catch/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/catch/index.html new file mode 100644 index 0000000000..a39d4576d7 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/promise/catch/index.html @@ -0,0 +1,138 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Reference/Global_Objects/Promise/catch +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +<div>{{JSRef}}</div> + +<div>O método <strong>catch()</strong> retorna uma Promise e lida apenas com casos rejeitados. Ele possui o mesmo comportamento de quando chamamos {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} (de fato, chamando <code>obj.catch(onRejected)</code> internamente é chamado <code>obj.then(undefined, onRejected)</code>).</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><var>p.catch(onRejected)</var>; + +p.catch(function(motivo) { + // rejeição +}); +</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt>onRejected</dt> + <dd>Uma {{jsxref("Function")}} chamada quando a <code>Promise</code> é rejeitada. Esta função possui um argumento:<br> + <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>reason</strong></span></font> da rejeição.<br> + O motivo da rejeição.<br> + <br> + A Promise retornada pelo <code>catch()</code> é rejeitada apenas se <code>onRejected</code> cospe um erro ou se o o retorno da Promise foi rejeitada por si mesmo, ou seja, foi resolvida.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Internamente chamamos <code>Promise.prototype.then</code> sobre o objeto que é chamando passando parâmetros como <code>undefined</code> e <code>onRejected</code> no manipulador de eventos. Então retornamos o valor da chamada que é {{jsxref("Promise")}}.</p> + +<div class="warning"> +<p>O exemplo abaixo está cuspindo uma string. Isso é considerado uma má prática. Sempre cuspir uma instance de erro (Error). Em todo caso, a parte que faz a captura deve fazer verificaçoes sobre os argumentos para saber se é uma string ou um erro e você poderá perder informações valiosas como stack traces.</p> +</div> + +<p><strong>Demonstração de uma camada interna:</strong></p> + +<pre class="brush: js notranslate">// Sobrescrevendo o techo original de Promise.prototype.then/catch adicionando alguns logs +(function(Promise){ + var originalThen = Promise.prototype.then; + var originalCatch = Promise.prototype.catch; + + Promise.prototype.then = function(){ + console.log('> > > > > > chamando .then em %o com argumentos: %o', this, arguments); + return originalThen.apply(this, arguments); + }; + Promise.prototype.catch = function(){ + console.log('> > > > > > chamando .catch em %o com argumentos: %o', this, arguments); + return originalCatch.apply(this, arguments); + }; + +})(this.Promise); + + +// chamando um catch em uma Promise já resolvida. +Promise.resolve().catch(function XXX(){}); + +// logs: +// > > > > > > chamando .catch na Promise{} com os argumentos: Arguments{1} [0: function XXX()] +// > > > > > > chamando .then na Promise{} com os argumentos: Arguments{2} [0: undefined, 1: function XXX()]</pre> + +<h2 id="Description">Description</h2> + +<p>O método <code>catch</code> pode ser útil para manipulação de erros na composição da sua promise.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_o_método_catch">Usando o método <code>catch</code></h3> + +<pre class="brush: js notranslate">var p1 = new Promise(function(resolve, reject) { + resolve('Sucesso'); +}); + +p1.then(function(value) { + console.log(value); // "Sucesso!" + throw 'Ah, não!'; +}).catch(function(e) { + console.log(e); // "Ah, não!" +}).then(function(){ + console.log('Após um catch, a sequencia é restaurada'); +}, function () { + console.log('Não engatilhado devido ao catch'); +}); + +// O seguinte se comporta da mesma maneira que o anterior +p1.then(function(value) { + console.log(value); // "Sucesso!" + return Promise.reject('Ah, não!'); +}).catch(function(e) { + console.log(e); // "Ah, não!" +}).then(function(){ + console.log('Após um catch, a sequencia é restaurada'); +}, function () { + console.log('Não engatilhado devido ao catch'); +}); + +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_browsers">Compatibilidade dos browsers</h2> + + + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.catch")}}</p> + + + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/finally/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/finally/index.html new file mode 100644 index 0000000000..59dff0a6cf --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/promise/finally/index.html @@ -0,0 +1,100 @@ +--- +title: Promise.prototype.finally() +slug: Web/JavaScript/Reference/Global_Objects/Promise/finally +tags: + - JavaScript + - Promises + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>finally()</strong></code> retorna uma {{jsxref("Promise")}}. Quando a promise for estabelecida, tenha ela sido realizada ou rejeitada, executa-se a função callback especificada. Isso permite a execução de um código que acontecerá independentemente da <code>Promise</code> ter sido realizada (com sucesso) ou rejeitada (com falha).</p> + +<p>Assim, você pode evitar a duplicação do código em ambos os handlers {{jsxref("Promise.then", "then()")}} e {{jsxref("Promise.catch", "catch()")}} da <code>Promise</code>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>p.finally(quandoEstabelecida)</var>; + +p.finally(function() { + // concluída (realizada ou rejeitada) +}); +</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>quandoEstabelecida</code></dt> + <dd>Uma {{jsxref("Function")}} chamada quando a <code>Promise</code> é concluída.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Retorna uma {{jsxref("Promise")}} onde o manipulador <code>finally</code> é definido como a função especificada, <code>quandoEstabelecida</code>.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>O método <code>finally()</code> pode ser útil quando você deseja realizar algum tipo de processamento ou limpeza quando a promise for estabelecida, independentemente de seu resultado (sucesso ou falha).</p> + +<p>O método <code>finally()</code> é bastante similar a chamar <code>.then(quandoEstabelecida, quandoEstabelecida)</code>. Porém, existem algumas diferenças:</p> + +<ul> + <li>Ao passar a função na linha (entre os parênteses do método), você precisa passá-la apenas uma vez, ao invés de ser forçado a declará-la duas vezes ou a definir em uma variável.</li> + <li>O callback de <code>finally</code> não poderá receber nenhum argumento, já que não existem meios confiáveis de determinar se a promise foi realizada ou rejeitada. Seu uso é para quando você realmente <em>não se importa</em> com os possíveis motivos de uma falha ou possíveis valores retornados de um sucesso, não tendo, portanto, razão para fornecê-los.</li> + <li>Diferentemente de <code>Promise.resolve(2).then(() => {}, () => {})</code> (será resolvido como <code>undefined</code>), <code>Promise.resolve(2).finally(() => {})</code> será resolvido como <code>2</code>.</li> + <li>De maneira semelhante, diferentemente de <code>Promise.reject(3).then(() => {}, () => {})</code> (que será resolvido como <code>undefined</code>), <code>Promise.reject(3).finally(() => {})</code> será rejeitado como <code>3</code>.</li> +</ul> + +<div class="note"> +<p><strong>Nota:</strong> Um <code>throw</code> (ou retorno de uma promise rejeitada) no callback de <code>finally</code> rejeitará a nova promise com a razão de rejeição especificada na chamada de <code>throw()</code>.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: js">let carregando = true; + +fetch(minhaRequisicao).then(function(resposta) { + var tipoConteudo = response.headers.get("content-type"); + if(tipoConteudo && tipoConteudo.includes("application/json")) { + return resposta.json(); + } + throw new TypeError("Opa, isso não é JSON!"); + }) + .then(function(json) { /* processamento do seu JSON */ }) + .catch(function(erro) { console.log(erro); }) + .finally(function() { carregando = false; }); + +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://github.com/tc39/proposal-promise-finally">TC39 proposal</a></td> + <td>Stage 4</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.finally")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> + <li>{{jsxref("Promise.prototype.catch()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..d3d0e76322 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,174 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - ECMAScript6 + - JavaScript + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef("Global_Objects", "Promise")}}</div> + +<p><strong><code>Promise</code></strong> é um objeto usado para processamento assíncrono. Um <code>Promise</code> (<em>de "promessa"</em>) representa um valor que pode estar disponível agora, no futuro ou nunca.</p> + +<div class="note"> +<p><strong>Nota:</strong> Esse artigo descreve o construtor <code>Promise,</code>os métodos e propriedades de tais objetos. Para aprender sobre como promises funcionam e como utilizá-los, é aconselhavel a leitura de <a href="/pt-BR/docs/Web/JavaScript/Guide/Usando_promises">utilizando promises</a>. O construtor é utilizado para embrulhar funções sem suporte ao conceito "promise".</p> +</div> + +<h2 id="Descrição">Descrição</h2> + +<p>Uma <code><strong>Promise</strong></code> representa um proxy para um valor que não é necessariamente conhecido quando a promessa é criada. Isso permite a associação de métodos de tratamento para eventos da ação assíncrona num caso eventual de sucesso ou de falha. Isto permite que métodos assíncronos retornem valores como métodos síncronos: ao invés do valor final, o método assíncrono retorna uma <em>promessa</em> ao valor em algum momento no futuro.</p> + +<p>Um <strong><code>Promise</code></strong> está em um destes estados: </p> + +<ul> + <li><em>pending (</em>pendente<em>)</em>: Estado inicial, que não foi realizada nem rejeitada.</li> + <li><em>fulfilled (</em>realizada): sucesso na operação.</li> + <li><em>rejected (</em>rejeitado): falha na operação.</li> +</ul> + +<p>Uma promessa pendente pode se tornar <em>realizada</em> com um valor ou <em>rejeitada</em> por um motivo (erro). Quando um desses estados ocorre, o método <code>then</code> do <code>Promise</code> é chamado, e ele chama o método de tratamento associado ao estado (<code>rejected</code> ou <code>resolved</code>). Se a promessa foi realizada ou rejeitada quando o método de tratamento correspondente for associado, o método será chamado, deste forma não há uma condição de competição entre uma operação assíncrona e seus manipuladores que estão sendo associados.</p> + +<p>Como os métodos <code>Promise.prototype.then</code> e <code>Promise.prototype.catch</code> retornam promises, eles podem ser encadeados — uma operação chamada <em>composição</em>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>Propriedade length cujo valor é sempre 1 (número de argumentos do método construtor).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Representa o protótipo para o método construtor da <code>Promise</code>.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(lista)")}}</dt> + <dd>Retorna uma promise que é resolvida quando todas as promises no argumento <em>lista</em> forem resolvidas ou rejeitada assim que uma das promises da lista for rejeitada. Se a promise retornada for resolvida, ela é resolvida com um array dos valores das promises resolvidas da lista. Se a promise for rejeitada, ela é rejeitada com o motivo da primeira promise que foi rejeitada na lista. Este método pode ser útil para agregar resultados de múltiplas promises.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(lista)")}}</dt> + <dd>Retorna uma promise que resolve ou rejeita assim que uma das promises do argumento lista resolve ou rejeita, com um valor ou o motivo daquela promise.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.reject", "Promise.reject(motivo)")}}</dt> + <dd>Retorna um objeto <code>Promise</code> que foi rejeitado por um dado motivo.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.resolve", "Promise.resolve(valor)")}}</dt> + <dd>Retorna um objeto <code>Promise</code> que foi resolvido com um dado valor. Se o valor é <code>thenable</code> (possui um método <code>then</code>), a promise retornada "seguirá" este método, adotando esse estado eventual; caso contrário a promise retornada será realizada com o valor. Geralmente, se você quer saber se um valor é uma promise ou não, utilize {{jsxref("Promise.resolve", "Promise.resolve(valor)")}} e trabalhe com a valor de retorno que é sempre uma promise.</dd> +</dl> + +<h2 id="Protótipo_Promise">Protótipo Promise</h2> + +<h3 id="Propriedades_2">Propriedades</h3> + +<p>{{page('pt-BR/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Propriedades')}}</p> + +<h3 id="Métodos_2">Métodos</h3> + +<p>{{page('pt-BR/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Métodos')}}</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Criando_uma_Promise">Criando uma Promise</h3> + +<pre class="brush: html notranslate" style="display: none;"><button id="btn">Make a promise!</button> +<div id="log"></div> +</pre> + +<p>Este pequeno exemplo mostra o mecanismo de uma <code>Promise</code>. O método <code>testPromise()</code> é chamado cada vez que {{HTMLElement("button")}} é clicado. Isso cria uma promise que resolverá, usando {{domxref("window.setTimeout()")}}, o contador de promise <code>promiseCount</code> (iniciando em 1) a cada 1 a 3s randomicamente. O construtor <code>Promise()</code> é usado para criar a promise.</p> + +<p>A realização da promise é simplesmente registrada, por meio de configuração na função callback de realização usando {{jsxref("Promise.prototype.then()","p1.then()")}}. Alguns logs mostram como a parte síncrona do método é desacoplada da conclusão assíncrona da promise.</p> + +<pre class="brush: js notranslate">var promiseCount = 0; +function testPromise() { + var thisPromiseCount = ++promiseCount; + + var log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Started (<small>Sync code started</small>)<br/>'); + + // Criamos uma nova promise: prometemos a contagem dessa promise (após aguardar 3s) + var p1 = new Promise( + // a função resolve() é chamada com a capacidade para resolver ou + // rejeitar a promise + function(resolve, reject) { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise started (<small>Async code started</small>)<br/>'); + // Isto é apenas um exemplo para criar assincronismo + window.setTimeout( + function() { + // Cumprimos a promessa ! + resolve(thisPromiseCount) + }, Math.random() * 2000 + 1000); + }); + + // definimos o que fazer quando a promise for realizada + p1.then( + // apenas logamos a mensagem e o valor + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise made (<small>Sync code terminated</small>)<br/>'); +} +</pre> + +<pre class="brush:js notranslate" style="display: none;">if ("Promise" in window) { + btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} +else { + log = document.getElementById('log'); + log.innerHTML = "Live example not available as your browser doesn't support the Promise interface."; +} +</pre> + +<p>Este exemplo é executado pelo click do botão. Você precisa de uma versão de navegedor com suporte a <code>Promise</code>. Clicando algumas vezes no botão num curto intervalo de tempo, você verá as diferentes promises sendo realizadas uma após a outra.</p> + +<p>{{EmbedLiveSample("Criando_uma_Promise", "500", "200")}}</p> + +<h3 id="Carregando_uma_imagem_com_XHR">Carregando uma imagem com XHR</h3> + +<p>Outro simples exemplo usando <code>Promise</code> e <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHTTPRequest</a></code> para carregar imagens está disponível no repositório GitHub MDN<a href="https://github.com/mdn/js-examples/blob/master/promises-test/index.html"> promise-test</a>. Você também pode <a href="https://mdn.github.io/js-examples/promises-test/">vê-lo em ação</a>. Cada passo é comentado e lhe permite acompanhar de perto a arquitetura de Promise e XHR.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td><a href="https://github.com/domenic/promises-unwrapping">domenic/promises-unwrapping</a></td> + <td>Draft</td> + <td>Standardization work is taking place here.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2> + +<p>{{Compat("javascript.builtins.Promise")}}</p> + +<p>Veja também</p> + +<ul> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patter in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html new file mode 100644 index 0000000000..a422dd886e --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html @@ -0,0 +1,113 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef("Global_Objects", "Promise")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>A propriedade <code><strong>Promise</strong></code><strong><code>.prototype</code></strong> representa o protótipo para o construtor {{jsxref("Promise")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>{{jsxref("Promise")}} instância herdada de {{jsxref("Promise.prototype")}}. Você pode usar o objeto construtor para adicionar propriedades ou métodos para todas as instâncias de <code>Promise</code>.</p> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>Promise.prototype.constructor</code></dt> + <dd>Retorna a função que cria uma instância. Isso é a função padrão {{jsxref("Promise")}}.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt> + <dd>Adiciona um callback que trata rejeição para a promise e, retorna uma nova promise resolvendo o valor retornado do callback, se ele for chamado, ou para seu valor original de conclusão se a promise for realizada.</dd> + <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt> + <dd>Adiciona os métodos de tratamento da realização e rejeição da promise e, retorna uma nova promise resolvendo para o valor do método chamado.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>32</td> + <td>{{CompatGeckoDesktop(24.0)}} as <code>Future</code><br> + {{CompatGeckoDesktop(25.0)}} as <code>Promise</code> behind a flag[1]<br> + {{CompatGeckoDesktop(29.0)}} by default</td> + <td>{{CompatNo}}</td> + <td>19</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(24.0)}} as <code>Future</code><br> + {{CompatGeckoMobile(25.0)}} as <code>Promise</code> behind a flag[1]<br> + {{CompatGeckoMobile(29.0)}} by default</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + <td>32</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 24 has an experimental implementation of <code>Promise</code>, under the initial name of <code>Future</code>. It got renamed to its final name in Gecko 25, but disabled by default behind the flag <code>dom.promise.enabled</code>. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> enabled Promises by default in Gecko 29.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/race/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/race/index.html new file mode 100644 index 0000000000..13a3c659b5 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/promise/race/index.html @@ -0,0 +1,149 @@ +--- +title: Promise.race() +slug: Web/JavaScript/Reference/Global_Objects/Promise/race +tags: + - ECMAScript6 + - Experimental + - JavaScript + - Method + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>Promise.race(iterable)</strong></code> retorna uma promise que resolve ou rejeita assim que uma das promises no iterável resolver ou rejeitar, com o valor ou razão daquela promise.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>Promise.race(iterable)</var>;</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt>iterable</dt> + <dd>Um objeto iterável, como um {{jsxref("Array")}}. Veja <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterável</a>.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>A função <code>race</code> retorna uma <code>Promise</code> que é estabelecida da mesma forma que a primeira promise passada estabelecer. Ela resolve ou rejeita, o que acontecer primeiro.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_Promise.race_–_exemplos_com_setTimeout">Usando <code>Promise.race</code> – exemplos com <code>setTimeout</code></h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + setTimeout(resolve, 500, "one"); +}); +var p2 = new Promise(function(resolve, reject) { + setTimeout(resolve, 100, "two"); +}); + +Promise.race([p1, p2]).then(function(value) { + console.log(value); // "two" + // Ambos resolvem, mas p2 é mais rápido +}); + +var p3 = new Promise(function(resolve, reject) { + setTimeout(resolve, 100, "three"); +}); +var p4 = new Promise(function(resolve, reject) { + setTimeout(reject, 500, "four"); +}); + +Promise.race([p3, p4]).then(function(value) { + console.log(value); // "three" + // p3 é mais rápido, então ela resolve +}, function(reason) { + // Não é chamado +}); + +var p5 = new Promise(function(resolve, reject) { + setTimeout(resolve, 500, "five"); +}); +var p6 = new Promise(function(resolve, reject) { + setTimeout(reject, 100, "six"); +}); + +Promise.race([p5, p6]).then(function(value) { + // Não é chamado +}, function(reason) { + console.log(reason); // "six" + // p6 é mais rápido, então ela rejeita +}); +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.race', 'Promise.race')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial em um padrão ECMA.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_browsers">Compatibilidade com browsers</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>32</td> + <td>{{CompatGeckoDesktop(29.0)}}</td> + <td>{{CompatNo}}</td> + <td>19</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(29.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>32</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/reject/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/reject/index.html new file mode 100644 index 0000000000..6097afe484 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/promise/reject/index.html @@ -0,0 +1,76 @@ +--- +title: Promise.reject() +slug: Web/JavaScript/Reference/Global_Objects/Promise/reject +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>Promise.reject(motivo)</strong></code> retorna um objeto Promise que é rejeitada com um dado motivo.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>Promise.reject(motivo)</var>;</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt>motivo</dt> + <dd>Motivo pelo qual este Promise foi rejeitado.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>O método estático <code>Promise.reject</code> retorna uma <code>Promise</code> que é rejeitada. Para fins de debug e captura de erros seletiva, é útil que o motivo seja uma <code>instanceof</code> {{jsxref("Error")}}.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_o_método_estático_Promise.reject()">Usando o método estático Promise.reject()</h3> + +<pre class="brush: js">Promise.reject("Testando reject estático").then(function(motivo) { + // não executado +}, function(motivo) { + console.log(motivo); // "Testando reject estático" +}); + +Promise.reject(new Error("falha")).then(function(erro) { + // não executado +}, function(erro) { + console.log(erro); // Stacktrace +});</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.reject', 'Promise.reject')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial em um padrão ECMA.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_browsers">Compatibilidade com browsers</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.reject")}}</p> + +<p> </p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li><a href="https://github.com/petkaantonov/bluebird#error-handling">Captura de erros seletiva com a biblioteca de Promise BlueBird</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/resolve/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/resolve/index.html new file mode 100644 index 0000000000..f4c1220158 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/promise/resolve/index.html @@ -0,0 +1,144 @@ +--- +title: Promise.resolve() +slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve +tags: + - ECMAScript6 + - ES6 + - JavaScript + - Método(2) + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>Promise.resolve(value)</strong></code> retorna um objeto {{jsxref("Promise")}} que é resolvido com o valor passado. Se o valor for <em>thenable</em> (ex: tiver um método {{jsxref("Promise.then", "\"then\"")}}), a promise retornada irá "seguir" esse <em>thenable</em>, adotando seu estado final; se o valor for uma promise, o objeto será o resultado da chamada Promise.resolve; do contrário a promise será realizada com o valor.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>Promise.resolve(value)</var>; +Promise.resolve(promise); +Promise.resolve(thenable); +</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt>value</dt> + <dd>Argumento a ser resolvido <font face="Consolas, Liberation Mono, Courier, monospace">pela <code>Promise</code></font>. Pode também ser uma <code>Promise</code> ou um thenable a resolver.</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>A {{jsxref("Promise")}} que será resolvida com o valor passado ou com a {{jsxref("Promise")}} passada como valor, caso o valor seja um objeto {{jsxref("Promise")}} </p> + +<h2 id="Descrição">Descrição</h2> + +<p>A função estática <code>Promise.resolve</code> retorna uma <code>Promise</code> de que será resolvida.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Usando_o_método_estático_Promise.resolve">Usando o método estático <code>Promise.resolve</code></h3> + +<pre class="brush: js">Promise.resolve("Success").then(function(value) { + console.log(value); // "Success" +}, function(value) { + // not called +}); +</pre> + +<h3 id="Resolvendo_um_array">Resolvendo um array</h3> + +<pre class="brush: js">var p = Promise.resolve([1,2,3]); +p.then(function(v) { + console.log(v[0]); // 1 +}); +</pre> + +<h3 id="Resolvendo_outra_Promise">Resolvendo outra <code>Promise</code></h3> + +<pre class="brush: js">var original = Promise.resolve(true); +var cast = Promise.resolve(original); +cast.then(function(v) { + console.log(v); // true +}); + +</pre> + +<p>A ordem invertida dos logs acontece devido ao fato de que os handlers são chamados assincronamente. Veja como o <code>then</code> funciona <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Return_value">aqui</a>.</p> + +<h3 id="Resolvendo_thenables_e_disparando_Errors">Resolvendo thenables e disparando Errors</h3> + +<pre class="brush: js">// Resolving a thenable object +var p1 = Promise.resolve({ + then: function(onFulfill, onReject) { onFulfill("fulfilled!"); } +}); +console.log(p1 instanceof Promise) // true, object casted to a Promise + +p1.then(function(v) { + console.log(v); // "fulfilled!" + }, function(e) { + // not called +}); + +// Thenable throws before callback +// Promise rejects +var thenable = { then: function(resolve) { + throw new TypeError("Throwing"); + resolve("Resolving"); +}}; + +var p2 = Promise.resolve(thenable); +p2.then(function(v) { + // not called +}, function(e) { + console.log(e); // TypeError: Throwing +}); + +// Thenable throws after callback +// Promise resolves +var thenable = { then: function(resolve) { + resolve("Resolving"); + throw new TypeError("Throwing"); +}}; + +var p3 = Promise.resolve(thenable); +p3.then(function(v) { + console.log(v); // "Resolving" +}, function(e) { + // not called +}); +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.resolve', 'Promise.resolve')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial no padrão ECMA.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.resolve")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/then/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/then/index.html new file mode 100644 index 0000000000..5e3c015947 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/promise/then/index.html @@ -0,0 +1,181 @@ +--- +title: Promise.prototype.then() +slug: Web/JavaScript/Reference/Global_Objects/Promise/then +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then +--- +<div>{{JSRef("Global_Objects", "Promise")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O método <strong>then()</strong> retorna uma <strong>Promise</strong>. Possui dois argumentos, ambos são "<strong>call back functions</strong>", sendo uma para o sucesso e outra para o fracasso da promessa.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><var>p.then(</var><strong style="font-weight: bold;">quandoRealizada</strong><var>, </var><strong style="font-weight: bold;">quandoRejeitada</strong><var>)</var>; + +p.then(function(valor) { + // sucesso + }, function(motivo) { + // rejeitada +}); +</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt>quandoRealizada</dt> + <dd>Uma {{jsxref("Function")}} chamada quando a <strong>Promise</strong> é cumprida (Sucesso). Essa função tem um argumento, o valor do cumprimento.</dd> +</dl> + +<dl> + <dt>quandoRejeitada</dt> + <dd>Uma {{jsxref("Function")}} chamada quando a Promise é rejeitada. Essa função tem um argumento, o motivo da recusa.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>Assim como o método .then() e {{jsxref("Promise.prototype.catch()")}} retornam uma <strong>Promise</strong>, eles podem ser encadeados - uma operação chamada <em><strong>composition</strong>.</em></p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_o_método_then">Usando o método then</h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + resolve("Success!"); + // or + // reject ("Error!"); +}); + +p1.then(function(value) { + console.log(value); // Success! +}, function(reason) { + console.log(reason); // Error! +}); +</pre> + +<h3 id="Encadeando">Encadeando</h3> + +<p>Já que o método then() devolve uma <strong>Promise</strong>, você pode facilmente encadeá-los. </p> + +<pre class="brush: js">var p2 = new Promise(function(resolve, reject) { + resolve(1); +}); + +p2.then(function(value) { + console.log(value); // 1 + return value + 1; +}).then(function(value) { + console.log(value); // 2 +}); + +</pre> + +<p>No exemplo acima, o último <strong>.then()</strong> recebeu a soma value + 1, que resultou em 2, porém se o retorno de value + 1 fosse uma <strong>Promise</strong> que também retornasse value + 1, o resultado seria o mesmo. Note, no exemplo abaixo, que leva 1000ms para a impressão de 2 ocorrer.</p> + +<pre class="brush: js">var p2 = new Promise(function(resolve, reject) { + resolve(1); +}); + +p2.then(function(value) { + console.log(value); // 1 + return new Promise(function (resolve, reject) { + setTimeout(function () { + resolve(value + 1); + }, 1000); + }); +}).then(function(value) { + console.log(value); // 2 +});</pre> + +<p> </p> + +<p> </p> + +<h2 id="sect1"> </h2> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + <tr> + <td><a href="https://github.com/domenic/promises-unwrapping">domenic/promises-unwrapping</a></td> + <td>Draft</td> + <td>Standardization work is taking place here.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_Browsers">Compatibilidade dos Browsers</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>32</td> + <td>{{CompatGeckoDesktop(24.0)}} as <code>Future</code><br> + {{CompatGeckoDesktop(25.0)}} as <code>Promise</code> behind a flag[1]<br> + {{CompatGeckoDesktop(29.0)}} by default</td> + <td>{{CompatNo}}</td> + <td>19</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(24.0)}} as <code>Future</code><br> + {{CompatGeckoMobile(25.0)}} as <code>Promise</code> behind a flag[1]<br> + {{CompatGeckoMobile(29.0)}} by default</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + <td>32</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 24 possui uma implementação experimental de Promise, under the initial name of <code>Future</code>. It got renamed to its final name in Gecko 25, but disabled by default behind the flag <code>dom.promise.enabled</code>. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> enabled Promises by default in Gecko 29.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.catch()")}}</li> +</ul> |