ES6에서 Generator 함수 사용

Generator 함수는 ES6가 제공하는 비동기 프로그래밍 솔루션이자 역행기 생성 함수로 문법 행위는 전통 함수와 완전히 다르다.
1 기본 사용법
function 키워드를 사용한 후 * 를 추가하는 방식으로 함수를 설명합니다. 이 함수는Generator 함수입니다.

let tell = function* (){
    yield 1;
    yield 2;
    yield 3;
}
let k = tell();
console.log(k.next());//{value: 1, done: false}
console.log(k.next());//{value: 2, done: false}
console.log(k.next());//{value: 3, done: false}
console.log(k.next());//{value: undefined, done: true}

위 코드에서 알 수 있듯이Generator 함수는 여러 개의 반환값 상태 (yield 키워드마다 한 상태) 가 있으며,next () 함수를 호출할 때에만 값을 되돌려주고,next () 함수를 호출할 때마다 대상{value: xxx, done: false}을 되돌려주고, 대응하는 yield가 없을 때까지done 상태가true인 대상{value: undefined, done: true}으로 되돌려줍니다.
2 라우터 추가
일반적인 대상obj는 기본적으로 캐리어가 없습니다. for를 사용할 수 없음을 의미합니다.of 반복, ... 조작부호를 사용할 수 없습니다.

let obj = {
    name:'zhangsan',
    age:18,
    sex:'man'
}
for(var value of obj){
  console.log(value);//  obj is not iterable
}
console.log([...obj]);//  obj is not iterable

보아하니 모두 오류 obj is not iterable 입니다. 우리는Generator 함수를 통해 역행기를 추가합니다.

let obj = {
    name:'zhangsan',
    age:18,
    sex:'man'
}
obj[Symbol.iterator]=function* (){
    for(var key in obj){
        yield obj[key];
    }
}
for(let value of obj){
    console.log(value);//zhangsan 18 man
}
console.log([...obj]);//["zhangsan", 18, "man"]

3 aax 요청을 유사한 let a = aax () 의 동기화 값 형식으로 변환
한 업무 내에 여러 개의 요청이 직렬적으로 의존하는 것을 자주 볼 수 있다. 즉, 후자는 전자의 요청 결과에 의존하는 것이다. 현재는 두 가지 방법이 있을 뿐이다.

리셋 함수 중첩

promise.then를 사용하여 체인 호출을 진행하였으나, 현재Generator 함수를 배운 후 세 번째 선택이 가능합니다

이전 네트워크 요청의 반환 값을 변수에 부여하고 다음 요청에서 다음과 같은 형식을 사용한다. let a = 1(){}let b = 2(a){} 실현 코드는 다음과 같다.

let res = 0;
// ， ， param
function ajaxMy(method,url,param,varibal){
    console.log(param);
    // 1 response
    setTimeout(function(){
        let response = res++;
        varibal.next(response);
    },300)
}

let k;
let tell = function* (){
    // 1
    let a = yield ajaxMy('get','www.baidu.com',10,k);
    console.log(a);//0
    // 2
    let b = yield ajaxMy('get','www.baidu.com',a,k);
    console.log(b);//1
    // 3
    let c = yield ajaxMy('get','www.baidu.com',b,k);
    console.log(c);//2
    // 4
    let d = yield ajaxMy('get','www.baidu.com',c,k);
    console.log(d);//3
}
k = tell()
k.next();

상기 코드let a = yield ajaxMy('get','www.baidu.com',10,k);는 하나의 네트워크 요청의 반환 값을 a 변수에 부여하는 것과 유사하여 다음 요청yield ajaxMy('get','www.baidu.com',a,k);에서 매개 변수로 사용할 수 있으며 이렇게 하면 업무 논리를 작성하는 것이 매우 뚜렷해질 것이다.
4 구현 상태기

let state = function* (){
    while(1){
        yield 'block';
        yield 'none';
    }
}
let displayClass = state();
console.log(displayClass.next().value);//block
console.log(displayClass.next().value);//none
console.log(displayClass.next().value);//block
console.log(displayClass.next().value);//none

next를 한 번 호출할 때마다value값은 block,none 두 값에서 왔다갔다하며 변경되지 않습니다.
5 폴링 실현

// ， 
let requestSingFn = function* (){
    yield new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve({code:304,data:{username:'zhangsan'}});
        },300)
    })
}
//   code 200 
let requestFn = function(){
    let req = requestSingFn();
    let stat = req.next();
    stat.value.then(function(response){
        if(response.code!=200){
            setTimeout(function(){
                console.log(' ');
                requestFn();
            },1000);
        }else{
            console.log(response.data);
        }
    })
}
requestFn();

코드의 상태가 200 응답으로 바뀌어야 요청을 전송하지 않습니다. 그렇지 않으면 1300밀리초에 한 번씩 요청 ES6 총편 - 디렉터리