이 글을 이해하기 위해서는 먼저 Promise API에 대해 알고 있어야 하며 아래의 글을 참고하시기 바랍니다.
Javascript의 Promise API 요약
async와 awit의 사용은 비동기 처리에 대한 혼란스러운 코드의 가독성을 향상 시켜줌으로써 코드의 유지보수 및 견고한 코드를 작성할 수 있습니다.
먼저 아래의 코드는 Promise API를 이용한 비동기처리입니다.
function getItem() {
return new Promise((resolve, reject) => {
setTimeout(function() {
let result = { name: 'Dip2K', age: 44 };
resolve(result);
}, 2000);
});
}
function callback(result) {
console.log(result);
}
console.log('1');
getItem().then(callback);
console.log('2');
위의 코드를 async와 await를 이용해 동일하게 작동하도록 코드를 작성하면 다음과 같습니다.
function getItem() {
return new Promise((resolve, reject) => {
setTimeout(function() {
let result = { name: 'Dip2K', age: 44 };
resolve(result);
}, 2000);
});
}
async function get() {
let result = await getItem();
console.log(result);
}
console.log('1');
get();
console.log('2');
콜백함수 없이 비동기처리가 된 경우로, 순차적인 흐름의 코드로 작성되었습니다.
아래의 코드는 Promise의 예외의 처리를 async 및 await 구분에서 어떻게 처리 하는지를 보여주는 코드입니다.
function getItem() {
return new Promise((resolve, reject) => {
setTimeout(function() {
let bOK = false;
if(bOK) {
let result = { name: 'Dip2K', age: 44 };
resolve(result);
} else {
reject(null);
}
}, 2000);
});
}
async function get() {
try {
let result = await getItem();
console.log(result);
} catch(e) {
console.log(e);
}
}
console.log('1');
get();
console.log('2');
await와 fetch를 함께 사용하는 코드 예시를 마지막으로 언급하고 마무리 합니다.
async function fetchData() {
const response = await fetch("http:/...")
const data = await response.json()
cosnole.log(data)
}
fetchData()
