[JS] 프로미스(Promise)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Promise 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  const success = true;

  if (success) {
    resolve("성공!"); // 성공 시
  } else {
    reject("실패!"); // 실패 시
  }
});

// Promise 사용
promise
  .then((result) => {
    console.log(result); // "성공!"
  })
  .catch((error) => {
    console.log(error); // "실패!"
  })
  .finally(() => {
    console.log("완료!"); // 성공/실패 상관없이 실행
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// API 호출 함수
function fetchUser(id) {
  return new Promise((resolve, reject) => {
    // API 호출 시뮬레이션
    setTimeout(() => {
      const user = {
        id: id,
        name: "김코딩",
        email: "kim@coding.com",
      };

      if (id <= 0) {
        reject(new Error("잘못된 ID"));
        return;
      }

      resolve(user);
    }, 1000);
  });
}

// 사용
fetchUser(1)
  .then((user) => {
    console.log("사용자:", user);
    return fetchUser(2); // 체이닝
  })
  .then((user2) => {
    console.log("사용자2:", user2);
  })
  .catch((error) => {
    console.error("에러:", error);
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 여러 Promise 동시 처리
const promise1 = fetchUser(1);
const promise2 = fetchUser(2);
const promise3 = fetchUser(3);

// 모든 Promise가 완료될 때까지 기다림
Promise.all([promise1, promise2, promise3])
  .then((users) => {
    console.log("모든 사용자:", users);
  })
  .catch((error) => {
    console.error("하나라도 실패:", error);
  });

// 가장 먼저 완료되는 Promise 결과 반환
Promise.race([promise1, promise2, promise3]).then((firstUser) => {
  console.log("첫번째 완료:", firstUser);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// async/await로 더 깔끔하게 처리
async function getUsers() {
  try {
    const user1 = await fetchUser(1);
    console.log("사용자1:", user1);

    const user2 = await fetchUser(2);
    console.log("사용자2:", user2);

    return [user1, user2];
  } catch (error) {
    console.error("에러 발생:", error);
    throw error;
  }
}

// 병렬 처리
async function getUsersParallel() {
  try {
    const users = await Promise.all([fetchUser(1), fetchUser(2), fetchUser(3)]);

    console.log("모든 사용자:", users);
    return users;
  } catch (error) {
    console.error("에러 발생:", error);
    throw error;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
class API {
  constructor(baseURL) {
    this.baseURL = baseURL;
  }

  async get(endpoint) {
    try {
      const response = await fetch(this.baseURL + endpoint);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      return await response.json();
    } catch (error) {
      console.error("API 호출 실패:", error);
      throw error;
    }
  }

  async post(endpoint, data) {
    try {
      const response = await fetch(this.baseURL + endpoint, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      return await response.json();
    } catch (error) {
      console.error("API 호출 실패:", error);
      throw error;
    }
  }
}

// 사용 예시
const api = new API("https://api.example.com");

async function getUserData() {
  try {
    const user = await api.get("/users/1");
    const posts = await api.get(`/users/${user.id}/posts`);

    return { user, posts };
  } catch (error) {
    console.error("데이터 로딩 실패:", error);
    throw error;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const checkPromiseState = (promise) => {
  let state = "pending";

  promise
    .then(() => {
      state = "fulfilled";
      console.log("상태:", state);
    })
    .catch(() => {
      state = "rejected";
      console.log("상태:", state);
    });

  console.log("초기 상태:", state);
  return state;
};

// Promise 상태 확인
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("완료!");
  }, 2000);
});

checkPromiseState(promise); // "pending" -> "fulfilled"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 모든 Promise의 결과를 받음 (성공/실패 모두)
Promise.allSettled([
  Promise.resolve(1),
  Promise.reject("에러"),
  Promise.resolve(3),
]).then((results) => {
  results.forEach((result) => {
    if (result.status === "fulfilled") {
      console.log("성공:", result.value);
    } else {
      console.log("실패:", result.reason);
    }
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function withTimeout(promise, timeout) {
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error("시간 초과!"));
    }, timeout);
  });

  return Promise.race([promise, timeoutPromise]);
}

// 사용 예시
withTimeout(fetchUser(1), 5000)
  .then((user) => console.log(user))
  .catch((error) => console.error(error));