ES6에서 Generator는 무엇을 의미합니까? ES6의 제너레이터 소개

이 기사의 내용은 ES6에서 Generator의 의미에 관한 것입니다. ES6의 Generator 도입은 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Generator in ES6

Generator는 ES6의 매우 흥미로운 기능이면서도 이해하기 쉽지 않은 기능이기도 합니다. 블록 수준 범위를 제공한다는 명백한 목적과 달리 이 것의 목적은 무엇입니까? let/const

먼저 문제를 명확히 해야 합니다. JavaScript에서는 함수가 실행되기 시작하면 실행이 완료될 때까지 중지할 수 없습니다. (나에게 디버깅에 대해 언급하지 마세요. 혹시 그런 사용자를 본 적이 있습니까?) 제품을 사용하고 코드를 디버깅하려면 디버그를 열어야 합니까?

하지만 Generator는 이 기능을 제공합니다. 아래 코드를 보세요:

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}

출력 결과에 따르면 함수 g에서 Yield 키워드를 만나면 실행 중인 프로그램이 중지되는 것을 볼 수 있습니다. next() 메서드를 호출해야만 함수 g의 코드가 계속 실행됩니다. 따라서 함수 g 자체는 일시 중지된 상태입니다.

이 시점에서 우리는 다음을 알아야 합니다:

• Generator는 함수도 아니고 함수도 아닙니다.

• g()는 즉시 실행을 시작하지 않지만 실행이 시작되자마자 일시 중지됩니다.

• 매번 g1.next()는 일시정지 상태를 깨고 다음 항복 또는 반환을 만날 때까지 실행됩니다.

• yy가 발생하면 항복 이후의 표현식이 실행되고 실행 후 값이 반환되고 다시 일시 중지된 상태로 들어갑니다. 이때 done: false입니다.

• return을 만나면 값이 반환되고 실행이 종료됩니다. 즉, done: true

• g.next()의 매번 반환 값은 항상 {value: ... , done:입니다. ...}

Generator와 비동기

의 형태 Generator는 기능을 중지할 수 있으므로, 머리가 좋은 일부 사람들은 Generator를 비동기 프로그램 처리에 사용할 수 있는지 생각해 보았습니다.

먼저 전통적인 예를 살펴보겠습니다:

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

그런 다음 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);
            }
        } );
    }

함수는 비동기 프로그램에서 중첩된 콜백을 사용하지 않고 동기 방식으로 직접 작성됩니다. 원칙은 아마도 두 개의 비동기 프로그램이 있고 이를 참조하는 데 Xiao Ming과 Xiao Hong이 사용된다는 것입니다. Xiaohong은 Xiaoming이 실행되기 전에 실행이 완료될 때까지 기다려야 합니다. 그런 다음 Xiaoming을 실행할 때 프로그램 실행을 일시 중지하고(yield를 통해) Xiaoming가 결과를 반환할 때까지 기다린 후 다음 Xiaohong(next()를 실행합니다. ).

위 프로그램에서 co 함수를 추가했습니다. 이 함수의 기능은 Generator가 자동으로 실행되도록 하는 것입니다. 직설적으로 말하면 첫 번째 비동기 함수가 반환되면 next() 메서드가 자동으로 호출되어 다음 코드를 실행합니다.

Generator 및 Koa

Koa는 Node.js 기반의 웹 애플리케이션 프레임워크입니다. Koa에서 처리되는 비동기 프로그램은 주로 네트워크 요청(HTTP), 파일 읽기 및 데이터 쿼리입니다. 여기에는 비동기 시나리오가 많이 있습니다. 프로그램 계층화를 추가하고 기존 콜백 방법을 사용하면 콜백이 너무 많아집니다.

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

})

이러한 작성 방식은 프로그램 유지 관리에 매우 해롭고 전혀 불편합니다. 생성기를 갖고 나면 위와 같은 방식으로 프로그램을 작성할 수 있습니다. Koa의 원래 버전은 중간 처리 프로그램을 "수율"(미들웨어)로 변환하기 위해 이 방법을 사용했습니다. 미들웨어 형태로 클라이언트 요청을 처리하면 앱 애플리케이션 개발이 더욱 유연해지고 프레임워크 자체에 의해 제한되지 않습니다.

최신 Koa2에서는 Genetator가 폐기되고 대신 async/await를 사용합니다.

그러나 어떤 방법을 사용하더라도 Promise를 사용하는 것이 본질입니다.

위 내용은 ES6에서 Generator는 무엇을 의미합니까? ES6의 제너레이터 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!