Heim > Web-Frontend > js-Tutorial > Hauptteil

Implementierung der Verwendung von Promise-Objekten in JavaScript

WBOY
Freigeben: 2023-06-16 09:04:39
Original
935 Leute haben es durchsucht

JavaScript ist eine asynchrone Programmiersprache. Bei der Verarbeitung asynchroner Vorgänge ist die Verwendung von Rückruffunktionen eine traditionelle Methode. Zu viele verschachtelte Ebenen von Rückruffunktionen führen jedoch zu einer schlechten Lesbarkeit des Codes und zu hohen Wartungskosten. Um diese Probleme zu lösen, hat ES6 das Promise-Objekt eingeführt, das asynchrone Vorgänge besser verarbeiten kann.

Das Promise-Objekt ist ein Objekt, das den endgültigen Abschluss (Erfolg) oder Misserfolg (Fehler) einer asynchronen Operation darstellt. Es lässt asynchronen Code wie synchronen Code aussehen und vermeidet Schichten mit verschachteltem Hintergrund. In JavaScript ist die Verwendung von Promise-Objekten in drei Phasen unterteilt:

  1. Erstellen eines Promise-Objekts
  2. Nachdem die asynchrone Operation ausgeführt wurde, werden jeweils zwei Situationen (Erfolg und Misserfolg) verarbeitet
  3. Erhalten Sie die Ergebnisse der asynchronen Operation

Als nächstes werden wir uns die Umsetzung jeder Phase einzeln ansehen.

  1. Promise-Objekt erstellen

Wir können das Schlüsselwort new verwenden, um ein Promise-Objekt zu erstellen und eine Executor-Funktion zu übergeben. Die Executor-Funktion verfügt über zwei Parameter: „resolve“ und „reject“. „resolve“ wird verwendet, um den Erfolg des asynchronen Vorgangs zu behandeln, und „reject“ wird verwendet, um den Fehler des asynchronen Vorgangs zu behandeln.

Erstellen Sie beispielsweise ein Promise-Objekt, um einen asynchronen Vorgang zu simulieren:

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const result = Math.random();
    if (result >= 0.5) {
      resolve(result);
    } else {
      reject('操作失败');
    }
  }, 1000);
});
Nach dem Login kopieren

Im obigen Beispiel wird ein asynchroner Vorgang durch setTimeout simuliert. Wenn die zufällig generierte Zahl größer oder gleich 0,5 ist, ist der asynchrone Vorgang erfolgreich; andernfalls schlägt er fehl und es wird eine Fehlermeldung ausgegeben.

  1. Nachdem der asynchrone Vorgang abgeschlossen ist, werden jeweils zwei Situationen (Erfolg und Misserfolg) behandelt.

Im Allgemeinen müssen wir nach Abschluss des asynchronen Vorgangs die Ausführungsergebnisse verarbeiten. Mit Promise-Objekten können wir Erfolg und Misserfolg behandeln, indem wir die Methoden then() und Catch() aufrufen.

Im Erfolgsfall müssen wir eine Callback-Funktion als Parameter der then()-Methode übergeben. Die Callback-Funktion erhält das Ergebnis der erfolgreichen asynchronen Operation als Parameter.

Im Fehlerfall müssen wir eine Callback-Funktion als Parameter der Catch()-Methode übergeben. Die Callback-Funktion erhält als Parameter den Grund, warum der asynchrone Vorgang fehlgeschlagen ist.

Fahren Sie mit dem obigen Beispiel fort und behandeln Sie den Erfolg und Misserfolg des asynchronen Vorgangs:

promise.then((result) => {
  console.log(`操作成功,结果为:${result}`);
}).catch((reason) => {
  console.log(`操作失败,原因为:${reason}`);
});
Nach dem Login kopieren

Wenn im obigen Beispiel der asynchrone Vorgang erfolgreich ist, wird die Rückruffunktion innerhalb der Methode then() ausgeführt. Im Gegenteil, wenn der asynchrone Vorgang fehlschlägt, wird die Rückruffunktion innerhalb der Catch()-Methode ausgeführt. Auf diese Weise können wir problemlos eine weitere Verarbeitung basierend auf den Ergebnissen asynchroner Vorgänge durchführen.

  1. Erhalten Sie die Ergebnisse asynchroner Vorgänge

In einigen Fällen müssen wir die Ergebnisse asynchroner Vorgänge abrufen, beispielsweise wenn eine Abhängigkeit zwischen zwei asynchronen Vorgängen besteht. Zu diesem Zeitpunkt können Sie die vom Promise-Objekt bereitgestellte statische Methode Promise.all () verwenden, die mehrere Promise-Objekte zu einem neuen Promise-Objekt zusammenführen und nach Abschluss aller Vorgänge alle Operationsergebnisse zurückgeben kann.

Im folgenden Code erstellen wir beispielsweise zwei Promise-Objekte, simulieren jeweils zwei asynchrone Vorgänge und geben die Ergebnisse aus, nachdem beide abgeschlossen sind:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('操作1完成');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('操作2完成');
  }, 2000);
});

Promise.all([promise1, promise2]).then((results) => {
  console.log(results);
}).catch((reason) => {
  console.log(`操作失败,原因为:${reason}`);
});
Nach dem Login kopieren

Beachten Sie im obigen Beispiel, dass die Promise.all()-Methode An empfängt Array, das Promise-Objekte als Parameter enthält. Wenn alle Promise-Objekte abgeschlossen sind, wird die Rückruffunktion innerhalb der then()-Methode ausgeführt und die Ergebnisse der beiden asynchronen Vorgänge ausgegeben.

Kurz gesagt, die Verwendung von Promise-Objekten kann die asynchrone Programmierung verbessern. Sie kann den Code für asynchrone Vorgänge vereinfachen und die Lesbarkeit und Wartbarkeit des Codes verbessern. Das Obige ist der detaillierte Prozess der Verwendung von Promise-Objekten in JavaScript. Ich hoffe, dass es für die Leser hilfreich ist.

Das obige ist der detaillierte Inhalt vonImplementierung der Verwendung von Promise-Objekten in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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