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
|
---
title: Promise.prototype.finally()
slug: Web/JavaScript/Reference/Global_Objects/Promise/finally
translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
---
<div>{{JSRef}}</div>
<p>finally () gibt ein {{jsxref ("Promise")}} zurück. Wenn das Promise erfüllt oder abgelehnt wird, wird die angegebene callback-Funktion ausgeführt. Dies stellt eine Möglichkeit für Code bereit, der ausgeführt werden muss, unabhängig davon, ob das Promise erfolgreich erfüllt wurde oder nicht. Auf diese Weise können Sie vermeiden, dass derselbe Code für die beiden Handlern des Promise {{jsxref ("Promise.then", "then ()")}} und {{jsxref ("Promise.catch", "catch ()")}} geschrieben werden muss.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><var>p.finally(onFinally)</var>;
p.finally(function() {
// settled (fulfilled or rejected)
});
</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt><code>onFinally</code></dt>
<dd>A {{jsxref("Function")}} called when the <code>Promise</code> is settled.</dd>
</dl>
<h3 id="Return_value">Return value</h3>
<p>Returns a {{jsxref("Promise")}} whose <code>finally</code> handler is set to the specified function, <code>onFinally</code>.</p>
<h2 id="Description">Description</h2>
<p>The <code>finally()</code> method can be useful if you want to do some processing or cleanup once the promise is settled, regardless of its outcome.</p>
<p>The <code>finally()</code> method is very similar to calling <code>.then(onFinally, onFinally)</code> however there are couple of differences:</p>
<ul>
<li>When creating a function inline, you can pass it once, instead of being forced to either declare it twice, or create a variable for it</li>
<li>A <code>finally</code> callback will not receive any argument, since there's no reliable means of determining if the promise was fulfilled or rejected. This use case is for precisely when you <em>do not care</em> about the rejection reason, or the fulfillment value, and so there's no need to provide it.</li>
<li>Unlike <code>Promise.resolve(2).then(() => {}, () => {})</code> (which will be resolved with <code>undefined</code>), <code>Promise.resolve(2).finally(() => {})</code> will be resolved with <code>2</code>.</li>
<li>Similarly, unlike <code>Promise.reject(3).then(() => {}, () => {})</code> (which will be fulfilled with <code>undefined</code>), <code>Promise.reject(3).finally(() => {})</code> will be rejected with <code>3</code>.</li>
</ul>
<div class="note">
<p><strong>Note:</strong> A <code>throw</code> (or returning a rejected promise) in the <code>finally</code> callback will reject the new promise with the rejection reason specified when calling <code>throw()</code>.</p>
</div>
<h2 id="Examples">Examples</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, we haven't got JSON!");
})
.then(function(json) { /* process your JSON further */ })
.catch(function(error) { console.log(error); })
.finally(function() { isLoading = false; });
</pre>
<h2 id="Specifications">Specifications</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="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("javascript.builtins.Promise.finally")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{jsxref("Promise")}}</li>
<li>{{jsxref("Promise.prototype.then()")}}</li>
<li>{{jsxref("Promise.prototype.catch()")}}</li>
</ul>
|
