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
Detaillierte Erläuterung der CSS BEM-Schreibstandards
BEM ist ein komponentenbasierter Ansatz zur Weben...
Eine Falle und Lösung bei der Verwendung von fileReader
Inhaltsverzeichnis Eine Falle bei fileReader Fall...
7 native JS-Fehlertypen, die Sie kennen sollten
Inhaltsverzeichnis Überblick 1. Bereichsfehler 2....
Zusammenfassung einiger Probleme, die bei der Integration von E-Charts mit vue.js aufgetreten sind
Vorwort Ich arbeite derzeit an der Datenanalysepl...
Analyse verschiedener Fehler bei Sortierregeln für MySQL-Tabellen
Der folgende Fehler wird gemeldet, wenn MySQL meh...
iFrame ist eine großartige Möglichkeit, es als Popup-Ebene zu verwenden, um den Hintergrund abzudecken
Ich habe kürzlich an einem Projekt gearbeitet – Bu...
Die 13 am häufigsten in Interviews gestellten Fragen zu Vue-Modifikatoren
Inhaltsverzeichnis 1. faul 2.trimmen 3.Nummer 4.H...
Zusammenfassung der Anwendungsbereiche von Kubernetes
Kubernetes ist aufgrund seiner Anwendungsportabil...
Zeigen Sie die abhängigen Bibliotheken von so oder ausführbaren Programmen unter Linux an
Anzeigen der abhängigen Bibliotheken von so oder ...
Zusammenfassung zum Ändern des Root-Passworts in MySQL 5.7 und MySQL 8.0
MySQL 5.7-Version: Methode 1: Verwenden Sie den B...
So verwenden Sie Linux-Befehle zum Konvertieren und Zusammenfügen von Audioformaten
Installieren Sie FFmpeg flac eric@ray:~$ sudo apt...
Dieser Artikel zeigt Ihnen die Grundlagen von JavaScript: Deep Copy und Shallow Copy
Inhaltsverzeichnis Flache Kopie Tiefes Kopieren A...
Detaillierte Erklärung von Objektliteralen in JS
Inhaltsverzeichnis Vorwort 1. Setzen Sie den Prot...
Implementierung des CSS-Ladeeffekts Pac-Man
emmm, der Name ist nur eine zufällige Vermutung 2...
Unterschiede zwischen proxy_pass in zwei Modulen in nginx
1. Die proxy_pass -Direktive des Moduls 1.ngx_str...