비동기는 async 사용

비동기와 async

과거에는 비동기를 하기 위해 콜백 지옥을 겪었다. 이후에 "Promise"와 "async와 await"이 등장해 콜백 지옥을 해결했다. await는 각 Promise가 처리(resolve)될 때까지 기다려준다. try/catch를 이용해 예외 처리도 가능하다.

타입스크립트 컴파일러는 async와 await이 동작하도록 정교한 변환을 수행한다. 즉, TS는 런타임에 상관없이 async/await을 사용할 수 있다.

콜백보다 프로미스를 사용해야 하는 이유

1. 콜백보다 프로미스가 코드를 작성하기 쉽다.

2. 프로미스가 타입 추론에 유리하다.

 

-Promise 예시

async function fetchPages() {
  const [response1, response2, response3] = await Promise.all([
    fetch(url1),
    fetch(url2),
    fetch(url3),
  ]);
}

Promise.all을 이용하면 병렬로 페이지를 로드할 수 있다. 타입스크립트는 세 가지 response 변수 타입을 Response로 추론해 준다.

function timeout(mills:number): Promise<never> {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>reject("timeout"),mills)
  })
}

async function fetchWithTimeout(url: string, ,ms:number){
  return Promise.race([fetch(url),timeout(ms)])
}

이 코드는 Promise.race를 사용하여 프로미스에 타임아웃을 추가하는 방법이며 일반적으로 사용되는 패턴이다. 특별한 타입 구문이 없어도 fetchWithTimeout의 반환 타입은 Promise<Response>로 추론된다. 이 경우는 Promise<Response | never>가 되는데 never와 유니온은 효과가 없어서 Promise<Response>로 된다. 프로미스를 사용하면 모든 타입 추론이 제대로 동작한다.

Promise.race와 Promise.all의 차이점은 Promise.all은 대기 중인 모든 결과가 끝나고 값을 반환해 주는데, Promise.race는 가장 먼저 처리된 결과만 반환한다.(에러가 나도 가장 먼저 에러 발생한 거만 처리)

프로미스보다 async/await을 사용해야 하는 이유

1. 보통 더 간결하고 직관적인 코드가 된다.

2. async 함수는 항상 프로미스를 반환하도록 강제한다.

 

-async/await 예시

const getNumber = async () => 42; //Promise<number>
const getNumber2 = () => Promise.resolve(42); //Promise<number>

두 변수의 리턴값이 모두 Promise<number> 타입으로 추론된다.

모든 함수는 동기 또는 비동기로만 실행이 되어야 된다. 한 함수 안에 동기 함수와 비동기 함수가 모두 사용되면 그 함수는 사용하기 매우 까다롭다.