Javascript Promise.all()用法及代碼示例

Promise.all()方法實際上是一個promise，它將一個promise(可迭代)數組作為輸入。它返回一個Promise，該Promise將在所有的諾言作為可迭代項傳遞時解決，或者當可迭代項不包含任何諾言時進行解決。以簡單的方式，如果passed-in中的任何一個Promise被拒絕，則Promise.all()方法異步地拒絕已經被拒絕的Promise的值，而其他承諾是否已經解決。

用法:

Promise.all( iterable )

參數：此方法接受單個參數iterable，該參數采用promises數組或包含某些對象的普通數組。

返回值：它遵循一些規則以返回單個承諾：

如果傳遞的參數為空，則返回已解決的Promise。
如果傳遞的iterable不包含諾言，它將返回異步解決的Promise。
對於所有其他情況，它將返回一個未決的Promise。

承諾的履行與拒絕all()方法：
履行：返回的諾言已兌現，

如果傳遞的iterable為空，則此方法同步返回已解決的Promise。
如果所有通過的承諾均得到履行，則返回的承諾將異步實現。

拒絕：如果任何傳遞的承諾都被拒絕，則此方法將拒絕該承諾的值，無論其他承諾是否已解決。

以下示例說明了JavaScript Promise.all()方法：

範例1：Promise.all等待實現

<script> 
    p1 = Promise.resolve(50); 
    p2 = 200 
    p3 = new Promise(function(resolve, reject) { 
        setTimeout(resolve, 100, 'geek'); 
    }); 
  
    Promise.all([p1, p2, p3]).then(function(values) { 
        document.write(values); 
    });  
</script>

輸出：

50, 200, geek

範例2：這裏Promise.all在2000 ms之後解析，輸出顯示為數組。

<script> 
// Simple promise that resolves 
// after a given time 
const tOut = (t) => { 
  return new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve(`Completed in ${t}`) 
    }, t) 
  }) 
} 
  
// Resolving a normal promise 
tOut(1000).then(result => document.write(result+"<br>"))  
// Completed in 1000 
  
// Promise.all 
Promise.all([tOut(1000), tOut(2000)]).then(result => document.write(result)) 
</script>

輸出：

Completed in 1000
Completed in 1000, Completed in 2000

在這裏，Promise.all是兌現承諾的順序。數組中的第一個promise將解析為輸出數組的第一個元素，第二個promise將為輸出數組中的第二個元素，依此類推。

範例3：在這裏，Promise.all等到所有的諾言都化為烏有。

<script> 
// Simple promise that resolves after a given time 
const tOut = (t) => { 
  return new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve(`Completed in ${t}`) 
    }, t) 
  }) 
} 
  
// Array contains some time duration 
const durations = [1000, 2000, 3000]  
  
const promises = []  // Empty array 
  
durations.map((duration) => { 
    
    // Calling the async function timeout(), so  
    // at this point the async function has started 
    // and enters the 'pending' state  
    // pushing the pending promise to an array. 
  promises.push(tOut(duration))  
}) 
  
document.write(promises) 
  
// Passing an array of pending promises to Promise.all 
// Promise.all will wait till all the promises get resolves 
// and then the same gets resolved. 
Promise.all(promises).then(response => document.write(response)) 
  
// It prints after previous promises gets resolved  
// ["Completed in 1000", "Completed in 2000", "Completed in 3000"] 
</script>

輸出：

[object Promise], [object Promise], [object Promise]
.
.
. (gap between previous and last promises)
.
.
Completed in 1000, Completed in 2000, Completed in 3000

範例4：如果一個承諾失敗，那麽所有其他承諾都會失敗。然後Promise.all被拒絕。

<script> 
// Promise that resolves after a given time 
const tOut = (t) => { 
  return new Promise((resolve, reject) => { 
    setTimeout(() => { 
      if (t === 2000) { 
        reject(`Rejected in ${t}`) 
      } else { 
        resolve(`Completed in ${t}`) 
      } 
    }, t) 
  }) 
} 
  
const durations = [1000, 2000, 3000] 
  
// Array contains some time durations 
const promises = [] //empty array 
  
durations.map((duration) => { 
    promises.push(tOut(duration)) 
    // Pushing durations in the promises array 
}) 
  
// Passing an array of pending promises to Promise.all 
Promise.all(promises).then(response => document.write(response))  
// Promise.all cannot be resolved, as one of the 
// promises passed, got rejected. 
  
.catch(error => document.write(`::Error::<br> ${error}`)) 
// Promise.all throws an error. 
</script>

輸出：

Error
Rejected in 2000

支持的瀏覽器：JavaScript Promise.all()方法支持的瀏覽器如下：

穀歌瀏覽器
微軟Edge
火狐瀏覽器
蘋果Safari
Opera

相關用法

注：本文由純淨天空篩選整理自SoumikMondal大神的英文原創作品 JavaScript | Promise.all() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。