자바스크립트에서 비동기 작업은 프로미스( Promise)를 사용하여 처리할 수 있습니다. 프로미스는 비동기 작업의 완료 또는 실패 결과를 나타내는 객체입니다. 프로미스 기반 비동기 함수를 사용하면 비동기 작업을 보다 효율적이고 간편하게 처리할 수 있습니다.

프로미스란?

프로미스는 자바스크립트에서 비동기 작업의 결과를 나타내는 객체입니다. 프로미스는 세 가지 상태를 가질 수 있습니다:

• 대기 (pending): 비동기 작업이 아직 완료되지 않은 상태입니다.
• 이행 (fulfilled): 비동기 작업이 성공적으로 완료된 상태입니다.
• 거부 (rejected): 비동기 작업이 실패한 상태입니다.

프로미스는 주로 new Promise() 생성자 함수를 사용하여 생성합니다. 생성자 함수에는 콜백 함수를 인자로 전달합니다. 이 콜백 함수에는 프로미스의 이행과 거부를 처리하는 로직을 작성합니다.

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 성공적으로 작업을 완료했다면 resolve() 호출
  // 작업이 실패했다면 reject() 호출
});

프로미스 기반 비동기 함수 만들기

프로미스 기반 비동기 함수를 만들기 위해서는, 비동기 작업을 수행하는 함수 안에서 프로미스를 반환해야 합니다. 이후에는 .then() 메소드를 사용하여 성공적으로 작업이 완료되었을 경우의 로직을 작성하고, .catch() 메소드를 사용하여 작업이 실패했을 경우의 로직을 작성할 수 있습니다.

다음은 프로미스 기반 비동기 함수를 예시로 보여줍니다:

function fetchData() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    // 성공적으로 작업을 완료했을 경우 resolve() 호출
    // 작업이 실패했을 경우 reject() 호출
  });
}

fetchData()
  .then((data) => {
    // 작업이 성공적으로 완료되었을 때의 로직
  })
  .catch((error) => {
    // 작업이 실패했을 때의 로직
  });

프로미스를 반환하는 함수는 다른 비동기 작업을 순차적으로 실행할 수 있는 기능을 제공합니다. .then() 메소드를 여러 개 연속해서 사용하여 연속적인 비동기 작업 흐름을 작성할 수 있습니다.

fetchData()
  .then((data) => {
    // 첫 번째 비동기 작업
    return processData(data);
  })
  .then((processedData) => {
    // 두 번째 비동기 작업
    return displayData(processedData);
  })
  .catch((error) => {
    // 작업이 실패했을 때의 로직
  });

위의 예시에서는 fetchData() 함수의 결과인 프로미스가 첫 번째 .then() 메소드의 인자로 전달됩니다. 이후 processData() 함수의 결과인 프로미스가 두 번째 .then() 메소드의 인자로 전달되며, 이어서 displayData() 함수가 실행됩니다.

요약

프로미스 기반 비동기 함수를 사용하여 자바스크립트에서 비동기 작업을 처리할 수 있습니다. 프로미스는 비동기 작업의 결과를 나타내는 객체로, 성공적으로 작업이 완료되면 이행 상태(fulfilled)가 되고, 실패하면 거부 상태(rejected)가 됩니다. 프로미스를 반환하는 함수는 .then() 메소드를 사용하여 연속적인 비동기 작업을 처리할 수 있습니다.