카카오콘
687
2021-07-25 14:39:06
5
148

JS Promise는 비동기통신의 종료 시점을 어떻게 캐치하나요?



Promise는, 언제 완료될지 모를 비동기통신에 대해서 완료시점에 기해 사후 동작을

약속하는 기능으로 알고 있습니다.


즉 Promise 내부에 작성해둔 어떤 코드들의 동작이 끝난 뒤에 그 다음동작을 시킬거다. 라는 약속인거죠.

그런데 궁금증이 하나 생겼습니다.


어떤 예제를 하루종일 찾아봐도, 예제는 전부 setTiemout을 사용하고 있습니다.

이들은 모두 시간이 지난뒤 resolve를 호출하는, 즉 말만 비동기지 사실상 resolve 호출 시점이

이미 정해져 있다고 생각합니다.


그러나 실제 비동기는 언제 끝날지 모릅니다. 

즉 resolve가 어느 자리에 있어야 하는지 모르겠습니다.


function method1() {
    return new Promise(function(resolve) {
        let val = 0;
        setTimeout(function() {
             val = 100;
             console.log("2초가 지났습니다");
        },2000); 
        resolve(val);

    });
}

method1().then(console.log);


예시로 작성한 코드입니다.

모든 예제에서는 setTimeout "안에" resolve가 적혀있습니다. 그래야 2초뒤에 실행되니까요.

하지만 그건 비동기 통신에 완료 시점을 이미 정해둔것이라 생각되어 말이 안된다고 생각합니다.


그래서 setTimeout 부분을 일종의 오래걸리는 비동기통신 코드라고 한다면

저부분이 let tesJSON= "http:// ... /API" 등의 어떤 값을 받아오는 부분이 되겠습니다만

실제로 받아오기 전에 다음줄이 실행되어버릴것이라 예상하고 있고

위의 코드 역시 내부 코드는 비동기로 넘어가 대기중인 상황에 resolve()가 호출되었습니다.


(즉 내가 원하는 비동기통신을 통한 데이터는 아직 오지 않았는데, 실행되었으니까 완료로 간주하고

resolve(); 가 실행되어버린다. 라고 이해중입니다.)


만약 내부에 Ajax같은 코드를 쓴다면 자체적으로 끝난다는 시점을 캐치할 success 등이 있어

그 자리에 resolve()를 넣어 실행하겠지만


그게 없다면 그 시점을 어떻게 캐치시켜 resolve()를 실행시킬 수 있는건가요?

0
  • 답변 5

  • 원숭이부대
    1k
    2021-07-25 14:49:50

    제가 잘 이해를 한건지 모르겠는데, resolve()를 setTimeout의 마지막에 넣으면 되지 않나요??


  • 카카오콘
    687
    2021-07-25 15:02:17 작성 2021-07-25 15:05:37 수정됨

    원숭이부대님// 그 부분은 일부러 밖으로 빼둔것입니다.


    setTiemout 내부에 넣는다는건, 이 시간이 끝난 다음에 resolve가 실행된다고 이미 정해져버리는것입니다.

    즉 "종료 시점"을 캐치할 수 있는 상태인거지요.


    다만 제가 궁금한건, "종료 시점"을 알 수 없는 상태에서는 어떻게 그 시점을 캐치하여 resolve를 실행시킬 수 있는가? 입니다.


    올린 뒤 다시 생각해봤을땐, 모든 비동기 통신에 대해서는 반드시 종료시점을 캐치하는 함수가 같이 존재하던가..? 입니다만

    그러면 promise를 쓰는 이유가.. 뭐지? 로 질문이 이어집니다.


    method에 그냥 비동기 통신 코드를 넣고 종료시점 캐치 부분에 사후 동작들을 넣으면 되는게 아닌가..


    그래서 점점 복잡해집니다. 누군가 정리해주신 답변이 필요합니다..

  • fx
    1k
    2021-07-25 16:26:37

    ajax의 기반이 되는 XMLHTTPRequest 객체나 ActiveXObject 객체는 응답 상태 변경될 때 이벤트를 발생시킵니다. 

    이벤트 핸들러를 등록하여, 완료 처리를 할 수 있습니다.

    promise를 이용하지 않고도 ajax를 이용한 비동기 처리가 가능했으며, promise가 등장하기 전에도 ajax를 이용한 비동기 처리를 했습니다.

    promise는 비동기 처리 방식을 이벤트 핸들러나 콜백으로 처리하던 문제점을 개선한 것으로,

    resolve를 비동기로 실행하는 것은 Promise 가 아닌 다른 메카니즘으로 처리되어야 합니다.


    예제에서 setTimeout를 사용하는 것은 단순하게 비동기를 예뮬레이션 하는 방법이기 때문입니다.


  • Dierslair
    5k
    2021-07-25 16:31:30
    순서가 잘못되었습니다. Promise가 비동기 통신의 종료 시점을 아는 게 아니라 비동기 통신의 종료 시점을 알기 위해서 Promise를 사용하는 것입니다.
  • 카카오콘
    687
    2021-07-25 16:52:51

    fx님, Dierslair님 // 답변 감사드립니다.


    역시 뭔가 잘못 생각하고 있었나봅니다.  감사합니다!


  • 로그인을 하시면 답변을 등록할 수 있습니다.