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/Reference/Global_Objects/Promise/finally
translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
---
<div>{{JSRef}}</div>
<p>Phương thức <code><strong>finally()</strong></code> trả về một {{jsxref("Promise")}}. Một khi <em>promise</em> được thực hiện (<em>settle</em>), dù kết quả là <em>fulfilled</em> hay <em>rejected</em>, thì hàm <em>callback</em> đã chỉ định sẽ được thực thi. Đây là cách để làm cho một đoạn code phải được thực thi sau khi <code>Promise</code> hoàn thành, dù kết quả là fulfilled hay rejected.</p>
<p>Cách này giúp bạn tránh phải viết những dòng code trùng lặp giữa hai phương thức xử lý {{jsxref("Promise.then", "then()")}} và {{jsxref("Promise.catch", "catch()")}}.</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>Một {{jsxref("Function")}} được gọi khi <code>Promise</code> được thực hiện</dd>
</dl>
<h3 id="Return_value">Return value</h3>
<p>Return a {{jsxref("Promise")}} whose <code>finally</code> handler is set to the specified function, <code>onFinally</code>.</p>
<h2 id="Description">Description</h2>
<p>Phương thức <code>finally()</code> hữu ích khi bạn muốn xử lý công việc sau khi promise được thực hiện.</p>
<p>Phương thức <code>finally()</code> cũng tương tự như việc gọi <code>.then(onFinally, onFinally)</code> , tuy nhiên có một số sự khác biệt:</p>
<ul>
<li>Khi tạo một hàm inline, bạn có thể gán nó một lần, thay vì phải định nghĩa tới hai lần, hoặc phải tạo thêm biến cho nó.</li>
<li>Một callback <code style="letter-spacing: -0.00333rem;">finally</code><span style="letter-spacing: -0.00333rem;"> sẽ không nhận tham số nào, vì không có cách xác đáng nào để biết liệu promise đã fulfilled hay bị rejected. Bạn dùng tới hàm này trong trường hợp bạn không quan tâm đến kết quả khi fulfilled, hay lý do khi reject. Vậy nên, không dùng tới thì bạn không cần phải truyền vào.</span></li>
<li>Không như <code>Promise.resolve(2).then(() => {}, () => {})</code> (sẽ được resolve với <code>undefined</code>), <code>Promise.resolve(2).finally(() => {})</code> sẽ được resolve với <code>2</code>.</li>
<li>Tương tự, không như <code>Promise.reject(3).then(() => {}, () => {})</code> (sẽ được fulfill với <code>undefined</code>), <code>Promise.reject(3).finally(() => {})</code> sẽ bị reject với <code>3</code>.</li>
</ul>
<div class="note">
<p><strong>Note:</strong> Một <code>throw</code> (hoặc trả về một promise bị reject) trong callback <code>finally</code> sẽ reject cái promise mới với lý do reject được chỉ định khi gọi <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 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="See_also">See also</h2>
<ul>
<li>{{jsxref("Promise")}}</li>
<li>{{jsxref("Promise.prototype.then()")}}</li>
<li>{{jsxref("Promise.prototype.catch()")}}</li>
</ul>
|
