SPEISEKARTE
1. Grundlegende Syntax des Versprechens
1.1. Konzept
1. Promise wird zur Verwaltung der asynchronen Programmierung verwendet, ist aber selbst nicht asynchron. Wenn ein neues Versprechen ausgegeben wird, wird die Executor-Funktion sofort ausgeführt, aber eine asynchrone Operation wird in der Executor-Funktion verarbeitet.
2. Versprechen hat drei Zustände: ausstehend (Anfangszustand), erfüllt (erfolgreicher Zustand) und abgelehnt (Fehlerzustand).
3. Der Rückgabewert von Promise wird verwendet, um das erfolgreiche Ergebnis oder den Grund für den Fehler aufzuzeichnen.
4. Promise wurde geboren, um das Callback-Höllenproblem bei asynchronen Anfragen zu lösen.
5. Promise ist ein Entwurfsmuster. ES6 bietet eine in JavaScript integrierte Klasse Promise, um dieses Entwurfsmuster zu implementieren.
6. Wenn ein neues Versprechen ausgeführt wird, führen Sie zuerst die Executor-Funktion aus, starten Sie hier eine asynchrone Betriebsaufgabe, warten Sie zu diesem Zeitpunkt nicht, stellen Sie sie in die EventQuque-Aufgabenwarteschlange (Mikrotask) und fahren Sie fort Um die Methode then auszuführen, speichern Sie die beiden Funktionen in der Methode then. Diese beiden Funktionen werden zu diesem Zeitpunkt nicht ausgeführt. Wenn der asynchrone Vorgang in der Executor-Funktion endet, wird der Promise-Status basierend auf Auflösung/Ablehnung gesteuert, um zu entscheiden, eine der darin gespeicherten Funktionen auszuführen.
7. Der Status des Versprechens kann durch Ausführen der Auflösungs- oder Ablehnungsfunktion geändert werden. Sobald sich der Status geändert hat, ist es sinnlos, eine Auflösung oder Ablehnung auszuführen.
8. Unabhängig davon, ob die Ausführung von „resolve“ oder „reject“ in einer asynchronen Operation erfolgt, müssen Sie zunächst auf die Ausführung von then warten und die Methode (Funktion) speichern, bevor Sie sie nach der Änderung ausführen Zustand. entsprechende Methode.
9. Wenn die Ausführung der then-Methode endet, wird eine neue Promise-Instanz zurückgegeben. Der Erfolg oder Misserfolg der neuen Promise-Instanz hängt davon ab, ob bei der Ausführung der Executor-Funktion die Auflösung oder Ablehnung ausgeführt wird. Wenn während der Ausführung der Executor-Funktion ein ungewöhnlicher Fehler auftritt, wird der Instanzstatus in „Fehler“ geändert.
10. Das in dann gespeicherte Ergebnis der Methodenausführung bestimmt den Status. Das Ausführungsergebnis einer Methode in der vorherigen bestimmt dann, welche Methode in der nächsten dann ausgeführt wird. Unabhängig davon, ob es sich um eine erfolgreiche Methodenausführung oder eine fehlgeschlagene Methodenausführung handelt, wird der Status der Instanz in „Fehler“ geändert, solange die Ausführung eine Ausnahme auslöst.
11. Wenn in der Methode eine neue Promise-Instanz zurückgegeben wird, ist das Ergebnis der Rückgabe dieser Instanz Erfolg oder Misserfolg, was auch bestimmt, ob die aktuelle Instanz erfolgreich oder fehlgeschlagen ist. In den übrigen Fällen wird die Instanz grundsätzlich in einen erfolgreichen Zustand versetzt.
12. Das von der Methode zurückgegebene Ergebnis ist der Wert der aktuellen Instanz. Das von der Methode im vorherigen Then zurückgegebene Ergebnis wird an die Methode des nächsten Then übergeben.
13. Sie können auch nur eine oder keine Funktion in then, then(fn)/then(null, fn) schreiben. Wenn ein Then auftritt, ist die auszuführende Methode erfolgreich oder schlägt fehl. Wenn diese Methode im aktuellen Then nicht definiert ist, wird sie auf die nächste entsprechende Funktion verschoben.
14. Das von Promise.all(array) zurückgegebene Ergebnis ist eine Promise-Instanz, die erfordert, dass jedes Element im Array eine neue Promise-Instanz ist. Promise.all() wartet auf alle Nur wenn Alle Instanzstatus im Array sind erfolgreich, wenn der Status aller Instanzen erfolgreich ist. Wert ist eine Sammlung, die die von jeder Instanz im Array zurückgegebenen Ergebnisse speichert. Immer wenn eine Instanz im Array den Status „Fehler“ hat, ist der Status aller Instanzen ebenfalls „Fehler“.
15. Der Unterschied zwischen Promise.race(array) und all besteht darin, dass Rennen ein Rennen ist, das heißt, egal welches im Array zuerst verarbeitet wird, das verarbeitete Ergebnis ist das Endergebnis Ergebnis der Renninstanz.
16. Async und Wait sind syntaktische Zucker für Promise-Operationen in ES7. async bewirkt, dass das von einer gewöhnlichen Funktion zurückgegebene Ergebnis den Status = aufgelöst ändert und der Wert = eine Promise-Instanz der Struktur zurückgibt. Die Hauptfunktion von Async besteht darin, es mit Async zu verwenden, denn sobald Wait in einer Funktion verwendet wird, muss die aktuelle Funktion mit Async geändert werden. Warten wartet auf das Rückgabeergebnis des aktuellen Versprechens. Erst wenn der Status des zurückgegebenen Ergebnisses aufgelöst ist, wird das Rückgabeergebnis dem Ergebnis zugewiesen. Warten ist keine synchrone Programmierung, sondern asynchrone Programmierung (Mikrotask). Wenn der Code zum Warten ausgeführt wird, führen Sie zuerst diese Zeile aus, erstellen Sie eine asynchrone Mikrotask, warten Sie, bis das Versprechen das Ergebnis zurückgibt, und platzieren Sie auch den folgenden Code für Warten Die Aufgabenwarteschlange. Mitte.
17. Wenn das Rückgabeergebnis von Promise ein Fehlerstatus ist, empfängt „await“ sein Rückgabeergebnis nicht und der folgende Code „await“ wird nie weiter ausgeführt. „await“ kann nur das Ergebnis von „Promise“ verarbeiten ein Erfolgsstatus. .
1.2. Promise-Ausführungsmethode
1.2.1. Erfolg
let promisee = new Promise((resolve, reject) => {
resolve('ok');
// resolve是成功状态的函数，
// 对应then中的第一个函数，即result
});
// 设置成功或者失败后处理的方法
promisee.then(result => {
console.log('成功:', result);
// 成功: ok
}, reason => {
console.log('失败:', reason);
});
1.2.2. Fehler
let promisee = new Promise((resolve, reject) => {
reject('no');
// reject是失败状态的函数，
// 对应then中的第二个函数，即reason
});
// 设置成功或者失败后处理的方法
promisee.then(result => {
console.log('成功:', result);
}, reason => {
console.log('失败:', reason);
// 失败: no
});
1.2.3. Artikel 7 im Konzept
new Promise((resolve, reject) => {
// 第一组
// 这里执行完 resolve 后，
// reject 执行也没有用了，
// 不会再改变状态了，
// 下同。
resolve(1);
reject(0);
// 第二组
// reject(0);
// resolve(1);
}).then(result => {
console.log(`成功:${
result}`);
// 成功:1
}, reason => {
console.log(`失败:${
reason}`);
});
1.2.4、new Promise(resolve => { }).then().then()
new Promise(resolve => {
resolve(a);
}).then(result => {
console.log(`成功：${
result}`);
return Promise.reject(result);
}, reason => {
console.log(`失败：${
reason}`);
// 失败：ReferenceError: a is not defined
}).then(resolve => {
// 为什么这里进入成功函数，
// 是因为上一个进入失败函数执行没有报错，
// 不是说上一个进入了失败函数，
// 下一个then也进入失败函数。
console.log(`成功：${
resolve}`);
// 成功：undefined
// 这里的value为undefined的原因是，
// 上一个函数没有return实际的值，
// 所有的函数如果没有return实际都会返回undefined
}, reason => {
console.log(`失败：${
reason}`);
});
1.2.5、Promise.resolve(1).then().then()，reject同理
Promise.resolve(1).then(result => {
console.log('成功:', result);
// 成功: 1
}, reason => {
console.log('失败:', reason);
}).then(result => {
console.log('成功:', result);
// 成功: undefined
}, reason => {
console.log('失败:', reason);
});
1.2.6, Aufschub und Fang
Promise.reject(10).then(result => {
console.log(`成功：${
result}`);
return result * 10
}).then(null, reason => {
// 第一个then中没有reason函数，
// 所以这个reject执行的结果顺延到了第二个then的reason函数。
console.log(`失败：${
reason}`);
// 失败：10
});
Promise.reject(10).then(result => {
console.log(`成功：${
result}`);
return result * 10
}).then(result => {
console.log(`成功：${
result}`);
}).catch(reason => {
// catch是专门捕获异常的方法，
// 因为第一和第二个then中都没有reason函数，
// 所以走到catch才有输出。
console.log(`失败：${
reason}`);
// 失败：10
});
Promise.resolve(10).then(result => {
console.log(a);
}).catch(reason => {
// 虽然executor中的resolve执行的结果是成功的，
// 但是第一个then中的result执行的结果是失败的，
// 所以最后catch捕获到的就是失败的结果。
console.log(`失败：${
reason}`);
// 失败：ReferenceError: a is not defined
});
1.2.7, alle und Rennen
let p1 = Promise.resolve(1);
let p2 = new Promise(resolve => {
setTimeout(_ => {
resolve(2);
}, 1000)
});
let p3 = Promise.reject(3);
Promise.all([p1, p2, p3]).then(result => {
console.log(`成功：${
result}`);
}).catch(reason => {
console.log(`失败：${
reason}`);
// 失败：3
});
Promise.all([p2, p1]).then(result => {
// 返回的结果是按照arr中编写实例的顺序组合在一起
console.log(`成功：${
result}`);
// 成功：2,1
}).catch(reason => {
console.log(`失败：${
reason}`);
});
2. Verwendung von async/await
async function fun(i) {
let isIndex = await i == 1 ? '进行中' : '已完成';
console.log(isIndex);
// fun(1); 进行中
// fun(2); 已完成
return isIndex;
};
console.log(fun(1));
// Promise {<pending>}
console.log(fun(2));
// Promise {<pending>}
1. Rückruf Hölle
1.1. Konzept
Die Verschachtelung mehrerer Ebenen von Callback-Funktionen führt zur Callback-Hölle.
1.2. Nachteile der Callback-Hölle
1.2.1. Die Codekopplung ist zu stark und wirkt sich auf den gesamten Körper aus,
难以维护.
1.2.2. Eine große Anzahl redundanter Codes sind ineinander verschachtelt und die Codes sind可读性变差.
1.3. Code
setTimeout(() => {
console.log('延迟1秒');
setTimeout(() => {
console.log('延迟2秒');
setTimeout(() => {
console.log('延迟3秒');
}, 3000);
}, 2000);
}, 1000);
2. Die Rückrufhölle lösen
2.1. Grundkonzepte von Promise
2.1.1. Promise ist ein Konstruktor
● Wir können eine Instanz von Promise const p = new Promise() erstellen
● Das von new generierte Promise-Instanzobjekt stellt eine asynchrone Operation dar
2.1.2. Promise.prototype enthält eine .then()-Methode
● Jedes vom neuen Promise()-Konstruktor erhaltene Instanzobjekt
● kann über die Prototypenkette auf die .then()-Methode zugreifen, z. B. p.then()
2.1.3. Die Methode .then() wird verwendet, um Rückruffunktionen für Erfolg und Misserfolg vorab festzulegen.
● p.then(erfolgreiche Rückruffunktion, fehlgeschlagene Rückruffunktion)
● p.then(result => { }, error => { })
● Beim Aufruf der .then()-Methode ist die Erfolgsrückruffunktion erforderlich und die Fehlerrückruffunktion ist optional
2.2. Eigenschaften der .then()-Methode
Wenn in der vorherigen .then()-Methode ein neues Promise-Instanzobjekt zurückgegeben wird, kann die Verarbeitung bis zum nächsten .then() fortgesetzt werden. Durch den Kettenaufruf der .then()-Methode wird das Problem der Rückrufhölle gelöst.
2.3. Erfassen Sie Fehler mit .catch
Wenn im Promise-Kettenvorgang ein Fehler auftritt, können Sie ihn mit der Methode Promise.prototype.catch erfassen und behandeln.
Wenn Sie nicht möchten, dass der vorherige Fehler dazu führt, dass die nachfolgende .then()-Anweisung nicht normal ausgeführt wird, können Sie .catch im Voraus aufrufen.function func1() { return new Promise((resolve) => { setTimeout(() => { resolve("func1 1000"); }, 1000); }); }; function func2() { return new Promise((resolve) => { setTimeout(() => { resolve("func1 2000"); }, 2000); }); }; function func3() { return new Promise((resolve) => { setTimeout(() => { resolve("func1 3000"); }, 3000); }); }; func1() .catch(err => { console.log(err); }) .then((result) => { console.log(result); return func3(); }) .then((result) => { console.log(result); return func2(); }) .then((result) => { console.log(result); });