promise

function delay(sec, callback) {
    setTimeout(() => {
            callback(new Date().toISOString());
        }, sec * 1000);
}

        
console.log('start', new Date().toISOString());
    
delay(1, (result) => {
        console.log(1, result);
});

console.log('hello');

 

function delay(sec, callback)

delay라는 함수에 sec, callback 이라는 파라미터를 넣어줌.

그 안에 callback과 sec이 써여진 것을 볼 수 있다.

(이는 정해진 메소드가 아니라 우리가 정한 것. 꼭 delay나 sec, callback이 아니어도 작동한다.)

 

콘솔의 'start', new Date().toISOString() 이후에 

 

delay에 파라미터 값을 넣어준다.

delay(1, (result) => {
        console.log(1, result);
});

1초 뒤에 출력하기 위하여,

파라미터에 1과 그 결과인 result를 넣어준 것이다.

 

이후 hello가 찍힌다.

 

//

 

start 2021-04-27T01:35:37.287Z

hello

1 "2021-04-27T01:35:38.288Z"

 

//

 

1초씩 new Date를 찍고 싶으면 어떻게 해야 할까?

 

...

delay(1, (result) => {
        console.log(1, result);
});

delay(1, (result) => {
    console.log(2, result);
});

delay(1, (result) => {
    console.log(3, result);
});

 

이렇게 하면 될 것 같지만 비동기이므로 의도와는 다르게 동시다발적으로 찍히게 된다.

 

그렇다면 어떻게 해야 할까?

 

가장 손쉬운 방법은 콜백 안에 넣는 방법이 있다.

 

delay(1, (result) => {
    console.log(1, result);
    
    delay(1, (result) => {
        console.log(2, result);

        delay(1, (result) => {
            console.log(3, result);
        });
    });
});

 

첫 번째 delay가 실행되고 첫 번째 delay 안에 있는 console.log(1, result)를 실행하고 나면, 그 다음 두 번째 delay가 실행되어 다시 1초를 부르게 되는 로직.

 

이것은 콜백지옥을 야기할 뿐더러 가독성도 좋지 않다.

 

이때 promise를 이용해본다.

 

---

 

delayP(1).then((result) => {
    console.log(1, result);
})

실행에 필요한 옵션을 파라미터로 넘기고, .then으로 결과를 받을 콜백을 넘기는 코드

위 코드와 비슷해보이지만 뭔가 다르다.

 

then 이라는 메소드가 보이는데, then 메소드는 promise의 인스턴스다.

 

이제 delayP()를 만들어보자

 

function delayP(sec) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(new Date().toISOString());
        }, sec * 1000);
    });
    // resolve 할일을 다했을 때 호출
    // reject 할일을 하다가 에러, 예외가 일어났을 때 호출
}

 

delayP가 실행될 때, resolve가 매개변수로 들어가면 1초 뒤 Date가 찍히는 것이다.

 

그럼, 1초, 2초, 3초를 찍으려면 어떻게 해야 할까?

 

delayP(1).then((result) => {
    console.log(1, result);

    delayP(1).then((result) => {
        console.log(2, result);

        delayP(1).then((result) => {
            console.log(3, result);
        })
    })
    
})

이렇게 코드를 쓰면 처음과 다를 게 없다.

아래와 같이 return을 해준다.

delayP(1).then((result) => {
    console.log(1, result);
    return delayP(1);
}).then((result) => {
    console.log(2, result);
});

return : 첫번째 then에서 return 하는 값이 resolve 즉, 성공적으로 출력을 해야만 그 다음 콜백이 실행되는 것이다.

 

delayP(1).then((result) => {
    console.log(1, result);
    return delayP(1);
}).then((result) => {
    console.log(2, result);
    return delayP(1);
}).then((result) => {
    console.log(3, result);
}).then((result) => {
    console.log(result);
});

3번째 then 아래에 return값이 없다면 undefined가 나온다.

 

delayP(1).then((result) => {
    console.log(1, result);
    return delayP(1);
}).then((result) => {
    console.log(2, result);
    return delayP(1);
}).then((result) => {
    console.log(3, result);
    return '끝'
}).then((result) => {
    console.log(result);
});

//