[JavaScript] async / await 와 promise란??

async / await 와 promise란??

자바스크립트는 대표적인 싱글 스레드 언어입니다. 그래서 비동기 프로그래밍이 굉장히 중요합니다!

이러한 비동기 프로그래밍을 사용하게 되면 더 나은 성능과 사용자 경험을 제공할 수 있습니다.

※ 비동기 프로그래밍 : 특정 작업이 완료될 때까지 코드 실행을 멈추지 않고, 다른 작업을 동시에 수행할 수 있는 방식을 의미

 

자바스크립트에서 비동기 프로그래밍을 구현하는 대표적인 방법으로 콜백(callback), 프로미스(promise), 비동기 함수(async/await)가 있습니다. 

이전 포스팅에 콜백에 대한 설명이 있으므로 짧게 설명하자면 이렇습니다.

 

 

콜백은 함수의 인자로 다른 함수를 전달하여, 작업이 완료될 때 해당 함수를 호출하는 방식입니다.

예를 들어, setTimeout 함수를 사용하여 일정 시간이 지난 후에 함수를 호출할 수 있습니다. 

더 자세한 내용이 궁금하다면 아래의 링크를 눌러주세요!

https://puenti.tistory.com/71

 

프로미스는 비동기 작업이 완료될 때 결과값을 반환하는 객체입니다.

프로미스는 비동기 작업을 수행하는 함수에서 반환되며, 이후에 .then() 메서드를 사용하여 작업이 완료될 때 실행할 함수를 등록할 수 있습니다. 

 

비동기 함수(async/await)는 ES2017에서 도입된 기능으로, async 키워드로 함수를 선언하고, 내부에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있습니다. 이를 통해, 프로미스를 사용하는 것보다 더 간편하고 가독성 좋은 코드를 작성할 수 있습니다.

 

하나씩 알아보도록 하겠습니다.

먼저 promise입니다.

 

promise(프로미스)란?

프로미스(Promise)는 비동기 작업을 다루기 위한 자바스크립트 객체입니다.

프로미스는 비동기 작업의 성공 또는 실패와 같은 결과를 나타내는 객체입니다. 일반적으로 프로미스는 다음과 같은 세 가지 상태를 가집니다.

• 대기(pending): 작업이 완료되지 않은 초기 상태
• 이행(fulfilled): 작업이 성공적으로 완료된 상태
• 거부(rejected): 작업이 실패한 상태

프로미스 객체를 생성할 때는 콜백 함수를 인자로 받습니다. 이 콜백 함수는 두 개의 인자를 가지는데, 하나는 이행(resolve)이 되었을 때 실행되는 함수이고, 다른 하나는 거부(reject)되었을 때 실행되는 함수입니다.

프로미스 객체를 사용하는 방법은 다음과 같습니다.

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 작업이 완료되면 resolve 또는 reject를 호출하여 결과 전달
});

myPromise
  .then(result => {
    // 작업이 성공적으로 완료된 경우 실행되는 코드
  })
  .catch(error => {
    // 작업이 실패한 경우 실행되는 코드
  });

위 코드에서 myPromise는 비동기 작업을 수행하는 프로미스 객체입니다. 이 객체를 사용할 때는 then 메서드와 catch 메서드를 사용합니다. then 메서드는 작업이 성공적으로 완료된 경우 실행되는 콜백 함수를 등록합니다. catch 메서드는 작업이 실패한 경우 실행되는 콜백 함수를 등록합니다.

프로미스는 비동기 작업을 다룰 때 유용하게 사용됩니다. 예를 들어, 서버에서 데이터를 가져오는 작업을 비동기적으로 수행하고 결과를 프로미스 객체로 반환하여 클라이언트 측에서 이를 처리할 수 있습니다.

 

async / await란?

async는 함수의 앞에 붙이며 해당 함수가 비동기적으로 실행될 것임을 명시합니다. 이 함수는 반드시 Promise 객체를 반환해야합니다. Promise는 비동기적으로 실행되는 작업이 완료되면 값을 반환하는 객체입니다.

await는 Promise가 처리될 때까지 함수의 실행을 일시 중지합니다. 이는 일반적으로 Promise가 처리되기를 기다린 다음, 결과 값을 반환하고 다음 작업을 계속 진행하게 합니다.

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

이 코드는 fetch() 함수를 사용하여 비동기적으로 데이터를 가져오고, **await**를 사용하여 데이터가 성공적으로 반환될 때까지 기다립니다. 그런 다음 json() 메서드를 사용하여 응답을 JSON 형식으로 파싱하고, 파싱된 데이터를 반환합니다. 이렇게 작성된 코드는 가독성이 높아지며, 콜백함수를 사용하는 경우보다 훨씬 간결하고 유지보수하기 쉬워집니다.

그러나, await는 async 함수 내에서만 사용될 수 있으며, 기본적으로 동기적인 코드에서는 사용할 수 없습니다. 따라서 비동기적인 작업을 처리해야 하는 함수 내에서만 async와 await를 사용할 수 있습니다.