Heim > Web-Frontend > js-Tutorial > Promise.all()

Promise.all()

DDD
Freigeben: 2025-01-21 12:34:16
Original
541 Leute haben es durchsucht

Promise.all()

Tiefgehende Kenntnisse von JavaScriptPromise.all()

Promise.all() ist eine leistungsstarke Methode in JavaScript zur gleichzeitigen Verarbeitung mehrerer asynchroner Vorgänge. Es empfängt ein iterierbares Objekt (normalerweise ein Array), das mehrere Versprechen enthält, und gibt ein einzelnes Versprechen zurück. Dieses einzelne Versprechen wird nur dann aufgelöst, wenn alle eingegebenen Versprechen erfolgreich gelöst werden. Wenn ein Versprechen abgelehnt wird, wird das einzelne Versprechen sofort abgelehnt. In diesem Leitfaden werden die Funktionalität, Syntax, das Verhalten und praktische Beispiele von Promise.all() erläutert.

Grammatik

Die Syntax von

Promise.all() ist einfach:

<code class="language-javascript">Promise.all(iterable);</code>
Nach dem Login kopieren
  • iterierbar: Ein Array oder ein anderes iterierbares Objekt, das Versprechen oder Werte enthält. Non-Promise-Werte werden als gelöste Promises behandelt.

Rückgabewert

Diese Methode gibt ein Promise mit dem folgenden Verhalten zurück:

  • Wenn iterable leer ist, wird es sofort als leeres Array analysiert.
  • Wenn alle Promises in der Iterable erfolgreich waren, lösen Sie sie in ein Array auf, das die erfolgreichen Werte enthält, und behalten Sie dabei ihre ursprüngliche Reihenfolge bei.
  • Wenn ein Versprechen abgelehnt wird, wird es sofort abgelehnt und der Grund für das erste abgelehnte Versprechen wird zurückgegeben, wobei die Ergebnisse aller anderen Versprechen ignoriert werden.

Erfolg und Misserfolg

  1. Erfolgreich: Wenn alle Promises erfolgreich gelöst wurden, gibt Promise.all() ein Array von Ergebnissen in derselben Reihenfolge wie die Eingabe-Promises zurück.
  2. Fehlgeschlagen: Wenn ein Versprechen abgelehnt wird, Promise.all() wird es sofort abgelehnt und der Ablehnungsgrund des Versprechens wird zurückgegeben.

Praxisbeispiel

Beispiel 1: Grundlegende Verwendung

In diesem Beispiel erstellen wir drei Versprechen, die nach unterschiedlichen Zeitüberschreitungen aufgelöst werden:

<code class="language-javascript">const promise1 = new Promise((resolve) => setTimeout(() => resolve('One'), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve('Two'), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve('Three'), 3000));

Promise.all([promise1, promise2, promise3])
  .then(values => console.log(values)) // 输出: ['One', 'Two', 'Three']
  .catch(error => console.error(error));</code>
Nach dem Login kopieren

Hier wartet Promise.all() auf die Auflösung aller drei Promises und protokolliert dann ihre Ergebnisse als Array in der Konsole.

Beispiel 2: Mischwertverarbeitung

Sie können auch gelöste Werte und Versprechen mischen:

<code class="language-javascript">const p1 = Promise.resolve(42);
const p2 = Promise.resolve('Hello');
const p3 = new Promise((resolve) => setTimeout(() => resolve('World'), 1000));

Promise.all([p1, p2, p3])
  .then(values => console.log(values)) // 输出: [42, 'Hello', 'World']
  .catch(error => console.error(error));</code>
Nach dem Login kopieren

In diesem Fall werden p1 und p2 sofort aufgelöst, während p3 nach einer Sekunde aufgelöst wird.

Beispiel 3: Fehlerbehandlung

Wenn eines der Versprechen abgelehnt wird, Promise.all() wird es sofort abgelehnt:

<code class="language-javascript">const p1 = Promise.resolve(42);
const p2 = Promise.reject(new Error('Failed!'));
const p3 = new Promise((resolve) => setTimeout(() => resolve('This will not run'), 1000));

Promise.all([p1, p2, p3])
  .then(values => console.log(values))
  .catch(error => console.error(error.message)); // 输出: 'Failed!'</code>
Nach dem Login kopieren

Da p2 abgelehnt wird, schlägt der gesamte Vorgang fehl und es wird eine Fehlermeldung protokolliert.

Anwendungsszenarien von

Promise.all()

  • Mehrere Ressourcen abrufen: Wenn Sie Daten von mehreren APIs gleichzeitig abrufen und warten müssen, bevor Sie alle Antworten verarbeiten.
  • Parallele Verarbeitung: Wenn mehrere unabhängige Aufgaben gleichzeitig ausgeführt werden und ihre Ergebnisse miteinander kombiniert werden müssen.
  • Batch-Vorgänge: Bei der Durchführung von Batch-Aktualisierungen oder Berechnungen, bei denen jeder Vorgang unabhängig abgeschlossen werden kann.

Fazit

Promise.all() ist ein wesentliches Tool zum Verwalten mehrerer asynchroner Vorgänge in JavaScript. Es vereinfacht den Code, indem es Entwicklern ermöglicht, auf die Auflösung mehrerer Promises zu warten, bevor sie mit anderer Logik fortfahren. Es ist jedoch von entscheidender Bedeutung, mit Fehlern richtig umzugehen, da der Fehler eines einzelnen Versprechens dazu führt, dass der gesamte Vorgang fehlschlägt. Wenn Sie wissen, wie Sie Promise.all() effektiv nutzen, können Sie saubereren und effizienteren asynchronen Code schreiben.

Referenzen: [1] https://www.php.cn/link/ebd58b8a3f1d72f4206201da62fb1204 [2] https://www.php.cn/link/9181a74736d3b86345dadbc90e29390e [3] https://www.php.cn/link/2a3e953a5e3d81e67945bce5519f84c8 [4] https://www.php.cn/link/4c0303ffb193bd5e66078909a15268aa [5] https://www.php.cn/link/9c25dc28b94e5226f1983330dc421cec [6] https://www.php.cn/link/b2f1384b8feb04d2de9a85124dc64613 [7] https://www.php.cn/link/f1e1fd9e97f59379ed79bdf258d55042 [8] https://www.php.cn/link/9a5859b8f76280c97c0c185a19d17014 [9] https://www.php.cn/link/d3f010d6bc392b904f63ce5792891b71 [10] https://www.php.cn/link/4d419d5b4274ea8faaf4f37410b97bd6

Das obige ist der detaillierte Inhalt vonPromise.all(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage