샘플을 보면 대충 사용하는 방식을 알 수 있다. (색칠한 부분을 유의하면서 보도록 하자)

 

function test1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('test1 end');
        }, 1000);
    });
}

function test2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('test2 end');
        }, 1000);
    });
}

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

        if(t1 == "test1 end") {
            const t2 = await test2();
            console.log("result : " + t2);
        }
    } catch(err) {
        console.error("error : " + err);
    }
}

 

getTests();

 

  • test1()과 test2()에서는 다른 서버로 접속되거나 지연이 발생되는 업무가 들어갈 것이기 때문에 지연 테스트를 위해  setTimeout으로 넣었다.
  • 비동기 처리를 진행할 getTests() 함수 앞에 async를 넣고 각 지연이 필요한 함수들의 앞에 await를 넣는다.
  • await를 쓰기 위해서는 해당 함수들이 꼭 Promise를 반환해야 한다. (test1, test2의 return이 Promise인 것을 알 수 있다.)
  • Promise는 처리가 성공인 경우 resolve, 실패인 경우 reject를 호출하면 된다.
  • test1이나 test2에서 resolve가 아닌 reject가 호출된 경우 catch로 빠지게 되므로 해당 소스에서 console.log("result : " + t2); 부분은 처리되지 못한다.
  • Promise는 ES6, async는 ES7 이상에서 처리가 되므로 지원되는 브라우저를 먼저 확인해 보는 것이 좋다. (IE 처리 안됨 - 처리 위해 특별한 js library 추가 필요)

 

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

script background 호출  (0) 2022.05.18
Generator를 이용한 비동기 처리  (0) 2022.01.20
javascript querySelector  (0) 2021.03.03
javascript 암복호화 처리  (0) 2016.09.01
String.fromCharCode  (0) 2014.03.13