Heim > Web-Frontend > js-Tutorial > Hauptteil

Tutorial zur grundlegenden Verwendung von Promise

小云云
Freigeben: 2018-02-28 13:59:27
Original
3537 Leute haben es durchsucht

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);
});
Nach dem Login kopieren

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);//可以使用异步操作中的数据
})
Nach dem Login kopieren

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);
})
Nach dem Login kopieren

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);
})
Nach dem Login kopieren

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);
})
Nach dem Login kopieren
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']
Nach dem Login kopieren

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

p.then(result => {
    console.log(result);
})
Nach dem Login kopieren
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'
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!