우선 아래 예제를 확인한다.

결과는 기존 Promise 비동기 방식과 동일하다.

https://seongsland.tistory.com/272

 

Promise async await를 이용한 비동기 처리

샘플을 보면 대충 사용하는 방식을 알 수 있다. (색칠한 부분을 유의하면서 보도록 하자) function test1() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('test1 end'); }, 1000);..

seongsland.tistory.com

 

 

function test1() {
    setTimeout(() => {
        tests.next('test1 end');
    }, 1000);
}

function test2() {
    setTimeout(() => {
        tests.next('error');
    }, 1000);
}

function * getTests() {
    try {
        const t1 = yield test1();
        console.log("result : " + t1);

        if(t1 == "test1 end") {
            const t2 = yield test2();
            if(t2 == "error") {
                throw "test2 end";
            }

            console.log("result : " + t2);
        }
    } catch(err) {
        console.error("error : " + err);
    }
}

let tests = getTests();
tests.next();

 

 

  • 비동기를 처리할 함수에 *를 추가하면 Generator 함수로 처리된다.
  • Generator 함수는 .next();로 다음 yield 까지를 진행시킬 수 있다.
  • 마지막줄의 test.next(); 실행시 getTests() 함수의 첫 yield 까지 진행된다.
  • 그 이후 순차 적으로 비동기 방식으로 getTests()의 다음 yield 까지가 진행 되는 방식이다.
  • .next(값) 에 값을 넣어주면 왼쪽의 받는 변수에 대입시킬 수 있다.

 

'Front-Html > Javascript' 카테고리의 다른 글

룬 알고리즘 체크용 javascript 소스  (2) 2023.09.05
script background 호출  (0) 2022.05.18
Promise async await를 이용한 비동기 처리  (0) 2022.01.20
javascript querySelector  (0) 2021.03.03
javascript 암복호화 처리  (0) 2016.09.01