1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
title: Promise.prototype.finally()
slug: Web/JavaScript/Referencia/Objetos_globales/Promise/finally
translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
---
<div>{{JSRef}}</div>
<p>El método <code><strong>finally()</strong></code> devuelve una {{jsxref("Promise")}}. Cuando la promesa se resuelve, sea exitosa o rechazada, la función de callback específicada será ejecutada. Esto ofrece una forma de ejecutar código sin importar como se haya resuelto la promesa.</p>
<p>Esto ayuda a evitar tener código duplicado tanto en el {{jsxref("Promise.then", "then()")}} como en el {{jsxref("Promise.catch", "catch()")}}.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox"><var>p.finally(alFinalizar)</var>;
p.finally(function() {
// finalizada (exitosa o rechazada)
});
</pre>
<h3 id="Parámetros">Parámetros</h3>
<dl>
<dt><code>alFinalizar</code></dt>
<dd>Una {{jsxref("Function")}} llamada cuando la <code>Promise</code> se resuelve con éxito o falla.</dd>
</dl>
<h3 id="Valor_de_retorno">Valor de retorno</h3>
<p>Devuelve una {{jsxref("Promise")}} cuyo <code>finally</code> fue fijado a la función específicada en <code>alFinalizar</code>.</p>
<h2 id="Descripción">Descripción</h2>
<p>El método <code>finally()</code> puede ser de utilidad si quieres hacer algún proceso o limpieza una vez que la promesa termina, sin importar su resultado.</p>
<p>Utilizar <code>finally()</code> es muy similar a llamar <code>.then(onFinally, onFinally)</code>, sin embargo tiene algunas diferencias:</p>
<ul>
<li>Cuando usamos una función <code>inline</code>, se la puede pasar una sola vez, en vez de estar forzado a declararla dos veces, o guardarla en una variable.</li>
<li>Un callback <code>finally</code> no recibe ningún argumento, ya que no hay una manera fehaciente de determinar si la promesa fue exitosa o fallida. Este caso de uso es precisamente para cuando <em>no nos importa</em> la razón por la que falló o el valor al que resuelve, y no hay necesidad de proveerlos.</li>
<li>A diferencia de <code>Promise.resolve(2).then(() => {}, () => {})</code> (que va a resolver a <code>undefined</code>), <code>Promise.resolve(2).finally(() => {})</code> resolverá con un <code>2</code>.</li>
<li>Del mismo modo, a diferencia de <code>Promise.reject(3).then(() => {}, () => {})</code> (que resolverá con <code>undefined</code>), <code>Promise.reject(3).finally(() => {})</code> será rechazada con un <code>3</code>.</li>
</ul>
<div class="note">
<p><strong>Nota:</strong> Un <code>throw</code> (o retornar una promesa rechazada) en el callback <code>finally</code> va a rechazar la nueva promesa con la razón de rechazo especificada al llamar <code>throw()</code>.</p>
</div>
<h2 id="Ejemplos">Ejemplos</h2>
<pre class="brush: js">let isLoading = true;
fetch(myRequest).then(function(response) {
var contentType = response.headers.get("content-type");
if(contentType && contentType.includes("application/json")) {
return response.json();
}
throw new TypeError("Oops, no hemos obtenido un JSON!");
})
.then(function(json) { /* procesar el JSON */ })
.catch(function(error) { console.log(error); /* esta línea podría arrojar error, e.g. cuando console = {} */ })
.finally(function() { isLoading = false; });
</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_en_navegador">Compatibilidad en navegador</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="Ver_también">Ver también</h2>
<ul>
<li>{{jsxref("Promise")}}</li>
<li>{{jsxref("Promise.prototype.then()")}}</li>
<li>{{jsxref("Promise.prototype.catch()")}}</li>
</ul>
|
