Heim > Web-Frontend > js-Tutorial > Einführung in die Methoden Promise.all und Promise.race in JavaScript (mit Code)

Einführung in die Methoden Promise.all und Promise.race in JavaScript (mit Code)

不言
Freigeben: 2019-03-15 14:10:10
nach vorne
3622 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Einführung in die Methoden Promise.all und Promise.race (mit Code). Ich hoffe, dass er Ihnen weiterhilft .

Die Promise.all()-Methode akzeptiert ein Array (oder ein anderes iterierbares Objekt), das ein Promise-Objekt oder einen normalen Wert als Parameter enthält, und gibt ein Promise zurück. Wenn alle Promise-Objekte aufgelöst sind, werden alle Auflösungswerte als Ergebnis der Promise.all()-Auflösung als Arrays verwendet. Wenn eines der Versprechen abgelehnt wird, wird der Wert der ersten Ablehnung sofort als Ablehnungsergebnis von Promise.all() verwendet.

Wenn Sie in praktischen Anwendungen Daten von mehreren Schnittstellen abrufen und nach dem Eintreffen aller Daten bestimmte Vorgänge ausführen müssen, können Sie Promise.all() verwenden.

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
Promise.all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]
Nach dem Login kopieren

Das Folgende ist die Code-Implementierung, die einen Zähler erfordert, um zu bestätigen, dass alle Versprechensobjekte aufgelöst wurden, und dann das Ergebnis zurückzugeben. Ein Array ist erforderlich, um die zurückgegebenen Ergebnisse der Reihe nach aufzuzeichnen. Wenn Sie zum Durchlaufen eine Methode wie for (var i = 0; i < iterable[i]; i++) verwenden, müssen Sie eine Ebene von self verschachteln, um das Problem zu vermeiden, dass der Abschluss nur Variablenreferenzen übergeben kann -Ausführen von Funktionen. Hier wird eine for...in-Schleife verwendet, damit die Funktion neben Arrays auch andere iterierbare Objekte unterstützen kann, beispielsweise die Datenstruktur Set.

const all = function (iterable) {
  return new Promise(function (resolve, reject) {
    let count = 0, ans = new Array(count)
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === 'object' && typeof v.then === 'function') {
        v.then(function (res) {
          ans[i] = res
          if (--count === 0) resolve(ans)
        }, reject)
        count++
      } else {
        ans[i] = v
      }
    }
  })
}

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]
Nach dem Login kopieren

Wie Promise.all() akzeptiert die Methode Promise.race() ein Array (oder ein anderes iterierbares Objekt), das Promise-Objekte oder gewöhnliche Werte enthält, als Parameter und gibt ein Promise zurück. Sobald eines der Promise-Objekte aufgelöst wird, wird der aufgelöste Wert sofort als Ergebnis der Promise.race()-Auflösung verwendet. Wenn eines der Objekte ablehnt, wird Promise.race dies ebenfalls sofort ablehnen.

Wenn in praktischen Anwendungen dieselben Daten von mehreren Schnittstellen abgerufen werden können und die zuerst eintreffenden Schnittstellendaten zuerst verwendet werden, kann Promise.race () verwendet werden, und die erforderliche Zeit entspricht der schnellsten eine davon. Hier ist der Code:

const race = function (iterable) {
  return new Promise(function (resolve, reject) {
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === 'object' && typeof v.then === 'function') {
        v.then(resolve, reject)
      } else {
        resolve(v)
      }
    }
  })
}
const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = new Promise(function (resolve) { setTimeout(resolve, 100, 2) })
race([p1, p2]).then(function (res) { console.log(res) }) // 2
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in die Methoden Promise.all und Promise.race in JavaScript (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
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