JavaScript #17 (fetch, 비동기 처리)

 

기존 promise 방식

fetch("/api")
  .then(res => res.json())
  .then(data => console.log(data));

 

 

 

 

 

 

resolve: 성공했을 때 호출 / reject: 실패했을 때 호출

let promise = new Promise(function(resolve, reject) {
  if (/* 성공 조건 */) {
    resolve("성공했어요!");  // 성공 시
  } else {
    reject("실패했어요!");   // 실패 시
  }
});

 

실습

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("✅ 데이터 도착");
    }, 2000);
  });
}

fetchData().then((data) => console.log(data));

 

 

※ setTimeout() : 일정 시간이 지나고 함수를 실행시킴

setTimeout(함수, 시간(ms));
// 일정 시간(ms)이 지나고 나서 함수를 실행

 

 

 

 

async / await

 

 

async 함수 : 항상 Promise를 반환

async function greet() {
  return "Hello"; // 자동으로 Promise로 감싸짐
}
greet().then(console.log); // Hello

 

await 함수 : Promise가 해결될 때까지 기다림

- 오직 async 함수 안에서만 사용 가능

async function loadData() {
  const result = await fetchData(); // 기다렸다가 아래 실행
  console.log(result);
}
loadData(); // 2초 후: ✅ 데이터 도착

 

 

 

예제 - 유저 정보 가져오기

// 비동기로 가져오는(get) 함수
function getUser() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: "Alice", age: 25 });		// 성공 시 반환
    }, 1500);			// 지연 시킬 시간
  });
}

// 비동기로 내보내는(post) 함수
async function showUser() {
  console.log("유저 정보 로딩 중...");
  const user = await getUser();
  console.log(`이름: ${user.name}, 나이: ${user.age}`);
}
showUser();

 

 

 

 

 

try/catch 

- 일단 로직을 실행 (try) 해보고, 실패하면 에러 (catch) 반환

async function load() {
    try {			// 일단 시도
        const data = await fetch("http://example.com/data");
        const json = await data.json();
        console.log(json);
    } catch (err) {		// 실패 시 에러 반환
        console.error("데이터 로딩 실패", err);
        // retry 3 times		*재시도 로직 추가 가능
        // return "john";		*기본값 ("john") 반환 설정 가능
    }
}

 

 

 

※ await 병렬 처리 : promise.all([ , ]) 으로 여러 개 처리 가능

const p1 = fetch("http://example.com/data1");
const p2 = fetch("http://example.com/data2");

async function test() {
    const [res1, res2] = await Promise.all([p1, p2]);		 // 동시에 대기
    console.log(res1);
    console.log(res2);
}

test();

 

 

 

실습 - 간단한 비동기 함수 만들기

- delay 기능을 하는 함수를 만들어서, 비동기 함수 안에서 기능을 하도록 넣음

function delay(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

async function helloAfter2s() {
    await delay(2000);
    console.log("2초 후 Hello!");
}

helloAfter2s();

 

 

 

 

 

 

 

 

실습 - 비동기 함수

2초 후 "✅ 데이터 준비 완료"를 출력하는 비동기 함수를 만들어보세요.

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("✅ 데이터 준비 완료");
        }, 2000);
    });
}

async function loadData() {
    const data = await fetchData();
    console.log(data);
}

loadData();

 

 

 

 

 

 

요약

• async/await는 비동기 코드를 동기 코드처럼 깔끔하게 작성할 수 있게 해줍니다.
• Promise.all()은 병렬 처리에 유리 (네트워크 요청 동시에!) 
• try...catch를 함께 사용하면 예외 처리까지 완벽!
• delay(ms)는 커스텀 sleep() 같은 느낌으로, 테스트나 타이머 제어에 유용.