[JS] async와 await

---

01

async와 await 이란?

Promise를 더 쉽게 사용할 수 있게 해주는 자바스크립트의 기능입니다.

async는 함수 앞에 붙여서 비동기 함수로 만들고, await는 Promise가 처리될 때까지 기다리게 만듭니다.

1. 비동기란?

왜 비동기가 필요한지 비동기(Asynchronous)는 동시에 여러 작업을 처리할 수 있는 방식입니다.

예를 들어, 우리가 어떤 작업을 시작했을 때 그 작업이 끝날 때까지 기다리지 않고 다른 일을 할 수 있게 해주는 방식이죠.

 

 

✅ 왜 비동기가 필요한가요?

• 응답성 유지: 비동기를 사용하면, 네트워크 요청 중에도 웹 페이지나 앱을 계속 사용할 수 있습니다.
• 리소스 효율성: 기다리는 동안 다른 일을 처리할 수 있어 자원을 더 잘 활용할 수 있습니다.
• 시간 절약: 긴 작업을 기다리는 동안 다른 중요한 일을 할 수 있어 시간을 아낄 수 있습니다.

👉 추가적인 내용: 동기/비동기 포스팅 바로가기

[JS] 동기와 비동기, 둘이 싸우면 누가 이길까?

 

 

2. async

비동기 함수를 만들 때 사용하는 키워드입니다. 비동기 함수는 시간이 걸리는 작업을 차례대로 처리할 수 있게 도와줍니다.

이 함수는 항상 Promise를 반환합니다. Promise는 우리가 약속을 하듯이 나중에 결과가 오기를 기다리게 해주는 거죠.

 

async는 function 앞에 위치합니다.

async function f() {
  return 1;
}

 

3. await 

await는 async 함수 안에서만 사용할 수 있어요. await는 Promise가 끝날 때까지 기다리는 것입니다.

간단히 말해서, await는 무언가 끝날 때까지 기다려야 할 때 사용하는 신호죠.

 

❌ 일반 함수엔 await을 사용할 수 없습니다 :async 함수가 아닌데 await을 사용하면 문법 에러가 발생합니다.

// await는 async 함수 안에서만 동작합니다.
let value = await promise;

---

02

async와 await 활용법

1. await는 'thenable' 객체를 받습니다

await는 then()을 사용할 수 있는 객체만 기다릴 수 있습니다. 

쉽게 말하면, await는 Promise나 then() 메서드가 있는 객체를 기다린다는 거예요.

 

여기서 fetch()는 Promise를 반환하고, await는 Promise가 해결될 때까지 기다립니다.

async function getData() {
  const result = await fetch('https://jsonplaceholder.typicode.com/users/1');  // Promise를 반환하는 fetch 사용
  const data = await result.json();  // JSON 데이터를 기다려서 받아옴
  console.log(data);  // 데이터 출력
}

getData();

 

2. async async 클래스 메서드를 선언 가능

여기서 fetch()는 Promise를 반환하고, await는 Promise가 해결될 때까지 기다립니다.

async를 사용하면, fetchData 메서드가 비동기적으로 작동하고, 기다린 후 결과를 처리할 수 있습니다.

class User {
  async fetchData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const data = await response.json();
    console.log(data);
  }
}

const user = new User();
user.fetchData();  // 비동기 메서드 실행

 

3. async/await는 Promise.all과도 함께 쓸 수 있습니다.

Promise.all()은 여러 비동기 작업을 동시에 처리할 때 유용합니다.

async/await와 결합해서 여러 작업을 병렬로 처리할 수 있습니다.

 

아래 코드는 두 개의 API 요청을 동시에 보내고, 두 요청이 모두 끝날 때까지 기다려서 결과를 출력합니다.

Promise.all() 덕분에 두 작업이 병렬로 처리됩니다.

async function fetchAllData() {
  const userData = fetch('https://jsonplaceholder.typicode.com/users/1');
  const postData = fetch('https://jsonplaceholder.typicode.com/posts/1');

  // Promise.all로 두 개의 비동기 작업을 동시에 처리
  const results = await Promise.all([userData, postData]);
  const user = await results[0].json();
  const post = await results[1].json();
  
  console.log(user);
  console.log(post);
}

fetchAllData();

---

03

예제

1. 간단한 async와 await 사용

간단히 setTimeout을 사용해 1초 후에 데이터를 반환하는 비동기 함수입니다.

// 1초 후 값을 반환하는 비동기 함수
async function fetchData() {
  return new Promise(resolve => setTimeout(() => resolve("데이터 로드 완료!"), 1000));
}

async function getData() {
  const result = await fetchData();  // fetchData가 끝날 때까지 기다림
  console.log(result);  // "데이터 로드 완료!" 출력
}

getData();

 

2. async와 await로 API 호출

실제 API를 호출하여 데이터를 받아오는 예시입니다.

await는 fetch 함수가 끝날 때까지 기다리고, 그 후 응답을 받아 출력합니다.

// 예시 API를 호출하는 함수
async function fetchUserData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1'); // API 호출
  const data = await response.json();  // JSON 형태로 응답받기
  console.log(data);  // 사용자 정보 출력
}

fetchUserData();

---

04

마무리

async와 await는 비동기 코드를 더 간결하고 직관적으로 만들어 주는 강력한 도구입니다.

이를 통해 비동기 작업을 동기 코드처럼 작성할 수 있어 코드가 더 깔끔해지고 가독성이 향상됩니다.