[JavaScript] 자바스크립트 async / await

🎯 async / await

함수 앞에 async를 사용하면 Promise 객체를 반환 await을 사용하면 Promise를 결괏값이 바로 들어간다. 쉽게 생각하면 then() 기능이다.

• Promise를 활용한 비동기 코드를 간결하게 작성하는 문법
• 비동기 코드를 동기 코드처럼 간결하게 작성 가능
• await은 async 안에서만 사용 가능
• async로 선언된 함수는 promise 객체로 반환된다.

[TIL] 엘리스 SW 엔지니어 트랙 Day 019

 

📝 코드로 알아보는 async / await

async function temp() {
  let data = await fetchData();
  let user = await fetchData(data)

  return user;
}

• async 함수는 function 키워드 앞에 async을 붙여 만든다.
• async 함수 내부에서 await 키워드를 사용한다.
• fetch에서 .then()을 사용해서 데이터를 받아오는 것처럼 await을 사용하면 데이터를 받아올 수 있다.
• await을 사용하면 then 메서드 체인을 연결한 것처럼 순서대로 동작한다. ⇒ 동기처럼 동작

async function myFetch() {
  let response = await fetch('coffee.jpg');
  let myBlob = await response.blob();

  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}

myFetch()
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

 

📝 예외처리

async function asyncFunc() {
  try {
    let data1 = await fetchData1();

    return fetchData2(data1)
  } catch (error) {
    console.log("실패 : ", error);
  }
}

• try-catch 구문으로 async / await 형태 비동기 코드 에러 처리가 가능하다.
• catch 절의 error는 Promise의 catch 메서드가 받는 반환 값과 동일하다.

 

📌 참고

• https://ko.javascript.info/