MapleStory Finger Point
본문 바로가기
Front-end/WEB (HTML CSS JS)

[JavaScript] Promise (Custom적인 접근)

by 디팔⸜( ◜࿁◝ )⸝︎︎ 2022. 10. 14.
    function job1(){
        return new Promise(function(resolve, reject){
            setTimeout(function(){
                reject('job1 failed!');
            }, 2000);
        });
    }
    function job2() {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    resolve('job2 resolved!');
                }, 2000);
            });
        }

 

  • job1 함수는 new Promise 함수의 결과를 return한다.
    • 새로운 Promise를 선언할 때, 성공했을 때의 결과와 실패했을 때의 함수가 가져올
      매개변수가 필요하므로 선언해준다.(resolve, reject)
    • 비동기를 적절하게 설명하기 위해 setTimeout함수를 사용하였다(불러올 함수, 시간 설정)
    • 위 코드에서는 reject될 경우의 상황을 서술하고 있다.
  • job2 함수는 동일하다.

   job1().then(function(data){
        console.log('data', data);
        job2().then(function(data){ 
            console.log('data2', data);
        })
    })

 

  • 위에서 선언한 Promise들을 실행하는 코드이다.
  • 이는 nested Promise 형태로 job1()에서 도출된 값을 data서 받아 표현한다.
  • job2()는 job1()이 진행함에 따라 then 후에 실행된다.

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

 

  • 이는 chaining Promise 형태이다. 각 형태는 장.단점이 있다고 한다.
  • 맨 위에 서술한 코드에 의해, 결과는 .catch()가 실행되는데,
    return Promise.reject(); 함수에 의해 다음 코드가 실행되지 않는다.

영상에 달려있던 댓글인데 도움이 될 것 같아 긁어왔다.

 

댓글