Bringen Sie Ihnen bei, ein einfaches Versprechen Schritt für Schritt umzusetzen

Schritt 1: Erstellen Sie das Framework

1. Zuerst müssen wir hier den Hauptteil einer Promise-Funktion platzieren und ihm dann die Funktionen zur Resolve- und Reject-Ausführung hinzufügen.

  Funktion Promise(execotor) {}

2. Das ursprüngliche Versprechen hat zwei Hauptmethoden: then und catch, also müssen wir then und catch an den Prototyp des Versprechens anhängen

  Promise.prototype.then = Funktion (bei Lösung, bei Ablehnung) {}
  Promise.prototype.catch = Funktion (bei Ablehnung) {}

3. Fügen Sie dem Versprechen mehrere gängige Methoden hinzu: „resolve“, „reject“, „all“, „race“ usw.

resolve: Gibt ein Promise-Objekt mit einem angegebenen Ergebnis zurück

  Promise.resolve = Funktion (Wert) { }

Reject: Methode, die einen Fehlschlagsstatus zurückgibt

  Promise.reject = Funktion (Wert) { }

all: Gibt ein Promise-Objekt zurück. Dieser Status gilt nur dann als erfolgreich, wenn alle Promises zurückgegeben werden.

  Promise.all = Funktion (Wert) { }

Race: Gibt ein Promise-Objekt zurück, dessen Status durch das erste zurückgegebene Objekt bestimmt wird. Welche Funktion im Race auch immer zuerst ausgeführt wird, gibt den ersten Wert direkt zurück, und die anderen werden weiterhin ausgeführt.

  Promise.race = Funktion (Wert) { }

4. Globale Erklärung von mypromise

  window.Promise = Versprechen

5. Erstellen Sie eine selbstausführende Funktion, um alle oben genannten Inhalte zu umschließen

(Funktion (Fenster) {

})()

Schritt 2 Füllen Sie das erstellte Promise-Framework aus

1. Füllfunktion Promise()

(1) let self = this behebt das this innerhalb einer Funktion. Dieses this wird später eine große Rolle spielen.

(2) self.status = 'pending' fügt dem Promise-Funktionskörper einen Basisstatus 'pending' hinzu

(3) self.data = undefined erstellt eine Datenquelle zum Speichern der von resolve zurückgegebenen Ergebnisse

(4) self.callbacks = [] erstellt ein Array, um alle Callbacks im Promise zu speichern

2. Füllen Sie die Funktion resolve() aus

(1) if (self.status !== 'pending') { return } Prüfe, ob der Status des aktuellen eingehenden Prozesses aussteht. Wenn ja, fahre mit der folgenden Operation fort. Wenn nicht, kehre direkt zurück.

Es gibt drei Zustände im Promise: ausstehend, gelöst und abgelehnt. Diese drei Zustände sind Umschaltvariablen. Wenn der Zustand von ausstehend in andere Zustände wechselt, kann er nicht mehr geändert werden.

(2) self.status = 'resolved' ändert den Status des Prozesses auf gelöst

(3) self.data = value speichert den Wert, der dann im Callback verwendet wird.

(4) Fügen Sie den wichtigsten Teil der Ausführungsfunktion ein. Wenn in sele.data eine Rückruffunktion ausgeführt werden muss, führen Sie diese sofort asynchron aus.

    wenn (self.callbacks.length > 0) {
      setzeTimeout(() => {
        self.callbacks.fürJeden(callbackObj => {
          RückrufObj.onResolved(Wert)
        })
      }, 0)
    }

3. Füllfunktion reject()

(1) Wie die Funktion „resolve“, hier abgekürzt

4. Füllen Sie die Execotor-Methode aus

Wenn während der Ausführung des Promise-Hauptteils ein Fehler auftritt, wird die Fehlermeldung von der Catch-Funktion erfasst, die dann zur Funktion springt, um separat eine Reject-Anweisung auszuführen.

     versuchen {
       Vollstrecker (auflösen, ablehnen)
     } Fehler abfangen {
       ablehnen(Fehler)
     }

5. Füllen Sie die .then-Funktion aus

Zuerst müssen wir den Status des eingehenden Prozesses unterscheiden. Wenn er aussteht, speichern wir die Rückruffunktion. Wenn er nicht aussteht, tun wir, was er tun soll.

(1) if (self.status === 'pending') wenn der aktuelle Status ausstehend ist, speichern wir ihn

    selbst.callbacks.push({
      beiGelöst() { beiGelöst(self.data) },
      beiAbgelehnt() { beiAbgelehnt(self.data) }
    })

(2) sonst wenn (self.status === 'resolved'), wenn der Status aufgelöst ist

Lassen Sie es uns freudig ausführen.

    setzeTimeout(() => {
      bei Gelöst(self.data)
    }, 0)

Es gibt jedoch einen Zustand, in dem „Resolve“ nicht ausgeführt wird, sich der Zustand aber geändert hat. Wir können „Resolve“ nicht ausführen, sondern führen stattdessen „Rejected“ aus.

   anders{
     setzeTimeout(() => {
       beiAbgelehnt(self.data)
     }, 0)
   }

Nach zwei Schritten, die so „einfach“ sind wie das Einlegen eines Elefanten in einen Kühlschrank, haben wir ein einfaches Versprechen umgesetzt

Es ist ganz einfach, nicht wahr? Rufen Sie Ihre Freunde an, um es gemeinsam auszuprobieren!

Zusammenfassen

Dies ist das Ende dieses Artikels über die Umsetzung eines einfachen Versprechens. Weitere Informationen zur Umsetzung eines einfachen Versprechens finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!