„Callback Hell“ ist ein häufiges Phänomen in der Front-End-Entwicklung. Um dieses Problem zu lösen, führt ES6 Promise ein. Was ist Promise? Wie benutzt man es? In diesem Artikel werden diese Probleme analysiert und Promise untersucht.
1. Rückrufhölle
Es gibt zwei asynchrone Methoden A und B, und die Ausführung von B muss auf dem Ergebnis nach der Ausführung von A basieren. B ist zu diesem Zeitpunkt die Rückruffunktion von A. Wenn viele asynchrone Ausführungsmethoden beteiligt sind, A-> B ->C->D ... wird das sogenannte „Callback-Höllen“-Phänomen auftreten. Beispiele sind wie folgt:
function ajaxDemo(){
$.ajax({
type : "POST",
url : "",
data : {
},
success : function(resultA) {
//根据resultA做一些业务判断，参数转化等
$.ajax({
type : "POST",
url : "",
data : {
},
success : function(resultB) {
//根据resultB做一些业务判断，参数转化等
$.ajax({
type : "POST",
url : "",
data : {
},
success : function(resultC) {
//根据resultC做一些业务判断，参数转化等
//...........
}
});
}
});
}
});
}Dies führt zu einer schlechten Lesbarkeit und Wartbarkeit des Codes. Als Nächstes werden wir darüber sprechen, wie Promise dieses Problem löst.
2. Was ist Versprechen?
Bevor wir Promise vorstellen, werfen wir einen Blick auf die Entwicklungsgeschichte der asynchronen Javascript-Programmierung:
| 1. Wenn eine JavaScript-Anwendung ausgeführt wird, wird sie im Single-Thread-Modus ausgeführt, sodass sich Entwickler keine Sorgen über die heiklen Probleme machen müssen, die bei der Multi-Thread-Programmierung auftreten können. 2. Diese Freiheit ist jedoch an Bedingungen geknüpft: Um Software zu schreiben, die reibungslos läuft, muss Asynchronität berücksichtigt werden, nicht nur Benutzereingaben. 3. JavaScript unterstützt die asynchrone Programmierung in drei verschiedenen Phasen: Callback-Phase (Callback), Promise-Phase (Commitment) und Generator-Phase (Generator). 4. Generatoren selbst bieten keine Unterstützung für Asynchronität: Sie verlassen sich auf Versprechen oder bestimmte Arten von Rückrufen, um asynchrones Verhalten bereitzustellen. Außerdem sind nützliche Dinge wie Versprechen auf Rückrufe angewiesen (und Rückrufe selbst werden durch Objekte nützlicher). |
Auszug aus: „JavaScript Learning Guide (3rd Edition)“ [US] Ethan Brown
Aus dem obigen Text können wir erkennen, dass sowohl Rückrufe als auch Versprechen eine Möglichkeit der asynchronen Javascript-Programmierung sind und Versprechen von Rückrufen abhängen. Dies macht uns auch verständlich, dass die Entwicklung der Technologie miteinander verbunden ist und nicht unabhängig betrachtet werden kann.
Was ist also Versprechen?
| Promise ist das erste standardmäßige asynchrone Modell von JavaScript, das Objekte zur Übertragung von Informationen und Zuständen umfasst und die folgenden zwei Merkmale aufweist: |
Auszug aus: „JavaScript Framework Design (Second Edition)“ Situ Zhengmei
Extrahieren Sie den Codefall „http request“ im Buch:
function get(url) {
return new Promise(function(resolve, reject){
var req = new XMLHttpRequest();
req.open('GET',url);
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
}else {
reject(Error(req.statusText));
}
};
req.onerror = function() {
reject(Error("Network Error"));
};
req.send();
});
}
get('story.json').then(function(response) {
console.log("Success!", response);
},function(error) {
console.error("Failed!", error);
});
Dieser Fall stellt die Implementierungsidee von Promise klar vor: Promise erstellt eine httpGet-Anfrage, get('story.json') wechselt in den Status "Ausstehend", das Operationsergebnis wechselt erfolgreich in den Status "Gelöst" und die Auflösungsmethode wird aufgerufen; wenn das Operationsergebnis fehlschlägt oder abnormal ist, wechselt der Anruf in den Status „Abgelehnt“. Rufen Sie die Ablehnungsmethode auf.
3. Verwendung von Versprechen
In diesem Teil werden Beispiele für mehrere gängige Verwendungsmethoden von Promise aufgeführt:
- Versprechen verketten
const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
fetchPromise
.then( response => {
return response.json();
})
.then( json => {
console.log(json[0].name);
});
- Ausnahmeerfassung
const fetchPromise = fetch('bad-scheme://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
fetchPromise
.then( response => {
if (!response.ok) {
throw new Error(`HTTP 请求错误：${response.status}`);
}
return response.json();
})
.then( json => {
console.log(json[0].name);
})
.catch( error => {
console.error(`无法获取产品列表：${error}`);
});
- Mehrere Versprechen kombinieren
const fetchPromise1 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
const fetchPromise2 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found');
const fetchPromise3 = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');
Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
.then( responses => {
for (const response of responses) {
console.log(`${response.url}：${response.status}`);
}
})
.catch( error => {
console.error(`获取失败：${error}`)
});
- asynchron und warten
async function fetchProducts() {
try {
const response = await fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
if (!response.ok) {
throw new Error(`HTTP 请求错误：${response.status}`);
}
const json = await response.json();
return json;
}
catch(error) {
console.error(`无法获取产品列表：${error}`);
}
}
const jsonPromise = fetchProducts();
jsonPromise.then((json) => console.log(json[0].name));
Codebeispiel auszug aus: How to use Promises – Learn Web Development | MDN
Dies ist das Ende der Promise-Analyse. Ich hoffe, sie wird Ihnen hilfreich sein.