Promise로 resolve, reject 사용하기

2024. 11. 12. 22:15·웹개발/JavaScript
728x90

JavaScript에서 비동기 작업을 처리할 때 콜백 함수는 유용합니다. 하지만 콜백 함수를 여러번 사용하면 중첩이 발생하여 콜백 지옥에 빠질 수 있습니다.

이때 Promise를 이용하면 코드를 깔끔하게 짤 수 있습니다.


Promise란?

Promise란 비동기 작업을 처리할 때 그 작업이 성공하거나 실패할 것에 대해서 결과를 알려준다고 약속하는 것입니다. Promise를 이용하여 비동기 작업이 성공하면 resolve를, 실패하면 reject로 반환 값을 전달합니다.

const myPromise = new Promise((resolve, reject) => {
    // 비동기 작업을 수행
    let success = true;

    if (success) {
        resolve("작업이 성공적으로 완료되었습니다.");
    } else {
        reject("작업에 실패했습니다.");
    }
});

myPromise에서 new Promise()를 사용하여 새로운 Promise 객체를 생성합니다.

이때 매개변수로는 resolve(성공)와 reject(실패)를 받습니다.

  • resolve: 비동기 작업이 성공적으로 끝났을 때 값이 전달됩니다. 이후 .then()이 사용가능합니다.
  • reject: 비동기 작업 중 오류가 발생했을 때 호출됩니다. 이후 .catch()가 사용가능합니다.

 

Promise 사용예시

const fetchData = () => {
    return new Promise((resolve, reject) => {
        let dataFetched = true;  // 데이터가 잘 받아졌다고 가정
        if (dataFetched) {
            resolve("데이터를 성공적으로 받았습니다.");
        } else {
            reject("데이터를 받는 데 실패했습니다.");
        }
    });
};

fetchData()
    .then((result) => {
        console.log(result);  // 성공적으로 데이터를 받았을 때 실행
    })
    .catch((error) => {
        console.error(error);  // 실패했을 때 실행
    });

new Promise()로 객체를 생성합니다.

그리고 값이 성공일시 .then()이 실행됩니다. 실패일시 .catch()가 실행됩니다.

 

Promise로 비동기 작업을 처리할 때 resolve와 reject를 사용하여 성공시와 실패시의 작업을 처리하고, 이후 .then()과 .catch()를 사용하여 작업을 이어갈 수 있습니다.

728x90

'웹개발 > JavaScript' 카테고리의 다른 글

Axios와 JWT모르면 REST API 이해 못합니다  (0) 2025.03.27
undefined가 나타나는 세 가지 경우  (0) 2024.11.12
콜백(CallBack)함수 이거 보고도 모르면 바보  (0) 2024.11.12
JavaScript 함수의 호이스팅  (0) 2024.11.12
null의 typeof가 object인 이유  (0) 2024.11.12
'웹개발/JavaScript' 카테고리의 다른 글
  • Axios와 JWT모르면 REST API 이해 못합니다
  • undefined가 나타나는 세 가지 경우
  • 콜백(CallBack)함수 이거 보고도 모르면 바보
  • JavaScript 함수의 호이스팅
튼튼발자
튼튼발자
프론트엔드 개발자입니다. 헬스를 가끔해서인지 몸이 튼튼한거 같습니다. 그래서 튼튼한 개발자 => 튼튼발자입니다. 프론트엔드 및 관련 개발 내용 블로그 글로 정리해서 올려둡니다.
    250x250
  • 튼튼발자
    튼튼발자
    튼튼발자
  • 전체
    오늘
    어제
    • 분류 전체보기 (192)
      • 튼튼발자의 끄적끄적 (10)
      • 웹개발 (94)
        • HTML (5)
        • CSS (2)
        • JavaScript (40)
        • TypeScript (5)
        • REACT (22)
        • Next.js (13)
        • GIt (7)
      • 기타 (3)
        • 일상 (3)
      • 프로젝트 (27)
        • Componique: UI 컴포넌트 라이브러리 (18)
        • GitHub Profile Viewer (8)
        • 잇핏 (1)
      • 프론트엔드 개발자로 취업준비 (1)
        • 기술 면접 (7)
        • 코딩 테스트 준비하기 (0)
        • 자기소개서&지원서&이력서 (0)
      • 컴퓨터과학 (12)
        • 운영체제 (6)
        • 알고리즘 (6)
      • 전공 공부 (37)
        • AI(인공지능) (2)
        • 컴퓨터네트워크 (19)
        • 네트워크프로그래밍 (3)
        • SW소프트웨어응용설계 (7)
        • 클라우드컴퓨팅 (3)
        • 웹서비스프로그래밍 (3)
      • PT (0)
      • 취준일기 (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    tailwind
    리액트
    react
    코딩
    JS
    TCP
    데이터전송
    ui컴포넌트
    상태관리
    트랜스포트계층
    NextJs
    자바스크립트
    프론트엔드개발
    componique
    github
    JavaScript
    프론트엔드
    프로그래밍
    웹개발
    네트워크
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
튼튼발자
Promise로 resolve, reject 사용하기
상단으로

티스토리툴바