Tutorial zur grundlegenden Verwendung von Promise

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()

Auflösen und Ablehnen

function paramTest(){
    return new Promise((resolve, reject) => {
        let number = Math.ceil(Math.random() * 10);
        if (number < 5) {
            resolve(number);
        }else{
            reject(&#39;out of range&#39;);
        }
    })
}
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()

• Wenn

  , betrachten wir es als Erfolgssituation und ändern den Status von number < 5 in pendingfulfilled

• Wenn

  , betrachten wir es als Fehlerbedingung und ändern den Status von number >= 5 in pendingrejected

, also

Ausführungsergebnis: paramTest()

fulfilled	rejected
resolved	rejected
number	out of range

Verwendung von Catch

Wir nennen weiterhin die Methode

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

all

const p = Promise.all([p1, p2, p3]);

p.then(result => {
    console.log(result);
})

erhält einen Array-Parameter. Jedes Element im Array gibt ein all-Objekt zurück. Wird eingegeben der Promise Rückruf. p1, p2, p3 Die zurückgegebenen Daten werden in Form eines Arrays an den then-Callback übergeben. Die Verwendung von p1, p2, p3then

race

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);
})

ist genau die gleiche wie

. Der Unterschied besteht darin, dass die Methode race erfordert, dass jeder Parameter erfolgreich zurückgegeben wird. all wird ausgeführt; und all führt den then-Rückruf aus, solange einer der Parameter erfolgreich zurückgegeben wird. raceDas Folgende ist ein Beispiel für then. Im Vergleich zur

-Methode können Sie sehen, dass es einen deutlichen Unterschied im Rückgabewert gibt. raceall

Klicken Sie hier, um den Quellcode des Beispiels in diesem Artikel anzuzeigen

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:

Verwenden Sie Promise, um Rückrufe zu vereinfachen

WeChat-Applet Promise ist Vereinfachtes Teilen von Callback-Beispielen

So verwenden Sie jQuerys Promise richtig

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!