Front-End-JavaScript-Versprechen

1. Was ist Promise

Promise ist eine Lösung für asynchrone Programmierung. ES6 bietet bereits native Promise -Objekte. Ein Promise -Objekt kann die folgenden Zustände aufweisen ( fulfilled und rejected ändern sich nach der Bestätigung nicht mehr):

• pending : Der Ausgangszustand, der weder eingelöst noch abgelehnt ist.
• fulfilled : bedeutet, dass der Vorgang erfolgreich abgeschlossen wurde.
• rejected : bedeutet, dass der Vorgang fehlgeschlagen ist.

2. Grundlegende Verwendung

Das Promise -Objekt ist ein Konstruktor, der zum Erstellen Promise Instanz verwendet wird. Es erhält zwei Parameter: resolve und reject .

• Die Funktion von resolve besteht darin, den Status Promise Objekts von pending in fulfilled zu ändern. Es wird aufgerufen, wenn der asynchrone Vorgang erfolgreich ist, und übergibt das Ergebnis des asynchronen Vorgangs als Parameter.
• Die Funktion von reject besteht darin, den Status Promise Objekts von pending rejected zu ändern. Es wird aufgerufen, wenn der asynchrone Vorgang fehlschlägt, und der vom asynchronen Vorgang gemeldete Fehler wird als Parameter übergeben.
  

const promise = new Promise(Funktion(lösen, ablehnen) {
  // ... 
  if (/* asynchroner Vorgang erfolgreich*/){
    Auflösung (Wert);
  } anders {
    ablehnen(Fehler);
  }
});

Nachdem Promise -Instanz generiert wurde, verwenden Sie die then Methode, um die Rückruffunktionen für fulfilled Status bzw. rejected Status anzugeben.

• empfängt then zwei Parameter, der erste ist die Rückruffunktion, wenn der Status Promise -Objekts fulfilled wird, und der zweite ist die Rückruffunktion, wenn der Status rejected wird.
  
• catch empfängt die Rückruffunktion, wenn der Status Promise -Objekts rejected wird.
  

Versprechen.dann(Funktion (Wert){
 // ....
},Funktion (Fehler){
 // .... ähm
})
  
Versprechen.dann(Funktion (Wert){
 // ....
}).catch(Funktion (Fehler){
    // ....
})

3. Promise-Methoden

3.1 Versprechen.prototype.then()

Die then Methode ist auf dem Prototypobjekt Promise.prototype definiert. Wie bereits erwähnt, akzeptiert sie zwei optionale Parameter. Der erste Parameter ist die Rückruffunktion fulfilled Zustands und der zweite Parameter ist die Rückruffunktion rejected Zustands.

Die then Methode gibt eine neue Promise -Instanz zurück, was uns die Verwendung von Kettenschreiben erleichtert. Wenn Sie beispielsweise nach then “ „then“ schreiben, wird das Rückgabeergebnis nach Abschluss der ersten Rückruffunktion als Parameter an die zweite Rückruffunktion übergeben. Mit diesem Verkettungsansatz können Sie ganz einfach einen Satz von Rückruffunktionen angeben, die nacheinander aufgerufen werden sollen.

loadData().then(Funktion (Wert){
    Rückgabe 3
}).dann(Funktion (num){
    console.log("ok", num) // 3
})

3.2 Versprechen.prototype.catch()

Mit der catch -Methode wird eine Rückruffunktion angegeben, wenn ein Fehler auftritt. Wenn eine asynchrone Operation einen Fehler auslöst, ändert sich der Status in rejected und die von catch() angegebene Rückruffunktion wird aufgerufen, um den Fehler zu behandeln.

const promise = new Promise(Funktion(lösen, ablehnen) {
  throw new Error('unbekannter Fehler'); // Fehlerstatusänderungen auslösen in -> Ablehnen
});
const promise = new Promise(Funktion(lösen, ablehnen) {
  reject('unbekannter Fehler') // Verwenden Sie die Methode reject(), um den Status in -> reject zu ändern.
});
versprechen.catch(Funktion(Fehler) {
  konsole.log(Fehler);
});

Der Fehler Promise -Objekts wird rückwärts weitergegeben, bis er erkannt wird. Beispielsweise erfasst der folgende Code: catch die in loadData und den beiden „thens“ ausgelösten Fehler.

loadData().then(Funktion(Wert) {
  gibt loadData(Wert) zurück;
}).dann(Funktion(Benutzer) {
 
}).catch(Funktion(err) {
  // Fehler der ersten drei Promises behandeln });

Wenn wir catch() nicht festlegen, gibt Promise den Fehler nicht aus, wenn ein Fehler auftritt, was bedeutet, dass die Ausführung des externen Codes nicht beeinträchtigt wird.

const promise = new Promise(Funktion(lösen, ablehnen) {
   resolve(a) // Referenzfehler: a ist nicht definiert
});
Versprechen.dann(Funktion(Wert) {
  console.log('Wert ist ', Wert)
});
setTimeout(() => { console.log('Code wird ausgeführt') }, 1000); // Code wird ausgeführt

3.3 Versprechen.prototype.finally()

finally() führt Vorgänge unabhängig vom Endzustand Promise Objekts aus. Nachfolgend finden Sie eine allgemeine Struktur, in der wir Promise verwenden.

versprechen
.dann(Ergebnis => {···})
.catch(Fehler => {···})
.finally(() => {···});

3.4 Versprechen.alles()

Promise.all() kann mehrere Promise Instanzen in eine neue Promise Instanz zusammenfassen und zurückgeben.

const Versprechen = Versprechen.alles([p1, p2, p3]);

Der neue promise Status hängt vom „eingehenden promise “ ab.

• Erst wenn alle „eingehenden promise “ fulfilled wurden, wird sein Status fulfilled . Zu diesem Zeitpunkt bilden die Rückgabewerte der „eingehenden promise “ ein Array und werden an die Rückruffunktion promise übergeben.
• Wenn eines der „eingehenden Versprechen“ abgelehnt wird, ändert sich der Status des neuen promise zu „ rejected “ und der Rückgabewert des ersten reject promise wird an promise -Rückruffunktion übergeben.
  

const verspricht = [1,2,3,4].map(Funktion (ID) {
  gibt loadData(id) zurück;
});

Promise.all(Versprechen).dann(Funktion (Benutzer) {
  // ...
}).catch(Funktion(Fehler){
  // ...
});

3.5 Versprechen.race()

Promise.race() fasst auch mehrere Promise Instanzen in einer neuen Promise Instanz zusammen.

Die Parameter der Methode Promise.race() sind dieselben wie die Promise.all() .

const Versprechen = Versprechen.race([p1, p2, p3]);

Promise.all() vs. Promise.race () :

Promise.all() gibt alle erfolgreichen promise -Werte zurück, wenn alle erfolgreich ausgeführt wurden, und gibt den ersten fehlgeschlagenen Wert zurück, wenn einer fehlschlägt.
Promise.race() gibt den ersten promise Wert zurück, der fulfilled oder rejected werden kann.
Die Anwendungsszenarien dieser beiden Methoden .

Szenario 1: Nachdem sich ein Benutzer auf der Homepage einer Social-Networking-Site angemeldet hat, fordert er asynchron an, Benutzerinformationen, Follower-Liste und Fan-Liste abzurufen. Wir müssen sicherstellen, dass alle Datenanforderungen erfolgreich sind, bevor wir die Seite rendern. Wenn eine der Daten fehlschlägt, wird die Seite umgeleitet. Hier können wir Promise.all verwenden.

Funktion initUserHome() {
  Versprechen.alles([
  neues Versprechen(getMe),
  neues Versprechen (getFollows),
  neues Versprechen (getFans)
])  
    .dann(Funktion(Daten){
     // Seite anzeigen })
    .catch(Funktion(Fehler){
    // .... Seite umleiten });
};

initUserHome();

Szenario 2: Wenn wir eine Ticket-Grabbing-Software erstellen, müssen wir jedes Mal nur das erste abgeschlossene Promise zurückgeben, obwohl wir viele Ticketverkaufskanäle anfordern. Hier können wir Promise.race verwenden.

Funktion getTicket() {
  Versprechen.race([
  neues Versprechen (postASell),
  neues Versprechen (postBSell),
  neues Versprechen (postCSell)
])  
    .dann(Funktion(Daten){
     // Ticketerwerb erfolgreich})
    .catch(Funktion(Fehler){
    // .... das Ticket konnte nicht abgerufen werden. Versuchen Sie es erneut});
};

getTicket();

3.6 Versprechen.allSettled()

Wenn bei Verwendung Promise.all() ein Promise fehlschlägt, wird die Ausführung der anderen Promises nicht beendet.

const-Anfragen = [
  holen('/url1'),
  holen('/url2'),
  holen('/url3'),
];

versuchen {
  warte auf Promise.all(Anfragen);
  console.log('Alle Anfragen waren erfolgreich.');
} fangen {
  console.log('Eine Anfrage ist fehlgeschlagen, andere Anfragen sind möglicherweise noch nicht abgeschlossen.');
}

Manchmal möchten wir warten, bis eine Gruppe asynchroner Vorgänge abgeschlossen ist, bevor wir mit dem nächsten Schritt fortfahren. Zu diesem Zeitpunkt müssen Sie Promise.allSettled() verwenden, dessen Parameter ein Array ist, wobei jedes Mitglied des Arrays ein Promise -Objekt ist und ein neues Promise Objekt zurückgibt. Es wird lediglich gewartet, bis alle Promise-Objekte im Parameter-Array ihren Status geändert haben (egal ob fulfilled oder rejected ), und das zurückgegebene Promise Objekt wird seinen Status ändern.

const-Anfragen = [
  holen('/url1'),
  holen('/url2'),
  holen('/url3'),
];

warte auf Promise.allSettled(Anfragen);
console.log('Ausführen, nachdem alle Anfragen abgeschlossen sind (einschließlich Erfolg und Fehlschlag)');

3.7 Versprechen.any()

Sobald eines der eingehenden Promise fulfilled wird, wird das neue Promise fulfilled ; wenn alle eingehenden Promise rejected werden, wird das neue Versprechen abgelehnt.

Promise.any() ist ähnlich wie Promise.race() , aber der Unterschied besteht darin, dass Promise.any() nicht beendet wird, weil ein bestimmtes Promise rejected wird. Es muss warten, bis alle Parameter- Promise rejected werden.

Zurück zum Szenario des Ticket-Grabbings über mehrere Kanäle mithilfe von mise.race() : Wenn wir sicherstellen müssen, dass entweder ein Kanal erfolgreich Tickets ergreift oder alle Kanäle fehlschlagen, wäre die Verwendung Promise.any() angemessener.

Funktion getTicket() {
  Versprechen.irgendein([
  neues Versprechen (postASell),
  neues Versprechen (postBSell),
  neues Versprechen (postCSell)
])  
    .dann(Funktion(Daten){
     // Ein Ticket wurde erfolgreich ergattert})
    .catch(Funktion(Fehler){
    // .... alle Kanäle sind ausgefallen });
};

getTicket();

3.8 Versprechen.auflösen()

Promise.resolve() konvertiert ein vorhandenes Objekt in ein Promise Objekt. ist gleichbedeutend mit folgendem Code:

neues Versprechen(lösen => lösen(1))

Die übergebenen Parameter sind unterschiedlich.

• Der Parameter Promise -Instanz“ wird unverändert und ohne Änderungen zurückgegeben.
• Der Parameter ist ein thenable -Objekt, das dieses Objekt in ein Promise Objekt konvertiert und dann sofort die then() Methode des thenable -Objekts ausführt.

lass dann = {
  dann: Funktion(auflösen, ablehnen) {
    Entschlossenheit (1);
  }
};

• Der Parameter ist ein normaler Wert und es wird ein neues Promise Objekt mit dem Status resolved zurückgegeben.

const promise = Versprechen.resolve(1);

versprechen.dann(Funktion (Wert) {
  console.log(Wert) // 1
});

• Keine Parameter, gibt direkt ein Promise Objekt im resolved Zustand zurück.

3.9 Versprechen.ablehnen()

Die Methode Promise.reject(reason) gibt auch eine neue Promise Instanz mit dem Status „ rejected zurück.

const promise = Promise.reject('unbekannter Fehler');
// entspricht const promise = new Promise((resolve, reject) => reject('unbekannter Fehler'))

versprechen.dann(null, Funktion (en) {
  Konsole.log(s)
});
//unbekannter Fehler

4. Einfache Szene

Bilder asynchron laden:

Funktion loadImageAsync(url) {
  returniere neues Promise(Funktion(auflösen, ablehnen) {
   const image = neues Bild();
    image.onload = auflösen;
    image.onerror = ablehnen;
    bild.src = URL;
  });
}

Verarbeitung des Anforderungstimeouts:

//Anforderungsfunktion request(){
    returniere neues Promise(Funktion(auflösen, ablehnen){
       // Code ....
         lösen('Anfrage ok')
    })
}

Funktion TimeoutHandle(Zeit){
   returniere neues Promise(Funktion(auflösen, ablehnen){
        setzeTimeout(Funktion(){
            ablehnen('Zeitüberschreitung');
        }, Zeit);
    });
}

Versprechen.race([
    Anfrage(),
    Zeitüberschreitungshandle(5000)
])
.dann(res=>{
    Konsole.log(res)
}).catch(err=>{
    console.log(err) // Zeitüberschreitung
})

Dies ist das Ende dieses Artikels über JavaScript Promise im Frontend. Weitere relevante Inhalte zu JavaScript Promise finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!