소개

자바스크립트는 단일 스레드 프로그래밍 언어입니다. 즉, 한 번에 하나의 작업만 실행할 수 있습니다. 데이터 가져오기 또는 타이머 설정과 같은 비동기 작업의 경우 이는 까다로워지며, 이로 인해 실행 흐름이 차단되고 앱 속도가 느려질 수 있습니다.

스레드를 정지하지 않고 이러한 비동기 작업을 처리하기 위해 비동기 프로그래밍을 단순화하는 강력한 도구인 Promise를 사용합니다. Promises를 사용하면 장기 실행 작업을 더 효과적으로 관리하고, 더 깔끔하고 읽기 쉬운 코드를 작성하고, 무서운 "콜백 지옥을 피할 수 있습니다."

이 글에서는 프라미스가 무엇인지, 어떻게 작동하는지, 비동기 프로그래밍을 어떻게 단순화하는지 알아보고자 합니다.

약속이란 무엇입니까?

레스토랑에서 식사를 주문한다고 상상해 보세요. 주문을 하고 나면 음식이 준비될 때까지 주방에서 기다리지 않아도 됩니다. 대신 주방에서 식사를 준비하는 동안 대화를 나누거나 분위기를 즐기세요. 레스토랑에서는 음식이 준비되면 음식을 제공하겠다고 약속합니다. 결국 두 가지 중 하나가 발생하기 때문에 이 약속을 신뢰할 수 있습니다. 식사가 도착하거나(이행) 주방에서 주문을 완료할 수 없다고 알려줄 것입니다(거부됨) ).

자바스크립트에서 프라미스는 비슷한 방식으로 작동합니다. 서버에서 데이터를 가져오는 것과 같이 시간이 걸리는 작업을 JavaScript에 요청하면 Promise가 반환됩니다. 이 약속은 즉시 결과를 제공하지 않습니다. 대신에 "작업이 완료되면 다시 연락드리겠습니다."라는 메시지가 표시됩니다. 해당 시간 동안 나머지 코드는 계속 실행됩니다. 작업이 완료되면 Promise는 다음 중 하나입니다.

• 완료(작업이 성공함) 또는
• 거부됨(작업 실패) 그에 따라 결과를 처리할 수 있습니다.

JavaScript에서 약속이 작동하는 방식

A Promise는 현재, 미래에 사용할 수 있거나 전혀 사용할 수 없는 값을 나타냅니다. 세 가지 상태가 있습니다:

• 보류: 작업이 아직 진행 중이며 최종 결과(성취 또는 거부)가 아직 결정되지 않았습니다.
• 완료: 작업이 성공적으로 완료되었으며 결과를 확인할 수 있습니다.
• 거부됨: 작업이 실패했으며 오류를 처리할 수 있습니다

1. 약속 만들기

Promise를 생성하려면 두 개의 매개변수(Resolve 및 Reject)가 있는 함수(실행자로 알려짐)를 사용하는 Promise 생성자를 사용합니다. 해결 함수는 Promise가 이행될 때 호출되고, 거부 함수는 거부될 때 호출됩니다.

const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});

2. 약속 해결 및 거부

Promise가 생성되면 해결 또는 거부를 호출하여 결과를 결정할 수 있습니다.

• 해결(값): 비동기 작업이 성공적으로 완료되면 이 함수를 호출합니다. Promise가 이행되기를 기다리는 핸들러에 값을 전달합니다.
• Reject(error): 작업이 실패하면 이 함수를 호출합니다. Promise가 거부되기를 기다리는 핸들러에 오류 메시지를 전달합니다.

3. 약속의 소비

Promise를 생성한 후 다음 단계는 이를 사용하는 것입니다. JavaScript는 Promises의 결과를 처리하기 위한 여러 메서드(.then(), .catch() 및 .finally())를 제공합니다. 이러한 각 방법은 특정 목적을 제공하며 비동기 작업의 결과를 효과적으로 관리할 수 있게 해줍니다.

• .then()로 해결된 약속 처리: .then() 메서드는 Promise가 이행될 때 어떤 일이 발생해야 하는지 지정하는 데 사용됩니다. 해결된 값에 대한 콜백과 거부 처리를 위한 콜백이라는 두 가지 선택적 인수가 필요합니다.

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
};

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  });

• .catch()로 거부 처리: .catch() 메서드는 Promise 실행 중에 발생하는 오류를 처리하도록 특별히 설계되었습니다. 이렇게 하면 거절을 처리하는 깔끔한 방법이 됩니다.

const fetchWithError = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Error fetching data."); // Simulating an error
    }, 1000);
  });
};

fetchWithError()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error); // Logs: Error fetching data.
  });

• .finally()를 사용한 최종 또는 정리 작업: .finally() 메서드를 사용하면 이행 여부에 관계없이 Promise가 완료된 후 코드를 실행할 수 있습니다. 이는 성공 및 실패 시나리오 모두에서 실행되어야 하는 정리 작업 또는 작업에 유용합니다.

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  })
  .catch(error => {
    console.error(error); // Handle error
  })
  .finally(() => {
    console.log("Promise has settled."); // Logs after either success or failure
  });

간결하게 말하면:

• then(): 이 메서드를 사용하여 Promise의 해결된 값을 처리합니다.
• catch(): Promise가 거부될 때 오류를 처리하려면 이 메서드를 사용합니다.
• finally(): 이 메서드는 결과에 관계없이 Promise가 확정된 후 코드를 실행하여 정리 또는 최종 작업을 허용합니다.

4. 약속 연쇄

Promise의 가장 강력한 기능 중 하나는 서로 연결되어 여러 비동기 작업을 순차적으로 수행할 수 있다는 것입니다. 이는 각 작업이 실행되기 전에 이전 작업이 완료될 때까지 기다리는 것을 의미하며, 이는 작업이 서로 의존하는 경우 특히 유용합니다.

다음 예를 살펴보겠습니다.

const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ userId: 1, username: "JohnDoe" });
    }, 1000);
  });
};

const fetchPosts = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["Post 1", "Post 2", "Post 3"]); // Simulated posts
    }, 1000);
  });
};

// Chaining Promises
fetchUserData()
  .then(user => {
    console.log("User fetched:", user);
    return fetchPosts(user.userId); // Pass userId to the next promise
  })
  .then(posts => {
    console.log("Posts fetched:", posts);
  })
  .catch(error => {
    console.error("Error:", error);
  });

이 예에서 fetchUserData 함수는 사용자 정보로 확인되는 Promise를 반환합니다. 그런 다음 해결된 값은 fetchPosts 함수로 전달되어 또 다른 Promise를 반환합니다. 이러한 약속 중 하나라도 거부되면 최종 .catch() 메서드에서 오류가 포착되어 체인 전체에서 효과적인 오류 처리가 가능해집니다.

결론

결론적으로 약속은 현대 JavaScript의 중요한 부분으로, 개발자가 보다 구조화되고 효율적인 방식으로 비동기 작업을 처리할 수 있도록 해줍니다. 약속을 사용하면 다음을 수행할 수 있습니다.

• 비동기 작업 관리를 단순화하고 콜백 지옥을 피하세요.
• 여러 비동기 작업을 연결하여 명확한 실행 흐름을 유지합니다.
• 통합된 접근 방식으로 오류를 효과적으로 처리합니다.

자신의 프로젝트에서 Promise를 구현하면 코드 가독성이 향상될 뿐만 아니라 애플리케이션의 응답성을 유지하여 전반적인 사용자 경험도 향상된다는 사실을 알게 될 것입니다. JavaScript의 기본 개념을 살펴보는 이번 여정이 개발자에게 귀중한 통찰력을 제공했기를 바랍니다. 즐거운 코딩하세요!