Maison > interface Web > js tutoriel > Explication détaillée du traitement asynchrone ES6 et ES7 (exemple de code)

Explication détaillée du traitement asynchrone ES6 et ES7 (exemple de code)

不言
Libérer: 2018-11-17 15:49:09
avant
2420 Les gens l'ont consulté

Cet article vous apporte une explication détaillée (exemple de code) du traitement asynchrone dans ES6 et ES7. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Maîtrisez le traitement asynchrone ES6/ES7 en une seule fois

Assumez un scénario, attendez que votre petite amie s'endorme et aille faire du shopping. Si cela prend plus de 5 secondes, ne le faites pas. attendez et jouez à des jeux par vous-même...

Méthode de traitement de promesse ES6

Méthode d'écriture de promesse
Méthode d'appel de chaîne de promesse, uniquement lorsque le traitement asynchrone est réussi, revenez à l'utilisation .then(data => ; {}) pour obtenir les données une fois le traitement asynchrone réussi
Lorsqu'une erreur se produit dans le traitement asynchrone, .then(err => {}) sera appelé et une exception sera obtenue
En d'autres termes , il y a deux méthodes dans .then( data => {}, err => {}) Une fonction de rappel en paramètre
ou il existe une deuxième façon d'écrire .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);
    })
}
Copier après la connexion

Méthode de traitement ES7 Async/Await

async indique qu'il y a une opération asynchrone dans cette fonction, et wait est toujours écrit dans le fonction déclarée par async.
Lorsqu'elle rencontre awit, la fonction cessera de s'exécuter, attendra la fin de l'opération asynchrone, puis exécutera les instructions suivantes
Le résultat obtenu par l'opération asynchrone est le retour du paramètre du rappel de résolution. function
L'exception est obtenue via le paramètre de fonction de rappel de rejet
Notez que lors de la capture d'une exception, nous devons souvent utiliser la méthode try catch dans le corps de la fonction asynchrone pour obtenir l'exception

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
    }
}
Copier après la connexion

Remarque : Qu'est-ce que wait attend ? C'est une promesse et il renvoie les données dans la fonction de rappel de résolution

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal