Explorando-Versprechen: .all vs. .allSettled / .race vs. .any

Im Jahr 2015 wurden mit der Veröffentlichung der JavaScript-Spezifikation ECMAScript 6 (ES2015) Versprechen gemacht, unsere Erfahrung als Entwickler im Umgang mit asynchronen Vorgängen weniger kompliziert zu machen.

Wenn Sie JavaScript studieren oder damit arbeiten, haben Sie wahrscheinlich bereits Promise.all() oder Promise.race() verwendet. Und um Entwicklern das Leben noch einfacher zu machen, haben wir mit der Veröffentlichung aktuellerer Versionen von JavaScript Zugriff auf zwei neue Promises-Methoden: Promise.allSettled() und Promise.any() (ES11 bzw. ES2021).

Aber was ist der Unterschied zwischen ihnen und wann sollten wir sie jeweils verwenden?

Zusammenfassung

Promise.all vs. Promise.allSettled: Konzentrieren Sie sich auf das Ergebnis
Promise.race vs. Promise.any: Fokus auf Geschwindigkeit

---

Promise.all vs. Promise.allSettled: Konzentrieren Sie sich auf das Ergebnis

Stellen Sie sich vor, Sie entwickeln eine Anwendung, die an einem bestimmten Punkt verschiedene API-Aufrufe ausführen muss. Wenn diese Aufrufe unabhängig voneinander sind, wäre es eine gute Option, alle Aufrufe gleichzeitig auszuführen , um die Leistung der Anwendung zu verbessern und den Code prägnanter zu gestalten.

Promise.all()

• Erhält ein Array von Promises als Argument;
• Führt Vorgänge gleichzeitig (parallel) aus;
• Auflösen, wenn alle Versprechen erfolgreich gelöst wurden;
• Wird sofort abgelehnt, wenn eines der Versprechen fehlschlägt, wodurch die Ausführung der folgenden Versprechen blockiert wird.

async function buscarDadosParalelo() {  
  const [usuarios, produtos] = await Promise.all([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

  return { usuarios, produtos };
}

Promise.all() ist sehr nützlich, wenn Sie sicherstellen müssen, dass alle Versprechen erfolgreich sind und die Funktion alle erforderlichen Ergebnisse erhält, bevor sie eine andere Aktion ausführt

Promise.allSettled()

• Erhält außerdem ein Array von Promises als Argument;
• Führt auch Operationen gleichzeitig (parallel) aus;
• Wird aufgelöst, wenn die Ausführung aller Versprechen abgeschlossen ist, unabhängig davon, ob sie erfolgreich oder fehlgeschlagen sind, und gibt für jedes Versprechen ein Objekt zurück, das seinen Status (erfüllt oder abgelehnt) enthält.
• Lehnt Versprechen niemals ab und blockiert daher auch nicht deren Ausführung.

async function buscarDadosParaleloComFalhas() {   
  const resultados = await Promise.allSettled([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

    // Verificar cada resultado individualmente:
  const dados = resultados.map(resultado => {
    if (resultado.status === 'fulfilled') {
      return resultado.value;
    } else {
      console.error(resultado.reason);
      return null;
    }
  });

  return dados;
}

Promise.allSettled() blockiert die Anwendung nicht, wenn ein Promise mit einem Fehler endet, und ermöglicht außerdem eine individuelle Behandlung des Erfolgs oder Fehlers jedes Aufrufs. Es ist wie ein Statusbericht, der auf die Lösung oder Ablehnung aller Anfragen wartet und es dem Benutzer ermöglicht, jeden Fall zu bewerten und zu bearbeiten.

Zurück zur Zusammenfassung

---

Promise.race vs. Promise.any: Fokus auf Geschwindigkeit

Wenn wir andererseits über Promise.race() und Promise.any() sprechen, sprechen wir über Ansätze zur Verarbeitung der ersten Antwort in einer Reihe asynchroner Vorgänge.

Promise.race()

• Gewinnen Sie eine Reihe geskripteter Versprechen;
• Führt Vorgänge gleichzeitig (parallel) aus;
• Gibt das erste Versprechen zurück, das abgeschlossen ODER abgelehnt wurde.

async function buscarDadosParalelo() {  
  const [usuarios, produtos] = await Promise.all([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

  return { usuarios, produtos };
}

Promise.race() ist sehr nützlich, wenn wir eine schnelle Antwort benötigen – die erste verfügbare Antwort, unabhängig davon, ob es sich um einen Erfolg oder einen Fehler handelt. Es wird auch häufig mit Timeouts verwendet, wie im obigen Beispiel, um sicherzustellen, dass wir innerhalb eines Zeitlimits eine Antwort erhalten und verhindern können, dass langsame Anfragen weiterhin Ressourcen verbrauchen.

Promise.any()

• Sie erhalten außerdem ein Array von geskripteten Versprechen;
• Führt Vorgänge gleichzeitig (parallel) aus;
• Gibt das erste Versprechen zurück, das erfolgreich abgeschlossen wurde, und ignoriert Ablehnungen;
• Wird nur abgelehnt, wenn alle Versprechen abgelehnt werden.

async function buscarDadosParaleloComFalhas() {   
  const resultados = await Promise.allSettled([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

    // Verificar cada resultado individualmente:
  const dados = resultados.map(resultado => {
    if (resultado.status === 'fulfilled') {
      return resultado.value;
    } else {
      console.error(resultado.reason);
      return null;
    }
  });

  return dados;
}

Promise.any() ist nützlich, wenn Sie mindestens eine der Anfragen erfolgreich abschließen müssen und eignet sich ideal für Fallbacks und Redundanzen Laden Sie eine Ressource aus mehreren Quellen (CDN, lokal usw.) oder stellen Sie im Fehlerfall eine Verbindung zu verschiedenen Servern her.

Zurück zur Zusammenfassung

---

In einer zunehmend asynchronen digitalen Welt ist das Verständnis für die Verwaltung mehrerer gleichzeitiger Vorgänge in JavaScript zu einer wesentlichen Fähigkeit für Entwickler geworden. In diesem Artikel untersuchen wir einige wichtige Promises-Methoden anhand einiger Beispiele und zeigen, wie jede von ihnen funktioniert und, was noch wichtiger ist, wann und warum Sie eine der anderen vorziehen sollten.

Bis zum nächsten Mal (und ich versprecheich komme bald wieder)!

Das obige ist der detaillierte Inhalt vonExplorando-Versprechen: .all vs. .allSettled / .race vs. .any. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!