-
Notifications
You must be signed in to change notification settings - Fork 0
/
12-5.html
150 lines (145 loc) · 5.11 KB
/
12-5.html
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./public/favicon.ico" />
<meta http-equiv="cache-control" content="no-cache" />
<title></title>
<link rel="stylesheet" href=" https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
<link rel="stylesheet" href="./hightlight/default.min.css" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/copybutton.css" />
<link rel="stylesheet" href="./css/hightlight.css" />
<script src="./hightlight/hightlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BEVZJDBC7Z"></script>
<script src="./js/gtag.js"></script>
</head>
<body>
<header>
<nav>
<h1>
<span id="toggle-menu"></span>
<a href="index.html"></a>
</h1>
</nav>
</header>
<main>
<aside>
<nav></nav>
</aside>
<article>
<h2 id="12-5">12-5 Promise.finally()</h2>
<p>
<strong><code>finally()</code></strong>
方法會回傳一個
<code>Promise</code>
。當 promise 被 settled 後，無論其結果是 fulfilled 還是 rejected
，都會執行指定的回呼函數。它提供了一個讓
<code>Promise</code>
在被確認後，無論是 fulfilled 或是 rejected 都會執行某些程式碼的一種手段。
</p>
<p>
這樣可以避免你在 promise 的
<code>then()</code>
和
<code>catch()</code>
重複處理相同的程式碼。
</p>
<h3>Syntax</h3>
<pre><code class="language-js">
p.finally(onFinally);
p.finally(function () {
// settled(fulfilled 或 rejected)
});
</code></pre>
<div class="article-content">
<p>
當你希望在 promise settled 後且不關心它的結果為何時，執行一些處理或清理的工作，
<code>finally()</code>
方法會很有幫助。
</p>
<p>
<code>finally()</code>
方法非常類似於
<code>.then(onFinally, onFinally)</code>
的呼叫方式，但仍有一些差異：
</p>
<ul>
<li>當建立行內的函數時，可以只傳遞一次，從而避免重複宣告或為它宣告變數。</li>
<li>
<code>finally</code>
的回呼函數並不會接收到任何引數，因其沒有可靠的方式來確認 promise 是被 fulfilled 還是
rejected 。它的使用情境僅適用於當你
<em>不關心</em>
rejection 的原因或 fulfillment 的值，因此無須提供。範例：
<ul>
<li>
與
<code>Promise.resolve(2).then(() => {}, () => {})</code>
（將被 resolved 為
<code>undefined</code>
）不同，
<code>Promise.resolve(2).finally(() => {})</code>
將被 resolved 為
<code>2</code>
。
</li>
<li>
同樣的，與
<code>Promise.reject(3).then(() => {}, () => {})</code>
（將 fulfilled 為
<code>undefined</code>
）不同，
<code>Promise.reject(3).finally(() => {})</code>
將被 rejected 為
<code>3</code>
。
</li>
</ul>
</li>
</ul>
<div class="notecard">
<p>
<strong>備註：</strong>
在 finally 回呼中使用 throw (或回傳 rejected promise)會導致新的 promise 被
reject，reject 的原因則是呼叫 throw() 時所指定的值。
</p>
</div>
</div>
<pre><code class="language-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;
});
</code></pre>
<p>資料來源:</p>
<p>
<a
href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally"
>
https://developer.mozilla.org/.../Promise/finally
</a>
</p>
</article>
</main>
</body>
<script type="module" src="./js/main.js"></script>
</html>