Fetch API + async/await

Fetch API + async/await를 사용해서 HTTP 요청을 하고 데이터를 화면에 출력하는 예제

1️⃣ HTML 구조

<button id="async-await-btn">1번 게시글 데이터 요청 후 게시글의 내용 화면에 출력</button>
<div>1번 게시글 내용: <span id="post-content"></span></div>

• 버튼 클릭 시 1번 게시글 내용을 가져와서 <span> 안에 출력

---

2️⃣ 버튼 클릭 이벤트 등록

document.querySelector('#async-await-btn').addEventListener('click', () => {
  fetchDataByAsyncAwait();  
});

• 버튼 클릭 시 fetchDataByAsyncAwait() 함수를 호출

---

3️⃣ 비동기 함수 정의

async function fetchDataByAsyncAwait() { ... }

• async 붙이면 함수가 항상 Promise를 반환
• 내부에서 await를 사용해 비동기 처리를 동기 코드처럼 작성 가능

---

4️⃣ fetch + await

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

• fetch 함수 호출 → Promise 반환
• await를 붙이면 Promise가 이행(resolve)될 때까지 기다림
• 완료되면 Response 객체가 response 변수에 들어감

const jsonData = await response.json();

• response.json()도 Promise 반환
• await → JSON 문자열을 JS 객체로 변환 후 jsonData에 저장

---

5️⃣ 화면 출력

document.getElementById('post-content').innerText = jsonData.body;

• JSON 객체에서 body 속성을 가져와 화면에 출력

---

📝 코드 작성 순서

1. HTML 요소 만들기 (버튼 + 출력 영역)

2. 비동기 함수 정의 (async function fetchDataByAsyncAwait() {...})

3. 버튼 이벤트 등록 → 클릭 시 비동기 함수 호출

4. 비동기 함수 내부:

   • await fetch() → Response 객체
   • await response.json() → JS 객체
   • 화면에 데이터 출력

---

🔹 출력 순서 (콘솔/화면 기준)

1. 버튼 클릭 → 이벤트 발생
2. fetch() 호출 → 서버 요청 시작
3. 서버 응답 대기 (await)
4. Response → JSON 객체 변환 (await response.json())
5. 화면에 jsonData.body 출력

⚡ 특징: async/await 덕분에 코드가 순차적으로 위 → 아래 읽히므로
“마치 동기 코드처럼” 자연스러운 순서로 실행됨