ES6 생성기 사용법 소개(예제 포함)

이 글은 ES6 제너레이터 사용법을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Concept

제너레이터는 제너레이터 함수를 실행하여 얻어지며 반복 가능합니다.

function* gen() { 
  yield 'a';
  yield 'b';
  yield 'c';
}

let g = gen(); 
// "Generator { }"

원리와 간단한 응용

생성기에는 내부 코드 실행을 일시 중지하고 외부 함수에 값을 반환할 수 있는 훌륭한 기능이 있습니다. (일시 중지 후에도 다른 코드 실행이 차단되지 않습니다.) 다음 메서드가 외부에서 호출되면 나머지 코드를 계속 실행하고 외부에서 매개 변수를 받아들입니다. 이 구현은 주로 Yield 키워드에 의존합니다.

yield 키워드는 생성기 함수 실행을 일시 중지시키고, 항복 키워드 뒤에 오는 표현식의 값이 생성기의 호출자에게 반환됩니다. return 키워드의 생성기 기반 버전으로 생각할 수 있습니다.

function* g(){
    var a = yield 2;
    console.log(a);
}

var it = g(); // 返回一个可迭代的生成器对象
console.log(it.next()); // 执行生成器函数内部代码，第一次返回 {done: false, value: 2}
it.next(3); // 继续执行生成器函数内部代码，同时向生成器传递参数3，最后返回 {done: true, value: undefined}

간단한 카운터

function* count(){
    var n = 1;
    while(true){
        yield n++;
    }
}

var it = count();
it.next(); // 1
it.next(); // 2
it.next(); // 3

동기식으로 비동기 코드 작성

과거에는 콜백 함수를 전달하여 비동기 ajax 요청 결과를 처리했습니다. 여러 수준의 콜백 중첩이 발생하면 코드의 가독성이 떨어지고 디버깅이 불편해집니다. 생성기를 사용하면 비동기식 코드를 동기식으로 작성할 수 있습니다. 매우 흥미로운 것 같습니다. 우리 코드는 다음과 같습니다.

function foo(){
    var result = asyncFun(); // asyncFun 是异步函数，result 是异步返回的结果
    console.log(result);
}

물론 위 코드는 올바른 결과를 얻지 못하고 단지 아이디어일 뿐입니다. 우리는 발전기를 사용하여 이를 수행할 예정이며 작동합니다. 생성기의 특성을 생각해 보세요.

1. 일시 중지하고 외부로 값을 반환할 수 있습니다.
2. 나머지 코드를 계속 실행하고 외부에서 매개 변수를 허용할 수 있습니다.

이것으로 충분합니다. 생성기 기능을 적용한 후 이제 코드를 다시 디자인합니다.

function* foo(){
    // 这里遇到了异步方法，必须停下来。
    // 等待异步方法执行完毕，并返回结果，继续运行代码。当然，同步 ajax 不能算，它不是异步
    // 输出结果
}

앉아서 일시 중지 및 계속과 관련된 키워드에 대해 생각해 보세요. 그만...계속...그만...계속...그만...계속...하지마...그만...하지마...그만...하지마.. .Stop...이 두 단어는 yield, next입니다.

function *foo(){
    var result = yield asyncFun(next);
    console.log(result);
}

코드가 yield를 만나면 일시 중지됩니다. 이때 asyncFun 함수는 일시 중지되지 않습니다. , 실행이 완료된 후 생성기의 next 메서드가 호출되고 반환 결과가 next에 매개변수로 전달됩니다. 생성기 함수 내에서 next를 얻을 수 없으므로 next를 전달하려면 전역 변수를 사용해야 합니다.

var next, gn;

function asyncFun(next){
    // 模拟异步请求
    setTimeout(function(){
        // 返回一个随机数
        next(Math.random())
    }, 1000)
}

function* foo(){
    var result = yield asyncFun(next);
    console.log(result);
}

gn = foo();
next = gn.next.bind(gn);
next(); // 打印随机数

이렇게 쓰니 달리기엔 좀 무거워 보이는군요. 비동기 코드가 포함된 생성기 함수를 실행하는 래퍼 함수를 ​​작성할 수 있습니다.

function asyncFun(next){
  // 模拟异步请求
  setTimeout(function(){
    // 返回一个随机数
    next(Math.random())
  }, 1000)
}

function* foo(){
  var result = yield function(next){asyncFun(next)};
  console.log(result);
}



function wrapFun (gFn){
  var gn = foo(),
      next = gn.next.bind(gn);
  next().value(next);
}

wrapFun(foo);

데모 주소

그러나 Promise와 await이 도입된 이후로 이 조합을 사용하는 사람들이 많아지면서 그 용도도 더욱 간단해지고 넓어졌습니다.

위 내용은 ES6 생성기 사용법 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!