Ein tiefer Einblick in JavaScript-Promises

1. Was ist Promise?

Ein Promise-Objekt ist wie ein Container. Es enthält einen Codeabschnitt, der eine bestimmte Operation ausführt. Nachdem der Code ausgeführt wurde, werden zwei Rückruffunktionen ausgeführt, eine ist die Rückruffunktion für eine erfolgreiche Operation (Auflösen) und die andere ist die Rückruffunktion für eine fehlgeschlagene Operation (Ablehnen).

2. Warum gibt es Promise?

Promise wurde entwickelt, um mehrere Probleme mit dem Callback-Mechanismus zu lösen, der bei der asynchronen Programmierung verwendet wird:

• Rückrufhölle
  

Callback-Hölle: Promise kann verschachtelte Callbacks in .then().then()… umwandeln, wodurch das Schreiben und Lesen von Code intuitiver wird

• Schwierige Fehlerbehandlung: Promise ist bei der Fehlerbehandlung klarer und intuitiver als Callback
• Es ist schwierig, Code zu schreiben, der mehrere asynchrone Operationen gleichzeitig ausführt: Promises können diese Situation problemlos bewältigen

Drei allgemeine Promise-APIs

• Nachdem die .then()-Methode im Promise ausgeführt wurde, kann sie ausgeführt werden. Sie hat zwei Parameter, die Rückruffunktion für Erfolg und die Rückruffunktion für Fehler.
• resolve Verwenden Sie die Methode promise.resolve, um schnell ein Promise-Objekt zurückzugeben
• reject Verwenden Sie die Methode promise.reject, um schnell ein Promise-Objekt zurückzugeben
• alle Führt mehrere parallele asynchrone Vorgänge gleichzeitig aus.

Vier häufige Verwendungszwecke von Promise

1 Wie löst man die Callback-Hölle?

.then() ist eine Funktion, die keinen Wert zurückgibt, was dazu führt, dass die Promise-Kette nicht mehr fortgesetzt wird. Zu diesem Zeitpunkt hat ein späterer Aufruf von .then() keine Auswirkung.

Versprechen.resolve('foo').dann(Funktion(en) {
  Konsole.log(s);
}).dann(Funktion(en) {
  // Nie ausgeführt
  Konsole.log(s);
});

Es gibt eine Rückgabewertfunktion in .then(), die es der Promise-Kette ermöglicht, fortzufahren

Versprechen.resolve('foo').dann(Funktion(en) {
  Konsole.log(s);
  gibt s + 'bar' zurück;
}).dann(Funktion(en) {
  Konsole.log(s);
});

// foo
// foobar

.then() hat eine Funktion, die einen Wert zurückgibt, und der Rückgabewert ist ein weiteres Promise-Objekt, das auch dafür sorgt, dass das Promise fortgesetzt wird. Der Unterschied zum ersteren besteht darin, dass ein erneuter Aufruf von .then() eine asynchrone Operation auslösen kann, sodass die nächste Runde von resolve() nicht sofort ausgelöst wird.

Versprechen.resolve('foo').dann(Funktion(en) {
  returniere neues Promise((lösen, ablehnen) => {
      Konsole.log(s);
      setzeTimeout(() => {
          Auflösung(s + 'bar')
        }, 1000);
    });
}).dann(Funktion(en) {
  Konsole.log(s);
});


// foo
// foobar (wird 1 Sekunde nach der Anzeige von „foo“ angezeigt)

2 Promise.all () implementiert den gleichzeitigen synchronen Empfang von Rückgabewerten. Beschreibung des Anwendungsszenarios (Sie müssen Daten von mehreren Schnittstellen gleichzeitig aufrufen und die Daten auf dem Front-End verarbeiten. Dazu müssen Sie warten, bis alle Schnittstellen Daten zurückgeben, bevor Sie den Vorgang ausführen können.)

//Demo
const promise1 = Versprechen.resolve(3);
Konstante Versprechen2 = 42;
const promise3 = neues Versprechen((lösen, ablehnen) => {
  setTimeout(auflösen, 100, 'foo');
});
 
Versprechen.alles([Versprechen1, Versprechen2, Versprechen3]).dann((Werte) => {
  konsole.log(Werte);
});
// erwartete Ausgabe: Array [3, 42, "foo"]

Unterschied zwischen Promise.all() und Sync Await

//Sync-Wartevorgang, Zeit 2 Sekunden, async-Funktion Index2() {
      konsole.zeit()
      const p1 = warte auf neues Promise((lösen, ablehnen) => {
        console.log('Hier ist p1')
        setzeTimeout(() => {
          resolve('Hier ist die Rückgabe von p1')
        }, 1000)
      })
      const p2 = warte auf neues Promise((lösen, ablehnen) => {
        console.log('Hier ist p2')
        setzeTimeout(() => {
          resolve('Hier ist die Rückgabe von p2')
        }, 1000)
      })
      Konsole.log(p1)
      Konsole.log(p2) 
      konsole.timeEnd()
   }
    Index2();

// Verwenden Sie Promise.all(), um den Aufruf zu implementieren. Betriebszeit 1 Sekunde Funktion Index() {
      konsole.zeit()
      const p1 = neues Versprechen((lösen, ablehnen) => {
        console.log('Hier ist p1')
        setzeTimeout(() => {
          resolve('Hier ist die Rückgabe von p1')
        }, 1000)
      })
      const p2 = neues Versprechen((lösen, ablehnen) => {
        console.log('Hier ist p2')
        setzeTimeout(() => {
          resolve('Hier ist die Rückgabe von p2')
        }, 1000)
      })
      Versprechen.alles([p1, p2]).dann((val) => {
        console.log(Wert)
        konsole.timeEnd()
      })
}

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!