[Typescript] Promise 와 Async/Await

Promise

Promise는 대기/완료/거부 상태를 가진다. 그러므로 생성되었을 때는 완료 후에 어떤 값을 가지게 될지 알 수 없다. 그러므로 제너릭을 통해 어떤 형태의 반환값을 가질지 미리 명시해줘야 한다.

// Promise<T>
 
function fetchItems(): Promise<string[]> {
  let items: string[] = ['a', 'b', 'c'];
  return new Promise(function (resolve) {
    resolve(items);
  });
}
 
fetchItems().then((value) => console.log(value.length));

위의 fetchItems 는 제너릭을 통해 string[]을 반환할 것이라고 명시해뒀다.

그래서 then을 통해 반환값의 value.length를 사용할 수 있다.

string[]에 맞는 메소드를 확인할 수 있다.(ctrl + space bar)

 

 

Async/Await

async/await 을 사용하면 Promise를 좀 더 쉬운 형태로 나타낼 수 있다.

javascript와 사용법은 같다. 함수명 앞에 async를 붙인 함수 안에서만 await을 사용할 수 있다.

// 프로미스 함수로 비동기 함수를 생성
// setTimeout으로 난수로 만든 시간을 통해 값을 출력
function testPromise(message: string) {
  let ms: number = Math.floor(Math.random() * 1000) + 1;
  return new Promise((resolve) => {
    setTimeout(resolve, ms, message);
  }).then((v) => {
    console.log(v, ms + 'ms');
  });
}
 
// 비동기 함수의 동기식 처리를 위해 먼저 함수명 앞에 'async'를 표기
// 그 후 순차적으로 값을 받을 함수앞에 'await'를 표기하여 값을 받아온다.
async function asyncAwaitTest() {
  let start = new Date().getTime();
 
  await testPromise('a');
  await testPromise('b');
  await testPromise('c');
  let end = new Date().getTime();
  console.log(`시간 : ${end} - ${start} ms`);
}
 
asyncAwaitTest();

결과

await 을 앞에 붙여준 testPromise들이 순서대로 실행된 것을 알 수 있다.

 

 

참고한 사이트

https://soft91.tistory.com/54?category=840071 

[TypeScript] 비동기 함수의 동기식 처리 Async/Await

 

강의

https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8/dashboard

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의