샘플을 보면 대충 사용하는 방식을 알 수 있다. (색칠한 부분을 유의하면서 보도록 하자)
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 |