async/await
async/await 문법은 ES8에 해당하는 문법으로서, Promise 를 더욱 쉽게 사용 할 수 있게 해줍니다.
기본적인 사용법을 알아봅시다.
const sleep = (ms) => {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function process() {
console.log('안녕하세요!');
await sleep(1000);
console.log('반갑습니다.!');
}
process();
// 결과)
안녕하세요!
반갑습니다.!
async/await 문법을 사용할 때에는, 함수를 선언 할 때 함수의 앞부분에 async 키워드를 붙여주세요. 그리고 Promise 의 앞부분에 await 을 넣어주면 해당 프로미스가 끝날때까지 기다렸다가 다음 작업을 수행 할 수 있습니다.
위 코드에서는 sleep 이라는 함수를 만들어서 파라미터로 넣어준 시간 만큼 기다리는 Promise 를 만들고, 이를 process 함수에서 사용해주었습니다.
함수에서 async 를 사용하면, 해당 함수는 결과값으로 Promise 를 반환하게 됩니다. 따라서 다음과 같이 코드를 작성 할 수 있습니다.
const sleep = (ms) => {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function process() {
console.log('안녕하세요!');
await sleep(1000);
console.log('반갑습니다.!');
}
process().then(() => {
console.log('작업 끝났어요!')
});
// 결과)
안녕하세요!
반갑습니다.!
작업 끝났어요!
async 함수에서 에러를 발생 시킬때에는 throw 를 사용하고, 에러를 잡아낼 때에는 try/catch 문을 사용합니다.
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function errorMake() {
await sleep(3000);
const error = new Error();
throw error;
};
async function process() {
try {
await errorMake();
} catch (e) {
console.log('then error : ', e) // 여기서 e는 위에 throw error;를 가리키게 됩니다.!!
}
}
process();
// 결과)
then error : error
EX1)
new Promise 로 정의 하는 코드
function a(value) {
return new Promise((resolve, reject) => {
setTimeout(function() { // 여기서 setTimeout 한것은 서버와의 통신에서 시간을 걸린다는 가정해서 이미를 setTimeout함수를 사용한것입니다.
resolve(value)
},1000)
})
}
function b(value) {
return new Promise((resolve, reject) => {
setTimeout(function() { // 여기서 setTimeout 한것은 서버와의 통신에서 시간을 걸린다는 가정해서 이미를 setTimeout함수를 사용한것입니다.
resolve(value)
},1000)
})
}
function c(value) {
return new Promise((resolve, reject) => {
setTimeout(function() { // 여기서 setTimeout 한것은 서버와의 통신에서 시간을 걸린다는 가정해서 이미를 setTimeout함수를 사용한것입니다.
resolve(value)
},1000)
})
}
function d(value) {
return new Promise((resolve, reject) => {
setTimeout(function() { // 여기서 setTimeout 한것은 서버와의 통신에서 시간을 걸린다는 가정해서 이미를 setTimeout함수를 사용한것입니다.
resolve(value)
},1000)
})
}
function test(value) {
return new Promise((resolve, reject) => {
if(false) { // 정상적으로 서버와 통신못하면 (에러 나면) 실행됩니다.
reject('Error') //reject('원하는 메세지 작성')
}
setTimeout(() => { // 여기서 setTimeout 한것은 서버와의 통신에서 시간을 걸린다는 가정해서 이미를 setTimeout함수를 사용한것입니다.
resolve(value)
}, 1000);
})
}
then catch 실행하는 코드
// then catch 실행하는 코드
test('A').then((res) => {console.log(res)})
.then(() => b("B").then((res) => {console.log(res)}))
.then(() => c("C").then((res) => {console.log(res)}))
.then(() => d("D").then((res) => {console.log(res)}))
.catch((error) => {
console.log(error)
alert(error)
})
.finally(() => {
console.log('done!!')
alert('done!!')
})
ES8버전 async await 실행하는 코드
// ES8버전 async await 실행하는 코드
async function asyncFunc() {
try {
const a0 = await test('A!')
console.log(a0)
const a1 = await a('A')
console.log(a1)
const b1 = await b('B')
console.log(b1)
const c1 = await c('C')
console.log(c1)
const d1 = await d('D')
console.log(d1)
} catch (error) {
alert(error)
console.log(error)
} finally {
console.log('done!!')
}
}
asyncFunc()