[TypeScript] async, await, promise 비동기 처리

async, await, promise

- 비동기 처리를 위해 사용되는 기술

- Promise는 비동기 작업을 수행하는 함수를 호출하면 해당 작업이 완료되면 결과를 반환하는 객체를 반환

 

아래 코드를 보자.

fetch 함수는 Promise를 반환한다. fetch 함수는 지정된 URL에서 리소스를 가져와 응답(Response) 객체를 반환한다. 응답 객체는 Promise를 반환하여 비동기적으로 응답 결과를 처리할 수 있도록 한다.

async function getData() {
  const response = await fetch('<https://example.com/data>');
  const data = await response.json();
  return data;
}

위 예제에서 async/await를 사용하여 fetch 함수의 비동기적인 호출 및 처리를 수행한다. await 키워드는 Promise가 처리될 때까지 대기하다가 처리 결과를 반환한다. 이렇게 async/await를 사용하면 콜백 패턴(callback pattern)을 사용하지 않아도 비동기 작업을 처리할 수 있다.

Promise는 then과 catch 메소드를 사용하여 비동기 작업의 성공과 실패를 처리한다. then 메소드는 Promise가 처리되었을 때 호출되며, catch 메소드는 Promise가 처리되지 못했을 때 호출된다.

function getData() {
  return fetch('<https://example.com/data>')
    .then(response => response.json())
    .then(data => {
      // 데이터 처리
    })
    .catch(error => {
      // 에러 처리
    });
}

위 예제에서 Promise를 사용하여 fetch 함수의 비동기적인 호출 및 처리를 수행한다. then 메소드를 사용하여 처리 결과를 반환하고, catch 메소드를 사용하여 예외 처리를 수행한다.

이렇게 Promise를 사용하는 모든 곳에서 async/await를 사용할 수 있다.

또한 async/await는 콜백 패턴보다 코드 가독성이 높으며, Promise보다 코드가 간결하다는 장점이 있다.