-
Notifications
You must be signed in to change notification settings - Fork 0
/
14-2.html
166 lines (158 loc) · 5.71 KB
/
14-2.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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!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="14-2">14-2 Promise allSettled</h2>
<h3>語法測試</h3>
<p>語法: Promise.allSettled(iterable)</p>
<p>
參數
<strong>iterable</strong>
:一個以 promise 組成的可叠代物件(例如 Array)物件。
</p>
<pre><code class="language-js">
Promise.allSettled() // Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
Promise.allSettled('') // Promise {<fulfilled>: Array(0)}
</code></pre>
<h3>回傳值</h3>
<p>一個 Promise , 其狀態為:</p>
<ul>
<li>
<strong>已實現(already fulfilled)</strong>
，如果傳入的
<code>iterable</code>
為空的話。
</li>
<li>
<strong>異步實現(asynchronously fulfill)</strong>
，當給定的
<code>iterable</code>
中所有 promise已經敲定時(不是已實現，就是已拒絕)。實現的值是一個物件陣列，其中的物件按照
<code>iterable</code>
中傳遞的 promise 的順序，描述每一個
promise的結果，無論完成順序如何。每個結果物件都有以下的屬性：
<dl>
<dt id="status"><code>status</code></dt>
<dd>
<p>
一個字串，不是
<code>"fulfilled"</code>
，就是
<code>"rejected"</code>
，表示 promise 的最終狀態。
</p>
</dd>
<dt id="value"><code>value</code></dt>
<dd>
<p>
僅當
<code>status</code>
為
<code>"fulfilled"</code>
,，才存在。 promise 實現的值。
</p>
</dd>
<dt id="reason"><code>reason</code></dt>
<dd>
<p>
僅當
<code>status</code>
為
<code>"rejected"</code>
，才存在， promise 拒絕的原因。
</p>
</dd>
</dl>
如果傳入的
<code>iterable</code>
是非空的，但不包含特定的(pending)promise ，則回傳的 promise
仍然是異步實現的，而不是同步實現。
</li>
</ul>
<pre><code class="language-js">
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
Promise.allSettled(promises).then((results) => results.forEach((result) => console.log(result.status)));
// Expected output:
// "fulfilled"
// "rejected"
</code></pre>
<h3>描述</h3>
<div>
<p>
<code>Promise.allSettled()</code>
方法是 promise
開發方法之一。在你有多個不依賴於彼此成功完成的異步任務時，或者你總是想知道每個 promise
的結果時，使用
<code>Promise.allSettled()</code>
。
</p>
<p>
相比之下，如果任務相互依賴，或者如果你想在任何 promise 被拒絕時立即拒絕，
<code><a href="4-1.html#4-1-6">Promise.all</a></code>
回傳的 Promise 可能更合適。
</p>
</div>
<pre><code class="language-js">
Promise.allSettled([
Promise.resolve(33),
new Promise((resolve) => setTimeout(() => resolve(66), 0)),
99,
Promise.reject(new Error("一個錯誤")),
]).then((values) => console.log(values));
// [
// { status: 'fulfilled', value: 33 },
// { status: 'fulfilled', value: 66 },
// { status: 'fulfilled', value: 99 },
// { status: 'rejected', reason: Error: 一個錯誤 }
// ]
</code></pre>
<p>資料來源:</p>
<p>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled"
>
https://developer.mozilla.org/.../allSettled
</a>
</p>
<p>
<a href="https://www.youtube.com/watch?v=X7lWl5jp3UI">
https://www.youtube.com/watch?v=X7lWl5jp3UI
</a>
</p>
</article>
</main>
</body>
<script type="module" src="./js/main.js"></script>
</html>