Kurze Analyse der Einführung und grundlegenden Verwendung von Promise

Kurze Analyse der Einführung und grundlegenden Verwendung von Promise

Promise ist eine neue Lösung für die asynchrone Programmierung, die von ES6 eingeführt wurde. Die Syntax von Promise ist - ein Konstruktor,
Wird verwendet, um asynchrone Vorgänge zu kapseln und deren Erfolgs- oder Fehlerergebnisse zu erhalten.

  • Promise-Konstruktor: Promise (Executor) {}
  • Promise.prototype.then-Methode
  • Promise.prototype.catch-Methode

Grundlegende Verwendung von Promise

Instanziieren eines Promises

neues Versprechen()

Beim Instanziieren wird ein Parameter akzeptiert, nämlich eine Funktion.

Diese Funktion hat zwei Parameter: „Auflösen“ und „Ablehnen“.

var Versprechen = neues Versprechen ((lösen, ablehnen) => {
    // Es wird verwendet, um asynchrone Operationen zu handhaben})

Wir verwenden hier Timer, um asynchrone Operationen zu simulieren

Promise hat drei Zustände: in Bearbeitung, erfolgreich und fehlgeschlagen.

var Versprechen = neues Versprechen ((lösen, ablehnen) => {
    // Dies ist eine asynchrone Operation setTimeout(() => {
        // Hier wird das Erhalten der Daten simuliert var data = 'erhaltene Daten'
        // Nachdem wir die Daten erhalten haben, können wir die Methoden „Resolve“ und „Reject“ aufrufen, um den Status des Promise-Objekts zu ändern. „Resolve“ (Daten) // „Resolve“ kann den Status des Promise-Objekts auf „Erfolgreich“ ändern, „Reject()“ kann den Status des Promise-Objekts auf „Fehler“ ändern. }, 1000);
})

Die then-Methode von Promise

Wenn der Status des Promise-Objekts Erfolg oder Misserfolg ist, können Sie die then-Methode aufrufen

Die then-Methode akzeptiert zwei Parameter und beide Parameter sind Werte vom Funktionstyp

Wenn das Promise-Objekt erfolgreich ist, wird der erste Parameter der then-Methode aufgerufen

Das heißt, wenn der Status des Promise-Objekts fehlgeschlagen ist, wird der zweite Parameter der then-Methode aufgerufen

Der zweite Parameter ist optional und kann weggelassen werden, wenn Sie keine Fehler erfassen müssen.

Die Parameter haben einen formalen Parameter, die erfolgreiche Funktion heißt „value“ und die fehlgeschlagene Funktion heißt „err“.

versprechen.dann(Wert => {
// Wenn resolve(data) in der asynchronen Funktion aufgerufen wird, das heißt, wenn der Status des Promise-Objekts erfolgreich ist, wird der erste Parameter der then-Methode console.log(value) aufgerufen; // Der Wert „Hallo Welt“ sind die von der Methode resolve() übergebenen Daten}, err => {
   // Wenn reject(data) in der asynchronen Funktion aufgerufen wird, d. h. wenn der Status des Promise-Objekts fehlgeschlagen ist, wird der zweite Parameter der then-Methode console.log(err) aufgerufen; // err sind die von der reject()-Methode übergebenen Daten})

Das Rückgabeergebnis des Aufrufs der then-Methode ist ein Promise-Objekt, und der Status des Objekts wird durch das Ausführungsergebnis der Rückruffunktion bestimmt.

Wenn das in der Rückruffunktion zurückgegebene Ergebnis eine Eigenschaft ist, die nicht dem Typ „Promise“ entspricht, lautet der Status „Erfolgreich“ und der Rückgabewert ist der Erfolgswert des Objekts.

lass Daten = Versprechen.dann((Wert) => {
    // konsole.log(Wert.Ergebnis);
    // Nicht-Promise zurückgeben // val.result zurückgeben
 
    // Versprechen zurückgeben return new Promise( (auflösen, ablehnen) => {
        // auflösen('ok')
        ablehnen('fehler')
    })
}, err => {
console.log(fehler);
})
// Gibt ein Nicht-Promise zurück und der Status ist Erfolg. Der Rückgabewert ist der Erfolgswert des Objekts. // Das Rückgabeergebnis ist ein Promise-Objekt. Der Objektstatus wird durch das Ausführungsergebnis der Rückruffunktion bestimmt. // Löst einen Fehler aus und der Status ist Fehlschlag. console.log(data);

Dann kann es in einer Kette aufgerufen werden. Informationen zur Verwendung finden Sie im folgenden Anwendungsbeispiel für Promise.

Promise-Catch-Methode

Die Catch-Methode von Promise ist ein Alias ​​von then(null, rejection) und wird verwendet, um einen Rückruf anzugeben, wenn ein Fehler auftritt.

Wenn der Status des Promise-Objekts aufgelöst ist, wird die angegebene Rückruffunktion der then-Methode aufgerufen

const promise = neues Versprechen((lösen, ablehnen) => {
    lösen('ok')
})
versprechen.dann(val => {
    console.log(Wert); // ok
}).catch(err => {
    console.log(fehler);
})

Wenn der Status des Versprechens abgelehnt wird, wird die Rückruffunktion der Catch-Methode aufgerufen, um dieses Problem zu beheben.

const promise = neues Versprechen((lösen, ablehnen) => {
    ablehnen('fehler')
})
versprechen.dann(val => {
    konsole.log(Wert);
}).catch(err => {
    console.log(err); // Fehler
})

Wenn während der Ausführung der then-Methode ein Fehler auftritt, wird dieser ebenfalls von der catch-Methode erfasst.

const promise = neues Versprechen((lösen, ablehnen) => {
    lösen('Fehler')
})
versprechen.dann(val => {
    console.log('ok'); // ok
    werfen Sie „Etwas ist schiefgelaufen!“ ! ' // Dann auftretende Fehler werden weiterhin von catch abgefangen}).catch(err => {
    console.log(err); // Etwas ist schiefgelaufen! !
})

Der Fehler eines Promise-Objekts ist ein sprudelnder Charakter und wird zurückgegeben, bis er abgefangen wird. Das heißt, der Fehler wird immer durch den nächsten Catch abgefangen.

const promise = neues Versprechen((lösen, ablehnen) => {
    lösen('ok')
})
versprechen.dann(val => {
    returniere neues Promise((lösen, ablehnen) => {
        ablehnen('fehler')
    })
})
.then(val => {
    returniere neues Promise((lösen, ablehnen) => {
        ablehnen('fehler')
    })
})
.catch(err => {
    // Alle oben generierten Fehler können mit „catch console.log(err);“ abgefangen werden. // err
})

Definieren Sie im Allgemeinen nicht die Callback-Funktion für den abgelehnten Status (also den zweiten Parameter von then), sondern verwenden Sie immer die Catch-Methode.

Promise App

Versprechen, Dateien zu lesen, mehrere Dateien werden kontinuierlich aufgerufen

In diesem Beispiel verwenden wir das Node.js-Dateimodul

// Dateiinformationen lesen const fs = require('fs')

Im folgenden Code verwenden wir promise, um die asynchrone Funktion zu umschließen

Schauen wir uns zunächst den normalen Dateilesevorgang an

// Dateiinformationen lesen const fs = require('fs')
 
// Wenn das Lesen fehlschlägt, ist „err“ ein Fehlerobjekt, und wenn das Lesen erfolgreich ist, sind „data“ die Daten fs.readFile('./01.txt', (err, data) => {
    // Bestimmen Sie, ob ein Fehler auftritt. Wenn ein Fehler auftritt, drucken Sie das Fehlerobjekt.
    wenn (Fehler) {
        console.log(fehler);
        zurückkehren
    }
    Konsole.log(Daten.toString());
})

Wenn wir die Datei nach dem erfolgreichen Lesen weiter lesen möchten, müssen wir in der Rückruffunktion weiterhin fs.readFile ... verwenden, um die Datei zu lesen. Wenn die Verschachtelungsebene zu hoch ist, wird eine Rückrufhölle gebildet.

Als nächstes verwenden wir die Promise-Methode, um die Datei zu lesen

// Dateiinformationen lesen const fs = require('fs')
 
const promise = neues Versprechen((lösen, ablehnen) => {
    fs.readFile('./01.txt', (err, data) => {
        wenn (Fehler) returniere ablehnen(Fehler)
        auflösen (Daten)
    })
})
 
versprechen.dann(val => {
    console.log(val.toString());
    //Gibt ein Promise-Objekt zurück return new Promise((resolve, reject) => {
        fs.readFile('./02.txt', (err, data) => {
            wenn (Fehler) returniere ablehnen(Fehler)
            auflösen (Daten)
        })
    })
}, err => {
    console.log(fehler);
})
// Das vorherige gibt dann ein Promise-Objekt zurück, wir können fortfahren.
.then(val => {
    console.log(val.toString());
    returniere neues Promise((lösen, ablehnen) => {
        fs.readFile('./03.txt', (err, data) => {
            wenn (Fehler) returniere ablehnen(Fehler)
            auflösen (Daten)
        })
    })
}, err => {
    console.log(fehler);
})
.then(val => {
    console.log(val.toString());
}, err => {
    console.log(fehler);
})

Versprechen kapselt Ajax-Anfrage

Kapselt die Ajax-Anfrage und verwendet sie dann, um das Ergebnis abzurufen. Dadurch sieht der Code prägnanter aus und das Problem der Callback-Hölle wird gelöst.

const promise = neues Versprechen((lösen, ablehnen) => {
    // Objekt erstellen const xhr = new XMLHttpRequest()
    // Initialisieren Sie xhr.open("GET", 'https://api.apiopen.top/getSongPoetry?page=1&count=20')
    // Senden Sie xhr.send()
    // Bind-Ereignisverarbeitungsantwortergebnis xhr.onreadystatechange = function () {
        // Beurteilung // Beim Eintritt in die letzte Phase werden alle Antworttexte zurückgegeben, wenn (xhr.readyState === 4) {
            // Bestimmen Sie den Antwortcode, wenn (xhr.status >= 200 && xhr.status < 300) {
                // Zeigt Erfolg an // console.log(JSON.parse(xhr.response));
                auflösen(JSON.parse(xhr.response))
            } anders {
                ablehnen(xhr.status)
            }
        }
    }
})
// Rückrufversprechen angeben.then((val) => {
    konsole.log(Wert);
}, err => {
    console.log(fehler);
})

Dies ist das Ende dieses Artikels über die Einführung und grundlegende Verwendung von Promise. Weitere relevante Inhalte zur Verwendung von Promise finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • JavaScript verwendet Promise zur Verarbeitung mehrerer wiederholter Anfragen
  • Detaillierte Erläuterung der ersten Verwendung von Promise in der asynchronen JavaScript-Programmierung
  • Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Promise verwenden
  • js verwendet Promise, um einfaches Ajax-Caching zu implementieren
  • WeChat-Applet verwendet Promise, um Rückrufe zu vereinfachen
  • Verwenden von Promise in JS zum Implementieren von Ampelbeispielcode (Demo)

<<:  Reine CSS-Implementierung eines Radio- und Checkbox-Effektbeispiels

>>:  Zusammenfassung gängiger Docker-Befehle

Artikel empfehlen

Detaillierte Erläuterung der Wissenspunkte zur asynchronen Programmierung in nodejs

Einführung Weil JavaScript standardmäßig ein Thre...

Grafisches Tutorial zur Deinstallation und Installation von MySQL unter Linux

Dies ist mein erster Blog. Ich bin seit zwei Jahr...

Details nach dem Setzen des src des Iframes auf about:blank

Nachdem die Quelle des Iframes auf „about:blank“ g...

Einführung in die grafischen Kompositions- und Satzfunktionen des Webdesigns

Alles braucht ein Fundament. Um ein Haus zu bauen...

Einige kleine Methoden, die häufig in HTML-Seiten verwendet werden

Fügen Sie das Tag <Head> hinzu <meta http...

JavaScript-Array-Deduplizierungslösung

Inhaltsverzeichnis Methode 1: Set: Es handelt sic...

Einführung in das MySQL Connection Control Plugin

Inhaltsverzeichnis 1. Einführung in das Verbindun...

Vier Kategorien von CSS-Selektoren: Basis, Kombination, Attribut, Pseudoklasse

Was ist ein Selektor? Die Rolle des Selektors bes...

So installieren Sie Git unter Linux

1. Einleitung Git ist ein kostenloses, verteiltes...

Detailliertes Tutorial zur Installation von ffmpeg unter Linux

1. Installieren Sie ffmpeg unter Centos Linux 1. ...