Promise 사용법 (resolve,reject) &promise.race(),all()

2023. 2. 22. 16:30·Js/Javascript
반응형

Promise 특징

  • Promise는 비동기적인 작업 처리를 위한 도구이다.
  • Promise는 then과 catch로 사용할 수 있다.
  • Promise를 반환하는 함수 자체는 동기적으로 실행되며, Promise를 반환하는 함수일 경우 비동기적으로 처리된다.
  • 비동기적인 작업을 처리할 때, 작업의 성공 유무에 따라 표준화된 방식(then, catch)으로 처리할 수 있게 해주기 때문에 사용한다.
  • 네이스팅 방식과 체이닝 방식이 있으며, 일반적으로 체이닝 방식을 사용한다.

 

Promise 만드는 법

<script>
    function job1() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('resolved ok!');
            }, 1000);
        });
    }
    function job2() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('resolved ok 2!');
            }, 1000);
        });
    }
    
    // 네이스팅 방식
    job1().then((data) => {
        console.log('data', data)
        job2().then((data) => {
            console.log('data', data);
        })
    })
    
    // 프라미스 체이닝 방식
    job1().then((data) => {
        console.log('data', data)
        return job2();
    }).then((data2) => {
        console.log('data', data2)
    })

</script>

 

console 결과

 

 

Promise 실패 했을 때 ( reject )

<script>
    function job1() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('resolved ok 1!');
                reject('job1 failed!');
            }, 2000);
        });
    }
    function job2() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('resolved ok 2!');
            }, 2000);
        });
    }

    job1()
        .then((data) => {
            console.log('data', data)
            return job2();
        })
        .catch((reason) => {
            console.log('reason', reason)
            return Promise.reject(reason);
        })
        .then((data2) => {
            console.log('data', data2)
        })

</script>

console 결과

 

 

Promise all and race

<script>
    function timer(time) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(time);
            }, time);
        });
    }

    Promise.all([timer(1000), timer(2000), timer(3000)]).then(result => { // 배열에 모든 작업의 결과 값을 반환
        console.log(result);
    })

    Promise.race([timer(1000), timer(2000), timer(3000)]).then(result => { // 제일 빨리 끝난 작업의 결과만 반환
        console.log(result);
    })

</script>

반응형

'Js > Javascript' 카테고리의 다른 글

[JS] forEach, map, filter, reduce  (0) 2023.02.22
고급 예외 처리 try, catch finally  (0) 2021.07.27
var, let, const 키워드  (0) 2021.07.25
'Js/Javascript' 카테고리의 다른 글
  • [JS] forEach, map, filter, reduce
  • 고급 예외 처리 try, catch finally
  • var, let, const 키워드
jjikky
jjikky
  • jjikky
    jikky.env
    jjikky
  • 전체
    오늘
    어제
    • 분류 전체보기
      • React
      • Node.js
        • TDD
        • Node.js
        • mern
        • OAuth
        • js_facebook login
      • Coding Test
        • 백준 알고리즘
        • CodeUp
        • 코테 이론
      • Js
        • Javascript
      • study
        • python
        • android
        • Big data analysis
        • Logic Circuit
      • git
      • 개발일지
      • 게임기획
      • Docker
      • IPFS
  • 블로그 메뉴

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

  • 공지사항

  • 인기 글

  • 태그

    빅데이터
    NFT Marketplace
    파이썬 딕셔너리
    ifps 네트워크 지연
    NFT IPFS
    그리디 알고리즘
    git 유용한 명령어
    파이썬 완전탐색
    파이썬
    UI
    nft
    Python
    Ipfs
    파이썬 그리디
    verilog할당문
    범주형 자료
    코딩테스트
    안드로이드
    ipfs add
    verilog
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
jjikky
Promise 사용법 (resolve,reject) &promise.race(),all()
상단으로

티스토리툴바