Detaillierte Erläuterung der ersten Verwendung von Promise in der asynchronen JavaScript-Programmierung
1. ÜbersichtDas Promise-Objekt ist eine von ES6 vorgeschlagene Spezifikation für asynchrone Programmierung. Wenn es um asynchrone Programmierung geht, müssen wir über die Konzepte der Synchronisierung und Asynchronität sprechen. Wenn wir synchrone Programmierung wörtlich verstehen, scheint es zu bedeuten, dass zwei Aufgaben synchron ausgeführt werden. Dies ist ein falsches Verständnis (zumindest hatte ich dieses Missverständnis, bevor ich mit diesem Konzept in Berührung kam). Synchron und asynchron beziehen sich auf die Reihenfolge, in der der Code ausgeführt wird (die Ausführungsreihenfolge des strukturierten Programmierparadigmas ist immer von oben nach unten und von vorne nach hinten). Wenn die Ausführungsreihenfolge mit der des Codes übereinstimmt, ist sie synchron; wenn sie nicht übereinstimmt, ist sie asynchron. Ursprünglich waren Betriebssysteme befehlszeilenbasiert und alle Sprachen wurden mit synchronen Anweisungen entwickelt. In diesem Fall war keine asynchrone Programmierung erforderlich. Doch schon bald kam die grafische Bedienoberfläche heraus und alle Programmiersprachen mussten sich mit GUIs auseinandersetzen. Wir müssen verstehen, dass ein GUI-Programm ein Schnittstellenprogramm ist, das ständig zeichnet:
während (fertig)
{
tuetwas();
zeichneGUI();
}Wenn das Ereignis der in jeder Schleife ausgeführten Aufgabe dosomething() zu lang ist, empfängt die Schnittstelle längere Zeit keine Zeichenbefehle und die intuitive Manifestation verzögert sich. Um dieses Problem zu lösen, übernehmen Browser, die JavaScript als Skript verwenden, im Allgemeinen den Ereignisschleifenmechanismus:
Auf diese Weise wird im Fall eines einzelnen Threads die Ausführungsreihenfolge der Aufgaben geändert und ein asynchroner Mechanismus implementiert. Da das Synchronisierungsverhalten immer schnell abgeschlossen ist und die Schnittstelle rechtzeitig gezeichnet wird, wird das Schnittstellenverzögerungsphänomen erheblich verbessert. Der Ereignisschleifenmechanismus definiert die Eingabe und Ausgabe von UI-Geräten als Ereignisse. Tatsächlich gibt es viele zeitaufwändige Verhaltensweisen, die jedoch im Allgemeinen mit IO zusammenhängen. Für IO-bezogene Verhaltensweisen bietet JavaScript asynchrone Verhaltenscodes. Hier sehen Sie beispielsweise das Laden eines Bildes. 2. Detaillierte DiskussionBereiten Sie zunächst eine HTML-Seite PromiseTest.html vor und laden Sie das JS-Skript PromiseTest.js in diese HTML-Seite:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<script src="./3rdParty/jquery-3.5.1.js"></script>
<title>Beispiel</title>
</Kopf>
<Text>
<div id = "Container"> </div>
<script src="./PromiseTest.js"></script>
</body>
</html>Das native JS-Bildobjekt Image implementiert das asynchrone Laden von Bildern durch Ereignisse:
$(Funktion () {
var img = neues Bild();
img.onload = Funktion () {
$(img).appendTo($('#container'));
};
img.src = "./img.jpg";
});Fügen Sie dem Onload-Ereignishandler von Image eine entsprechende Funktion hinzu. Wenn das Bild geladen ist, fügen Sie das geladene Bild einem untergeordneten Knoten des Div-Elements der HTML-Seite hinzu. Öffnen Sie diese Seite über den Browser und das Bild der entsprechenden Adresse wird direkt angezeigt. Natürlich kann dieses JS-Skript auch über Promise neu geschrieben werden:
$(Funktion () {
Funktion getImg(uri){
returniere neues Promise(Funktion(auflösen, ablehnen){
var img = neues Bild();
img.onload = Funktion () {
auflösen (Bild);
};
img.onerror = Funktion () {
reject(Error("Fehler beim Laden des Bildes!"));
}
img.src = uri;
});
}
var imgUri = "./img.jpg";
getImg(imgUri).then(Funktion(img){
$(img).appendTo($('#container'));
}, Funktion(Fehler){
console.error("Fehlgeschlagen!", Fehler);
})
});Auf den ersten Blick scheint die Verwendung von Promise das Programm komplizierter und umständlicher zu machen. Aber wir müssen die Bedeutung des Promise-Mechanismus genau verstehen. Dieses Design ist nicht zum Spaß gedacht.
Wie Sie sehen, sieht dieser Entwurf kompliziert aus, ähnelt aber stark einem synchronen Verhalten: Geben Sie ein unfertiges Verhaltensobjekt an, sowie wie damit verfahren werden soll, wenn das Verhalten abgeschlossen ist und wie damit verfahren werden soll, wenn das Verhalten fehlschlägt. Und dies ist auch der Zweck von Promise: asynchrone Vorgänge synchronem Verhalten ähnlicher zu machen. 3. ReferenzenSynchron und asynchron Beschreiben Sie kurz das Prinzip der asynchronen Single-Thread-Implementierung von JS Detaillierte Erläuterung des JavaScript-Betriebsmechanismus: Lassen Sie uns noch einmal über Event Loop sprechen Dies ist das Ende dieses Artikels über die anfängliche Verwendung von Promise in der asynchronen JavaScript-Programmierung. Weitere relevante Inhalte zur Verwendung von js 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:
|
<<: Detaillierte Erläuterung des Installationsprozesses der Standard-MySQL-Version (x64) für Windows
>>: Zusammenfassung der Docker-Datenspeicherung
Artikel empfehlen
Die neue Version der Chrome-Browsereinstellungen ermöglicht die domänenübergreifende Implementierung
Vorwort Derzeit löst das Front-End domänenübergre...
Einführung in semantische XHTML-Tags
Der erste Punkt ist, dass Menschen die Semantik vo...
Zusammenfassung eines CSS-Codes, der die gesamte Site grau macht
Um den Märtyrern und Opfern des Kampfes gegen die...
Analyse des Docker-Image-Erstellungsprinzips (Sie können ein Image erstellen, ohne Docker zu installieren)
Das Erstellen eines Images ist ein sehr wichtiger...
Detaillierte Schritte zum Herunterladen und Installieren von Tomcat unter Linux
Wenn Sie gerade erst mit Linux in Berührung gekom...
MySQL-Passwort ist korrekt, aber keine lokale Anmeldung möglich -1045
MySQL-Passwort ist korrekt, aber keine lokale Anm...
Vue integriert Tencent Map zur Implementierung der API (mit DEMO)
Inhaltsverzeichnis Hintergrund zum Schreiben Proj...
Zusammenfassung der MySQL-Verbundindizes
Inhaltsverzeichnis 1. Hintergrund 2. Zusammengese...
Detaillierte Einführungshinweise zu Vue
Inhaltsverzeichnis 1. Einleitung 2. Erster Eindru...
Detaillierte Erklärung des Lebenszyklus von Angular-Komponenten (Teil 2)
Inhaltsverzeichnis 1. Haken anzeigen 1. Was bei d...
Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode
Methode 1: Verwenden Sie Tabellenattribute: Heade...
So lösen Sie das Problem FileZilla_Server:425. Datenverbindung kann nicht geöffnet werden
Bei der Installation von FileZilla Server auf dem...
Neue Verwendung von watch und watchEffect in Vue 3
Inhaltsverzeichnis 1. Neue Verwendung der Uhr 1.1...
Erläuterung der Ausführungspriorität von mySQL-Schlüsselwörtern
Wie unten dargestellt: aus Tabelle wobei Bedingun...
Verwendung der hasOwnProperty-Methode des js-Attributobjekts
Die Methode hasOwnProperty() des Objekts gibt ein...