25. async, await - Promise 2탄

지난 글에서는 promise에 대해 알아보았다. 프로미스에 대해 알고 싶으면 아래에서 확인하자

2022.05.26 - [Cs] - 24. javascript - Promise (feat.콜백지옥)

 

const f1 = () =>{
  return new Promise((res, rej)=>{
    setTimeout(()=>{
      res("1번째")
    }, 3000);
  });
}

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('2번째')
    },1000);
  })
}

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('3번째')
    },2000);
  })
}

f1().then(
 (res) => f2(res)
).then(
 (res) => f3(res)
).then(
 (res) => console.log(res)
).catch(
 console.log('err')
).finally(()=>{
  console.log('끝')
})

프로미스를 리턴하는 함수를 위와 같이 나타낼 수 있다. 이를 조금더 간편하게 나타낼 수 있는게 있다.

바로 async, await을 이용하는 것이다.

 

async function f1(){
    return 'value';
}

async 는 function 앞에 async를 붙이면 return은 프로미스 형태로 리턴이 된다. 

f1().then((val) => {
	console.log(val);
});

처음의 프로미스 함수들을 async로 바꾸어보자.

async function f1(){
    await new Promise((resolve,reject)=>setTimeOut(resolve,1000);
    return '1번째'
}
async function f2(){
    await new Promise((resolve,reject)=>setTimeOut(resolve,1000);
    return '2번째'
}
async function f3(){
    await new Promise((resolve,reject)=>setTimeOut(resolve,1000);
    return '3번째'
}
async function order(){
    let result = await f1();
    let result2 = await f2(result);
    let result3 = await f3(result2);
    console.log(result3);
}

위와 같이 바꿀 수 있고, await을 이용하여 동기적으로 사용이 가능하다.