typescript 비동기/동기 처리

근 몇일간 api를 리팩토링 하면서 추가 요청이 있어 동기/비동기 처리를 해주어야 하는 상황이 나오게 되었다.

자바스크립트에서는 블록체인 데이터를 주고 받는 과정에서 많은 시간 고생을 하여 익숙해졌다고 생각했으나, 타입스크립트에서 새로 사용하니 막히는 내용이 많아 정리를 하려고 한다.

 

우선 응답 객체값에 대한 정의가 이루어져야 하는데 이 부분을 빼먹어서 작동이 안되는 경향이 있었다.

 

이부분은 다음과 같이 결과 값을 지정해주는 클래스에 Promise를 명시해주는 것을 빼먹어서 작동이 안되었던 것이였다.

아래와 같이 Promise<응답값 객체>를 해주어야 비동기 처리가 가능해지게 된다.

  makingResponseItemsArr = async (
    transactions,
  ): Promise<RelatedTransactionsItems[]> => {
    const promises = [];
    for (const x of transactions) {
      promises.push(this.relatedTransactionResponse(x));
    }

    const responseItemsArrRaw: RelatedTransactionsItems[] =
      await Promise.all<RelatedTransactionsItems>(promises);

    return responseItemsArrRaw;
  };

비동기 처리에 있어서 2번째 유의사항은 

바로 반복문을 사용하는 과정에서 상황에 따라 다른 반복문을 써야한다는 점이다.

 

아래 블로그에 정리가 잘 되어있는데 

https://crmrelease.tistory.com/99

[이슈] 배열에 대한 비동기 처리 방법

여기에 나온 경우를 외워서 그대로 사용하게 되면 비효율적인 코드가 나올 수도 있다.

 

위의 코드를 예시로 보자면 여기서는 for ,of 구문을 사용하여 안에 있는 명령어의 순서를 지정해주고,

실행은 동기로 하여 빠르게 처리한 후 모든 동기 처리된 실행된 응답값이 모이면 한번에 리턴해주도록 

await Promise.all을 사용하였다.

 

이런식으로하면 일일히 promise를 걸어서 모든 작업을 비동기로 할 때보다 속도가 빨라지게 된다.

이렇게 코드를 짜게 되면, 작업을 동시에 시켜서 모든 작업이 다 완성되는 순간 답을 한번에 보내주어서 순서도 맞춰주면서 작업속도도 빠르게 올려주는 효과를 낼 수 있따.