ES6 Generator 함수의 응용 사례 분석

이 문서에서는 ES6 Generator 함수의 응용 사례를 설명합니다.다음과 같이 여러분에게 참고할 수 있도록 공유합니다.
Generator 함수는 비동기 프로그래밍 솔루션입니다.Generator 함수는 하나의 역행기 대상을 되돌려줍니다.Generator 함수는 일반 함수이지만 두 가지 특징이 있습니다.첫째,function 키워드와 함수 이름 사이에 별표가 있다.둘째, 함수체 내부는 yield 표현식을 사용한다.
generator 함수 인식

function * fn() {
 console.log('hello');
 return 'Joh';
}
//  fn() ， ,   interator ， interator 
let it = fn();
//  next ,   {value:'Joh', done:true},  next return 
let res = it.next();
console.log(res);

generator 함수의 yield와return

function * fn() {
  //  yield ， generator ， yield 
  //   yield return ： yield ，return 1 
  yield 1;
  yield 2;
  yield 3;
  return 4; //  return ，done true value undefined
}
let it = fn();
//  for-of  done false value ，done true , 
for(let v of it) {
  console.log(v); //   1 2 3
}

yield의 값과 부여 문장

function * fn(_name) {
 let name = yield _name; // yield  undefined
 return name;
}
let it = fn('Joh');
console.log(it.next()); // {value:'Joh', done:false}
console.log(it.next('Tom')); // {value:'Tom', done:true} //  value undefined， next 
console.log(it.next('Lily')); // {value: undefined, done:true} //  ， undefined

yield 문장의 위치와 괄호

function sum(a, b) {
 return a + b;
}
function * fn() {
 let res = sum(yield 1, 5 + (yield 3));
 console.log(res);
 console.log('my qq: ' + (yield qq)); // yield  
}
fn();

이상 포착
예외 캡처 방법 1:

function * fn() {
 let qq = yield; // yield  undefined,  
 console.log(qq);
}
let g = fn();
g.next(); //  
// g.next('qq 11111'); //  ：qq 11111
g.throw('error!'); // Uncaught error!

예외 포착 방법 2:

function * fn() {
 let qq;
 try {
  qq = yield; // yield  undefined
 }catch(e){
  console.log('qq have error');
 }finally{
  console.log(qq);
 }
}
let g = fn();
g.next();
g.throw('error!');
// qq have error
// undefined

예외 포착 방법 3:

function * fn() {
 let qq;
 qq = yield;
 console.log(qq);
}
let g = fn();
g.next();
try{
 g.throw('error!');
}catch(e){
 console.log('qq have error!');
}

예외 포착 방식4:

function * fn() {
 let qq;
 try {
  qq = yield ff; // ff  ,  qq    yield  
 }catch(e){
  console.log('err1');
 }
 console.log(qq);
}
let g = fn();
g.next();
g.next('qq 5554');
// err1
// undefined

generator와promise를 결합하여 사용하고 비동기적인 논리적 관계를 동기화하는 방식으로 쓴다

function asyncF(name) {
 return new Promise(function(resolve){
  setTimeout(function(){
   resolve('my name is ' + name);
  });
 });
}
function * fn() {
 console.log(yield asyncF('Joh'));
}
let gf = fn();
function exec(gf,value) {
 let res = gf.next(value);
 if(!res.done) {
  if(res.value instanceof Promise) {
   res.value.then(function (v) {
    exec(gf, v);
   })
  }else{
   exec(gf, res.value);
  }
 }
}
exec(gf); // my name is Joh

더 복잡한 쓰기 방법:

function asyncF(name) {
 return new Promise(function(resolve){
  setTimeout(function(){
   resolve('my name is ' + name);
  });
 });
}
function sum(a, b) {
 return new Promise(function (resolve) {
  setTimeout(function () {
    resolve(a + b);
  });
 })
}
function * fn(name) {
 if((yield sum(3,5)) > 6) {
  console.log(yield asyncF(name));
 }else{
  console.log('error');
 }
}
let gf = fn('Joh');
// generator     tj/co  
function exec(gf,value) {
 let res = gf.next(value);
 if(!res.done) {
  if(res.value instanceof Promise) {
   res.value.then(function (v) {
    exec(gf, v);
   })
  }else{
   exec(gf, res.value);
  }
 }
}
exec(gf); // my name is Joh

순수한 promise를 사용하여 구현:

function asyncF(name) {
 return new Promise(function(resolve){
  setTimeout(function(){
   resolve('my name is ' + name);
  });
 });
}
function sum(a, b) {
 return new Promise(function (resolve) {
  setTimeout(function () {
    resolve(a + b);
  });
 })
}
function fn(name) {
 sum(3,5)
  .then(function (num) {
   if(num > 6) {
    asyncF(name)
     .then(function (v) {
      console.log(v);
     })
   }else{
    console.log('error');
   }
  })
}
fn('Joh');

코모듈을 사용하여 자신이 쓴 실행기를 대체합니다

var co = require('co');
function asyncF(name) {
 return new Promise(function(resolve){
  setTimeout(function(){
   resolve('my name is ' + name);
  });
 });
}
function sum(a, b) {
 return new Promise(function (resolve) {
  setTimeout(function () {
    resolve(a + b);
  });
 })
}
function * fn(name) {
 if((yield sum(3,5)) > 6) {
  console.log(yield asyncF(name));
 }else{
  console.log('error');
 }
}
var fnx = co.wrap(fn);
fnx('Joh'); // my name is Joh

자바스크립트에 관한 더 많은 내용은 본 사이트의 주제를 볼 수 있습니다:, 자바스크립트 전환 효과와 기교 총결, 자바스크립트 검색 알고리즘 기교 총결, 자바스크립트 오류와 디버깅 기교 총결, 자바스크립트 데이터 구조와 알고리즘 기교 총결, 그리고
본 논문이 여러분의 JavaScript 프로그램 설계에 도움이 되기를 바랍니다.