Dieser Artikel teilt Ihnen hauptsächlich das grundlegende Tutorial zur Verwendung von Promise mit. Mein persönliches Verständnis besteht darin, synchrone Programmierung zu verwenden, um asynchrone Programmiervorgänge abzuschließen. Ich hoffe, es hilft allen.
const promise = new Promise((resolve, reject) => { //some asynchronous code setTimeout(() => { console.log('执行完成'); resolve('some data'); }, 2000); });
Promise
empfängt eine Funktion als Parameter. Die Funktion verfügt über zwei Parameter, resolve
und reject
, die jeweils die erfolgreiche Rückruffunktion und die fehlgeschlagene Rückruffunktion darstellen, nachdem der asynchrone Vorgang ausgeführt wurde.
Promise
wird unmittelbar nach der Instanz ausgeführt. Daher wird normalerweise eine Funktion zum Einbinden verwendet
function runAsync() { return new Promise((resolve, reject) => { //some asynchronous code setTimeout(() => { console.log('执行完成'); resolve('some data'); }, 2000); }); } runAsync().then((data) => { console.log(data);//可以使用异步操作中的数据 })
runAsync()
Nach der Ausführung wird die Methode then
aufgerufen, die der zuvor geschriebenen Rückruffunktion entspricht. then()
function paramTest(){ return new Promise((resolve, reject) => { let number = Math.ceil(Math.random() * 10); if (number < 5) { resolve(number); }else{ reject('out of range'); } }) } paramTest().then((number) => { console.log('resolved'); console.log(number); },(reason) => { console.log('rejected'); console.log(reason); })
haben drei Zustände: Promise
(in Bearbeitung), pending
(erfolgreich) und fulfilled
(fehlgeschlagen) rejected
Beispiele haben zwei Situationen: paramTest()
, betrachten wir es als Erfolgssituation und ändern den Status von number < 5
in pending
fulfilled
, betrachten wir es als Fehlerbedingung und ändern den Status von number >= 5
in pending
rejected
Ausführungsergebnis: paramTest()
fulfilled | rejected |
---|---|
resolved | rejected |
number | out of range |
BeispielparamTest
paramTest().then((number) => { console.log('resolved'); console.log(number); console.log(data); //data为未定义 },(reason) => { console.log('rejected'); console.log(reason); }).catch((err) => { console.log(err); })
Methode ist eigentlich ein Alias von catch
ist ebenfalls eine Rückruffunktion zur Behandlung von Fehlern, hat aber noch eine weitere Funktion: Tritt im .then(null, rejection)
-Rückruf ein Fehler auf, wird dieser nicht blockiert und der Rückruf in resolve
wird ausgeführt. Die Verwendung der Methode catch
const p = Promise.all([p1, p2, p3]); p.then(result => { console.log(result); })
erhält einen Array-Parameter. Jedes Element im Array gibt einraceall
-Objekt zurück. Wird eingegeben derPromise
Rückruf.p1, p2, p3
Die zurückgegebenen Daten werden in Form eines Arrays an denthen
-Callback übergeben. Die Verwendung vonp1, p2, p3
then
const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p1'); }, 1000); }) .then(result => result) .catch(e => e); const p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p2'); }, 3000); }) .then(result => result) .catch(e => e); Promise.all([p1, p2]) .then(result => console.log(result)) .catch(e => console.log(e)); //3秒后输出['p1', 'p2']
const p = Promise.race([p1, p2, p3]); p.then(result => { console.log(result); })
. Der Unterschied besteht darin, dass die MethodeKlicken Sie hier, um den Quellcode des Beispiels in diesem Artikel anzuzeigenrace
erfordert, dass jeder Parameter erfolgreich zurückgegeben wird.all
wird ausgeführt; undall
führt denthen
-Rückruf aus, solange einer der Parameter erfolgreich zurückgegeben wird.race
Das Folgende ist ein Beispiel fürthen
. Im Vergleich zur-Methode können Sie sehen, dass es einen deutlichen Unterschied im Rückgabewert gibt.
race
all
const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p1'); }, 1000); }) .then(result => result) .catch(e => e); const p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p2'); }, 3000); }) .then(result => result) .catch(e => e); Promise.race([p1, p2]) .then(result => console.log(result)) .catch(e => console.log(e)); //1秒后输出 'p1'
Reloader ist ein auf Promise basierendes Plug-in, das Bilder vorlädt und den Ladefortschritt anzeigt. Klicken Sie Hier erfahren Sie mehr. Wenn es sich in Ordnung anfühlt, können Sie gerne einen Stern hinzufügen
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonTutorial zur grundlegenden Verwendung von Promise. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!