[javaScript] async/await

🔎async/await란

promise를 더욱 쉽게 사용하기 위한 문법이다.

---

☘️ async함수

• async를 function앞에 적어주면 해당 함수는 항상 promise를 반환한다.
• promise가 아닌 값을 return 하게 짜더라고 resolve된 promise로 감싸 어떻게든 promise로 반환한다.(아래 <예시> 참고)
• 함수 안에서 await를 사용할 수 있다.

 

<예시>

//코드1️⃣: async이용
async function f() {
  return 1; //promise가 아닌 값을 반환하게 되어있지만...
}

f().then((result)=>{console.log(result)}); 
//Promise { undefined } promise가 나온다.
//1


//코드2️⃣: promise이용
const f = ()=>{
  return new Promise((resolve,reject)=>{
    resolve(1)
  })
}

f().then((result)=>{console.log(result)});


//코드3️⃣: async resolve이용
async function f() {
  return Promise.resolve(1);
}

f().then((result)=>{console.log(result)}); // 1

---

☘️ await

• promise가 처리될 때까지 기다렸다가 다 처리되면 그 결과와 함께 실행이 재개된다.
• promise를 처리하는 동안 엔진이 다른 일을 할 수 있다.
• async함수에서만 쓸 수 있다.
• promise.then보다 더 가독성이 좋고 쓰기 쉽게 나온 문법이다.

아래는 javascript.info의 코드예시이다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

---

☔️ promise.then을 async/await으로 바꾸기

 

promise.then코드 (before)

function gaebokchiPromise(str){
  return new Promise((resolve,reject)=>{
    	if(str === 'lucky'){
        	setTimeout(() => resolve('먹이를 발견했다!🐟'), 1000)
        }
    	else if(str === 'unlucky'){
          reject('물이 차가워 돌연사!☠️')
      }
	})
  .then((result)=>{
    console.log(result)
  })
}

gaebokchiPromise('lucky')
//1초 뒤에 '먹이를 발견했다!🐟'

 

async.await코드 (after)

async function gaebokchiPromise(str){
  let result = await new Promise((resolve,reject)=>{
    	if(str === 'lucky'){
        	setTimeout(() => resolve('먹이를 발견했다!🐟'), 1000)
        }
    	else if(str === 'unlucky'){
          reject('물이 차가워 돌연사!☠️')
      }
	});
  console.log(result)
}

gaebokchiPromise('lucky')
//1초 뒤에 '먹이를 발견했다!🐟'

---

💙 try로 감싸고 catch로 error 잡기

에러가 발생하면 제어의 흐름이 catch블록으로 넘어간다. 

async function gaebokchiPromise(str){
  try{
  let result = await new Promise((resolve,reject)=>{
    	if(str === 'lucky'){
        	setTimeout(() => resolve('먹이를 발견했다!🐟'), 1000)
        }
    	else if(str === 'unlucky'){
          reject('물이 차가워 돌연사!☠️')
      }
	});
  console.log(result)
  } catch(error){
    console.log(error)
  }
}

gaebokchiPromise('unlucky')
//1초 뒤에 '먹이를 발견했다!🐟'