Que signifie Générateur dans ES6 ? Introduction au générateur dans ES6

Le contenu de cet article porte sur ce que signifie Generator dans ES6 ? L'introduction de Generator dans ES6 a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Générateur dans ES6

Le générateur est une fonctionnalité très intéressante d'ES6, et c'est aussi une fonctionnalité qui n'est pas facile à comprendre. Différent du but évident de let/const fournir une portée au niveau du bloc, quel est le but de cette chose ?

Tout d'abord, nous devons clarifier un problème. En JavaScript, tant qu'une fonction commence à s'exécuter, elle ne peut pas être arrêtée tant que l'exécution n'est pas terminée (ne me parlez pas du débogage, l'avez-vous déjà fait) avez-vous vu un utilisateur qui utilise le produit et doit encore l'ouvrir ?

Mais, Generator offre cette fonctionnalité. Regardez le code suivant :

function *g(){
    console.log('start');
    yield 1;
    console.log('middle');
    yield 2;
    console.log('end');
}
var g1 = g();
console.log(g1.next()); 
// start
// {value: 1, done: false}
console.log(g1.next());  
// middle
// {value: 2, done: false}
console.log(g1.next());  
// end
// {value: undefined, done: true}

D'après les résultats de sortie, nous voyons que dans la fonction g, lorsque le mot-clé rendement est rencontré, le programme en cours d'exécution s'arrêtera. Ce n'est qu'en appelant la méthode next() que le code de la fonction g continuera à être exécuté. La fonction g elle-même a donc un état en pause.

À ce stade, nous devons savoir :

• Le générateur n'est pas une fonction, pas une fonction, pas une fonction

• ;

  g() n'est pas Il démarrera l'exécution immédiatement, mais fera une pause dès qu'il apparaîtra et renverra un objet Iterator

• Chaque fois que g1.next() se brisera ; l'état de pause et exécutez jusqu'à ce qu'il rencontre le prochain rendement Ou lorsque return

• rencontre le rendement, l'expression après le rendement sera exécutée et la valeur après l'exécution sera renvoyée, puis elle entrera l'état en pause à nouveau, à ce moment-là terminé : faux.

• Lorsqu'un retour est rencontré, une valeur sera renvoyée et l'exécution se terminera, c'est-à-dire terminée : true

• La valeur de retour de g.next() à chaque fois C'est toujours sous la forme de {value: ..., done: ...}

Générateur et asynchrone

Puisque Generator peut fonctionner s'arrêter Plus tard, certaines personnes à l'esprit brillant se sont demandé si elles pouvaient utiliser Generator pour traiter des programmes asynchrones.

Regardons d'abord un exemple traditionnel :

    function asyn(fn) {
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                fn();
                resolve(true);
            }, 1000);
        });
    }

    function main() {
        console.log('start');
        asyn(function(d) {
            console.log('async one');
            asyn(function(d) {
                console.log('async two');
                console.log('end');
            });
        });
    }

    main();

Regardons un programme asynchrone utilisant Generator :

    function asyn(fn) {
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                fn();
                resolve(true);
            }, 1000);
        });
    }

    co(function*() {
        console.log('start');
        yield asyn(function(d) {
            console.log('async one');
        });

        yield asyn(function(d) {
            console.log('async two');
        });
        console.log('end');
    });

    function co(fn) {

        return new Promise((resolve,reject)=>{
            let g = fn();

            onFullfilled();
            function onFullfilled() {
                let ret = null;
                ret = g.next();
                next(ret);
            }

            function next(ret) {
                if(ret.done) return resolve(ret.value);
                ret.value.then(onFullfilled);
            }
        } );
    }

La fonction n'utilise pas de rappels imbriqués dans le programme asynchrone. Il est écrit directement de manière synchrone. Le principe est probablement qu'il existe deux programmes asynchrones, et Xiao Ming et Xiao Hong sont utilisés pour y faire référence. Xiaohong doit attendre que Xiaoming ait fini de s'exécuter avant de pouvoir être exécuté. Ensuite, lorsque nous exécutons Xiaoming, nous suspendons l'exécution du programme (via le rendement), attendons que Xiaoming renvoie le résultat, puis exécutons le Xiaohong suivant (next(). ).

Dans le programme ci-dessus, nous avons ajouté une fonction co, qui permet au générateur de s'exécuter automatiquement. Pour parler franchement, lorsque la première fonction asynchrone revient, la méthode next() est automatiquement appelée pour exécuter le code suivant.

Generator et Koa

Koa est un framework d'application web basé sur Node.js. Dans Koa, les programmes asynchrones traités sont principalement des requêtes réseau (HTTP), des lectures de fichiers et des requêtes de données. Il existe de nombreux scénarios asynchrones ici. Si vous ajoutez une superposition de programmes et utilisez la méthode de rappel traditionnelle, il y aura trop de rappels.

app.on('get', function(){
    auth(function(){
        router(function(){
            find(function(){
                save(function(){
                    render(function(){
                        //......
                    })
                })
            })
        })
    })

})

Cette façon d'écrire est extrêmement préjudiciable à la maintenance du programme et n'est pas du tout pratique. Après avoir le générateur, nous pouvons écrire le programme de la même manière que ci-dessus. La version originale de Koa utilisait cette méthode pour convertir les programmes de traitement intermédiaires en « rendements » (middleware). Le traitement des demandes des clients sous forme de middleware rend le développement d'applications App plus flexible et non limité par le framework lui-même.

Dans le dernier Koa2, Genetator a été abandonné et utilise à la place async/await.

Mais quelle que soit la méthode utilisée, l'essentiel est d'utiliser Promise.

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!