JavaScript비동기 프로그래밍 - await

async&await

async : 비동기 함수를 정의할 때 사용하는 키워드로 항상 Promise 객체를 반환함

async function example() {
  return 'Hello'; // 자동으로 Promise.resolve('Hello')로 처리됨
}

await: Promise 가 처리될 때까지 기다림, async 함수 내부에서만 사용 가능

async function getData() {
  let result = await fetch('https://api.example.com/data');
  let json = await result.json();
  console.log(json);
}

 

 

<서버에서 데이터 가져오기>

async function fetchUserData() {
  let data = await fetch('https://api.example.com/data');
  let jsonData = await data.json();

  console.log(jsonData);
}

await는 각 비동기작업이 끝날 때가지 기다려 주기 때문에, 마치 동기식 코드처럼 자연스럽게읽을 수 있음

 

<Try/ catch 네트워크 요청처럼 외부 리소스를 다룰 때에는 반드시 예외처리>

async function fetchCustomerData() {
  try {
    let data = await fetch('url');

    if (!data.ok) {
      throw new Error('네트워크 응답 실패');
    }

    let jsonData = await data.json();
    console.log(jsonData);

  } catch (error) {
    console.error(error.message);
  }
}

fetchCustomerData();

 

fetch()와 Response객체

fetch()는 JavaScript에서 가장 자주 쓰이는 네트워크 요청 함수이며, 항상 Promise를 반환합니다.

• ok: HTTP 응답 코드가 200~299라면 true
• status: 응답 상태 코드 (예: 200, 404, 500 등)
• statusText: 상태 코드에 대응하는 메시지 (예: "OK", "NOT FOUND")
• headers: 응답 헤더 정보
• body: 응답 본문. .json()으로 추출 가능