diff options
Diffstat (limited to 'files/zh-tw/web/javascript/reference/global_objects/promise/all/index.html')
| -rw-r--r-- | files/zh-tw/web/javascript/reference/global_objects/promise/all/index.html | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/files/zh-tw/web/javascript/reference/global_objects/promise/all/index.html b/files/zh-tw/web/javascript/reference/global_objects/promise/all/index.html new file mode 100644 index 0000000000..eb18ce63f9 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/global_objects/promise/all/index.html @@ -0,0 +1,207 @@ +--- +title: Promise.all() +slug: Web/JavaScript/Reference/Global_Objects/Promise/all +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all +--- +<div>{{JSRef}}</div> + +<p><code><strong>Promise.all()</strong></code> 方法回傳一個 {{jsxref("Promise")}} 物件,當引數 <code>iterable</code> 中所有的 promises 都被實現(resolved),或引數 iterable 不含任何 promise 時,被實現。或以第一個被拒絕的 promise 的原因被拒絕。</p> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox"><var>Promise.all(iterable)</var>;</pre> + +<dl> + <dt>iterable</dt> + <dd>一個 <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable</a> 物件像是 {{jsxref("Array")}} 或 {{jsxref("String")}}。</dd> +</dl> + +<h3 id="回傳值">回傳值</h3> + +<ul> + <li>一個<strong>已被實現(already resolved)</strong>的 {{jsxref("Promise")}},若傳入的 iterable 為空。</li> + <li>一個<strong>非同步地被實現(asynchronously resolved)</strong>的 {{jsxref("Promise")}} 若傳入的 iterable 不含 promise。注意,Google Chrome 58 對此情形回傳一個<strong>已被解決</strong>的 promise。</li> + <li>一個<strong>擱置(pending)</strong>的 {{jsxref("Promise")}},對所有剩餘情形。此 promise 接著被<strong>非同步地</strong>被 resolved/rejected(只要堆疊為空)當 iterable 中所有的 promises 都被實現,或其中一個被拒絕。參見下方關於"Promise.all 的非同步與同步性質"的例子。</li> +</ul> + +<h2 id="描述">描述</h2> + +<p>此方法在聚集(aggregating)多個 promises 的結果時很有幫助。</p> + +<p>實現(Fulfillment):<br> + 若傳入空的 iterable,此方法(同步地)回傳一個已被解決的 promise。若所有傳入的 promises 都被實現,或都不是 promise,<code>Promise.all</code> 回傳的 promise 被非同步地實現。無論是哪個情形,回傳一個以 iterable 其內<strong>所有</strong>值(包含非 promise 值)作為引數的陣列被實現。<br> + </p> + +<p>拒絕(Rejection):<br> + 若任一個傳入的 promise 被拒絕,Promise.all 非同步地以其值被拒絕,無論其他 promises 是否被解決。</p> + +<h2 id="範例">範例</h2> + +<h3 id="使用_Promise.all">使用 <code>Promise.all</code></h3> + +<p><code>Promise.all</code> 等到全部實現(或一個拒絕)。</p> + +<pre class="brush: js">var p1 = Promise.resolve(3); +var p2 = 1337; +var p3 = new Promise((resolve, reject) => { + setTimeout(resolve, 100, 'foo'); +}); + +Promise.all([p1, p2, p3]).then(values => { + console.log(values); // [3, 1337, "foo"] +});</pre> + +<p>若 iterable 含非 promise 值,它們將被忽略,但依然會被記入回傳 promise 陣列值(若被實現):</p> + +<pre class="brush: js">// this will be counted as if the iterable passed is empty, so it gets fulfilled +var p = Promise.all([1,2,3]); +// this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled +var p2 = Promise.all([1,2,3, Promise.resolve(444)]); +// this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected +var p3 = Promise.all([1,2,3, Promise.reject(555)]); + +// using setTimeout we can execute code after the stack is empty +setTimeout(function(){ + console.log(p); + console.log(p2); + console.log(p3); +}); + +// logs +// Promise { <state>: "fulfilled", <value>: Array[3] } +// Promise { <state>: "fulfilled", <value>: Array[4] } +// Promise { <state>: "rejected", <reason>: 555 }</pre> + +<h3 id="Promise.all_的非同步與同步性質"><code>Promise.all</code> 的非同步與同步性質</h3> + +<p>以下例子驗證了 <code>Promise.all</code> 的非同步性質(asynchronicity)(或同步性質(synchronicity),若傳入的 iterable 是空的):</p> + +<pre class="brush: js">// we are passing as argument an array of promises that are already resolved, +// to trigger Promise.all as soon as possible +var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)]; + +var p = Promise.all(resolvedPromisesArray); +// immediately logging the value of p +console.log(p); + +// using setTimeout we can execute code after the stack is empty +setTimeout(function(){ + console.log('the stack is now empty'); + console.log(p); +}); + +// logs, in order: +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "fulfilled", <value>: Array[2] } +</pre> + +<p><code>當</code> <code>Promise.all</code> 被拒絕時發生一樣的事情:</p> + +<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)]; +var p = Promise.all(mixedPromisesArray); +console.log(p); +setTimeout(function(){ + console.log('the stack is now empty'); + console.log(p); +}); + +// logs +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "rejected", <reason>: 44 } +</pre> + +<p>注意!<code>Promise.all</code> 同步地被解決<strong>若且唯若</strong>傳入的 iterable 為空:</p> + +<pre class="brush: js">var p = Promise.all([]); // will be immediately resolved +var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously +console.log(p); +console.log(p2) +setTimeout(function(){ + console.log('the stack is now empty'); + console.log(p2); +}); + +// logs +// Promise { <state>: "fulfilled", <value>: Array[0] } +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "fulfilled", <value>: Array[2] } +</pre> + +<h3 id="Promise.all_的失敗優先(fail-fast)行為"><code>Promise.all</code> 的失敗優先(fail-fast)行為</h3> + +<p><code>當任一個陣列成員被拒絕則</code> <code>Promise.all</code> 被拒絕。例如,若傳入四個將在一段時間後被解決的 promises,而其中一個立刻被拒絕,則 <code>Promise.all</code> 將立刻被拒絕。</p> + +<pre class="brush: js">var p1 = new Promise((resolve, reject) => { + setTimeout(resolve, 1000, 'one'); +}); +var p2 = new Promise((resolve, reject) => { + setTimeout(resolve, 2000, 'two'); +}); +var p3 = new Promise((resolve, reject) => { + setTimeout(resolve, 3000, 'three'); +}); +var p4 = new Promise((resolve, reject) => { + setTimeout(resolve, 4000, 'four'); +}); +var p5 = new Promise((resolve, reject) => { + reject('reject'); +}); + +Promise.all([p1, p2, p3, p4, p5]).then(values => { + console.log(values); +}, reason => { + console.log(reason) +}); + +//From console: +//"reject" + +//You can also use .catch +Promise.all([p1, p2, p3, p4, p5]).then(values => { + console.log(values); +}).catch(reason => { + console.log(reason) +}); + +//From console: +//"reject" + +</pre> + +<h2 id="規範">規範</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>{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</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.all")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.race()")}}</li> +</ul> |
