자바스크립트 비동기 통신 (promise, async, await)

 

첫번째 목표

• 2초 후 원격 API 요청
• 응답 데이터를 받아서 alert 등으로 표시

예제: fetch로 실제 데이터 요청 + setTimeout으로 지연

<script>
  var 프로미스 = new Promise(function (성공, 실패) {
    setTimeout(async () => {
      try {
        const 응답 = await fetch("https://jsonplaceholder.typicode.com/posts/1"); // 예시 API
        const 데이터 = await 응답.json();
        성공(데이터); // 성공 시 데이터 전달
      } catch (오류) {
        실패(오류); // 실패 시 오류 전달
      }
    }, 2000);
  });

  async function 버튼누르기() {
    try {
      var 결과 = await 프로미스;
      alert("2초 후 데이터 도착:\n" + JSON.stringify(결과, null, 2));
    } catch (e) {
      alert("에러 발생: " + e);
    }
  }

  버튼누르기(); // 자동 실행
</script>

 

 

✅ 실행 흐름:

1. 버튼누르기()가 실행되면 await 프로미스로 2초 대기
2. 2초 후 fetch로 원격 데이터 요청
3. 응답을 받아 alert으로 결과 출력

📌 결과 예시 (2초 후 alert):

2초 후 데이터 도착:
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere...",
  "body": "quia et suscipit..."
}

 

🔧 추가 팁

• 실제 프로젝트에서는 fetch 요청 전에도 로딩중... UI 표시를 넣는 게 UX에 좋아요.
• setTimeout 없이도 원격 요청 자체가 느리기 때문에 await fetch(...)만 써도 충분한 경우가 많습니다.

 

두번째 목표

✅ setTimeout 없이 원격 데이터 가져오기 (더 간결한 버전)

<script>
  var 프로미스 = new Promise(async function (성공, 실패) {
    try {
      const 응답 = await fetch("https://jsonplaceholder.typicode.com/posts/1"); // 예시 API
      const 데이터 = await 응답.json();
      성공(데이터);
    } catch (오류) {
      실패(오류);
    }
  });

  async function 버튼누르기() {
    try {
      var 결과 = await 프로미스;
      alert("데이터 도착:\n" + JSON.stringify(결과, null, 2));
    } catch (e) {
      alert("에러 발생: " + e);
    }
  }

  버튼누르기(); // 자동 실행
</script>

✅ 실행 흐름:

1. fetch 요청 → 비동기적으로 데이터 요청
2. await가 자동으로 기다림
3. 응답 데이터를 받아서 alert으로 표시

---

💡 추가로 참고할 점

• await는 async 함수 안에서만 쓸 수 있습니다.
• 위 코드는 Promise 내부에서 async 함수를 직접 사용하고 있지만, 원한다면 아예 fetch를 버튼누르기() 안에서 호출해도 됩니다.

✅ 더 간단한 구조로 다시 쓰자면:

<script>
  async function 버튼누르기() {
    try {
      const 응답 = await fetch("https://jsonplaceholder.typicode.com/posts/1");
      const 결과 = await 응답.json();
      alert("데이터 도착:\n" + JSON.stringify(결과, null, 2));
    } catch (e) {
      alert("에러 발생: " + e);
    }
  }

  버튼누르기();
</script>

🔥 이게 가장 간단하고 모던한 방식입니다. Promise를 직접 만들 필요 없이 await로 처리하면 깔끔하게 끝납니다.

 

 

출처: Chatgpt, 코딩애플