Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der asynchronen Verarbeitung von ES6 und ES7 (Codebeispiel)

不言
Freigeben: 2018-11-17 15:49:09
nach vorne
2369 Leute haben es durchsucht

Dieser Artikel enthält eine detaillierte Erklärung (Codebeispiel) der asynchronen Verarbeitung in ES6 und ES7. Ich hoffe, dass er für Freunde hilfreich ist.

Meistern Sie die asynchrone ES6/ES7-Verarbeitung auf einmal

Stellen Sie sich ein Szenario vor: Warten Sie, bis Ihre Freundin einschläft, und gehen Sie einkaufen. Wenn es länger als 5 Sekunden dauert, tun Sie es nicht Warten Sie und spielen Sie selbst Spiele ...

ES6 Promise-Verarbeitungsmethode

Promise-Schreibmethode
Promise-Kettenaufrufmethode, nur wenn die asynchrone Verarbeitung erfolgreich ist, kehren Sie zur Verwendung zurück .then(data => ; {}), um die Daten nach erfolgreicher asynchroner Verarbeitung abzurufen
Wenn bei der asynchronen Verarbeitung ein Fehler auftritt, wird .then(err => {}) aufgerufen und eine Ausnahme abgerufen
Mit anderen Worten , es gibt zwei Methoden in .then( data => {}, err => {}) Eine Callback-Funktion als Parameter
Oder es gibt eine zweite Schreibweise .then(data => {}) .catch(err => {})

function waiting (ms) {
    return new Promise ( (resolve, reject) => {
        if(ms > 5000) {
            reject('long time')
        } else {
            setTimeout(() => {
                resolve(ms);
            }, ms)
        }
    })
}


function main () {
    waiting(3000).then( success => {
        console.log(success);
    }, err => {
        console.log(err)
    })
}

// 或者
function main() {
    waiting(3000).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err);
    })
}
Nach dem Login kopieren

ES7 Async/Await-Verarbeitungsmethode

async zeigt an, dass in dieser Funktion ein asynchroner Vorgang vorhanden ist und „await“ immer in die deklarierte Funktion geschrieben wird durch async.
Wenn awit auftritt, stoppt die Funktion die Ausführung, wartet auf das Ende des asynchronen Vorgangs und führt dann die folgenden Anweisungen aus
Das durch den asynchronen Vorgang erhaltene Ergebnis ist die Parameterrückgabe der Resolver-Rückruffunktion
Die Ausnahme wird über den Parameter der Reject-Callback-Funktion abgerufen.
Beachten Sie, dass wir beim Abfangen einer Ausnahme häufig die Try-Catch-Methode im Körper der asynchronen Funktion verwenden müssen, um die Ausnahme abzurufen.

let sleep = ms => {
    return new Promise ( (resolve, reject) => {
        if(ms > 5000) {
            reject('long time')
        } else {
            setTimeout(function() {
                resolve(ms)
            } ,ms)
        }
    })
}

let play = (ms) => {
    console.log(`I wait you ${ms} s`)
}

let main = async () => {
    try{
        let result = await sleep(3000);
        play(result)
    } catch (err) {
        throw err
    }
}
Nach dem Login kopieren

Hinweis: Was wartet darauf? Es ist Promise, das die Daten in der Resolve-Callback-Funktion zurückgibt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der asynchronen Verarbeitung von ES6 und ES7 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
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!