JavaScript Promise 및 작동 방식에 대해 알아야 할 모든 것

최신 웹 개발은 응답성이 뛰어난 대화형 애플리케이션을 구현하기 위해 비동기식 활동에 크게 의존합니다. API에서 데이터를 검색하든, 파일을 읽든, 타이머를 실행하든 이러한 프로세스는 인터페이스를 정지하지 않고 백그라운드에서 실행되어야 합니다. JavaScript는 이러한 작업을 처리하는 안정적인 방법을 제공합니다. 이 기사에서는 오류 없는 비동기 프로그램을 개발하기 위해 기본 아이디어와 고급 기능을 포함하여 Promise에 대해 알아야 할 모든 것을 다룹니다.

이 기사에서 다음 내용에 대해 알아보세요.

• 약속이란 무엇인가요?

• Promise를 사용하는 이유는 무엇인가요?

• Promise는 어떻게 작동하나요?

• 약속 처리

• 약속 연결

• Promise 오류 처리

• 고급 Promise 기능

• Promise가 포함된 JavaScript 실행 흐름(중요)

• Promise Chain을 Async/Await로 변환

• 모범 사례 및 일반적인 실수

약속이란 무엇입니까?

JavaScript에서 약속은 미래에 어떤 일을 하겠다고 '약속'하는 것과 같습니다. 약속을 할 때는 “나중에 결과를 알려드릴 것을 약속드립니다”라고 말하는 것입니다. 그 결과는 성공일 수도 있고 실패일 수도 있습니다.

즉, Promise는 비동기 작업의 궁극적인 성공(또는 실패)과 그 결과 값을 반영하는 객체입니다. 이를 통해 핸들러를 비동기 작업의 성공 또는 실패와 연관시킬 수 있으므로 코드를 더 쉽게 읽고 유지 관리할 수 있습니다.

약속을 사용하는 이유는 무엇입니까?

예를 들어 JavaScript에서는 서버에서 데이터를 검색하는 등 시간이 많이 걸리는 작업이 일반적으로 콜백을 통해 수행되었습니다. 콜백은 작업이 완료된 후 실행하기 위해 다른 함수에 전달되는 함수일 뿐입니다. 예를 들어 서버에서 데이터가 도착할 때 데이터를 처리하기 위해 콜백을 사용할 수 있습니다.

그러나 복잡한 작업이 있는 경우 콜백 사용이 꽤 지저분해집니다. 이러한 혼란은 "콜백 지옥"으로 알려져 있으며, 한 사람이 다른 사람 안에 콜백을 가질 수 있으며 이로 인해 코드를 읽을 수 없고 관리할 수 없게 됩니다.

콜백 지옥 예:

    fetchData((data) => {
      processData(data, (processedData) => {
        saveData(processedData, (result) => {
          console.log(result);
        });
      });
    });

위에서 볼 수 있듯이 이러한 코드는 종종 "콜백 지옥"이라고 불리는 깊게 중첩된 구조로 인해 더 큰 코드베이스에서 읽고 유지하기가 점점 더 어려워지고 있습니다.

이 문제를 해결하기 위해 더 읽기 쉬운 방식으로 체인을 허용함으로써 비동기 작업을 처리하는 더 깔끔하고 조직적인 방법을 제공하는 Promise가 도입되었습니다.

약속 기반 접근 방식:

    fetchData((data) => {
      processData(data, (processedData) => {
        saveData(processedData, (result) => {
          console.log(result);
        });
      });
    });

이러한 접근 방식은 구조를 단순화하고 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다.

약속은 어떻게 작동하나요?

JavaScript의 Promise는 다음 세 가지 상태 중 하나일 수 있습니다.

1. 보류 중: 이것이 초기 단계입니다. 약속은 아직 이행되지 않았습니다.

2. 이행됨: 약속이 성공적으로 완료되었습니다. 이는 약속이 해결되었으며 값이 있음을 의미합니다.

3. 거부됨: Promise가 성공적으로 완료되지 않았으며 오류 메시지가 표시됩니다.

기본 구문

fetchData()
  .then(processData)
  .then(saveData)
  .then(console.log)
  .catch(console.error);

이 예에서 Promise는 1초 후에 "Promise 해결됨!"이라는 메시지와 함께 해결됩니다. The.then() 메서드는 확인된 값을 처리하는 데 사용됩니다.

약속 처리

성공 처리를 위해 .then() 사용

.then() 메서드는 Promise가 성공적으로 완료되었을 때 발생하는 일을 처리하는 데 사용됩니다. 약속이 이행되었을 때 실행할 함수(콜백)를 등록합니다.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved!");
  }, 1000);
});

myPromise.then(result => console.log(result));

오류 처리를 위해 .catch() 사용

.catch() 메서드는 Promise가 실패할 때 발생하는 일을 처리하는 데 사용됩니다. Promise가 거부되었을 때 실행할 함수(콜백)를 등록합니다.

myPromise.then(data => {
  console.log("Data received:", data);
});

정리를 위해 .finally() 사용

.finally() 메소드를 사용하면 Promise가 완료된 후 성공 여부에 관계없이 일부 코드를 실행할 수 있습니다.

myPromise.catch(error => {
  console.error("Error:", error);
});

약속을 연결하다

체인을 사용하면 이전 작업의 결과를 전달하여 순차적으로 작업을 수행할 수 있습니다. 그런 다음 next.then()으로 진행합니다. 이를 통해 여러 비동기 작업을 순차적으로 처리할 수 있습니다.

체인 연결의 예:

myPromise.finally(() => {
  console.log("Cleanup tasks");
});

이 예에서는 Each.then()을 사용하여 프로세스의 각 단계를 처리하므로 명확한 데이터 흐름이 가능합니다. 이를 통해 한 단계의 결과가 다음 단계로 어떻게 전송되는지 확인할 수 있습니다.

약속의 오류 처리

Promise는 해결을 위해 체인을 .catch() 메소드로 전달하여 오류 처리를 단순화합니다. 이렇게 하면 각 단계에서 오류를 처리할 필요가 없어져 코드가 더 명확해지고 관리하기 쉬워집니다.

오류 전파의 예:

fetch('https://api.example.com/user')
  .then(response => response.json())
  .then(data => {
    console.log("Processed data:", data);
    return processData(data);
  })
  .then(finalResult => {
    console.log("Final result:", finalResult);
  })
  .catch(error => console.error("Error:", error));

프로미스 체인의 어느 단계라도 실패하면 오류는 .catch() 블록에 의해 포착됩니다. 이를 통해 문제를 쉽게 처리하고 코드를 원활하게 실행할 수 있습니다.

고급 약속 기능

1. 병렬 실행을 위한 Promise.all()

Promise.all() 메서드를 사용하면 여러 Promise를 동시에 실행하고 모두 완료될 때까지 기다릴 수 있습니다. 모든 약속이 이루어지면 각각의 결과를 받게 됩니다. 약속이 실패하면 실수를 감지합니다.

fetchData()
  .then(processData)
  .then(saveData)
  .catch(error => console.error("An error occurred:", error));

이 예에서는 Promise가 하나라도 실패하면 Promise.all() 전체가 실패합니다.

2. 가장 빠른 약속을 위한 Promise.race()

Promise.race() 메서드는 성공 또는 실패 여부에 관계없이 완료된 첫 번째 약속의 결과를 반환합니다.

    fetchData((data) => {
      processData(data, (processedData) => {
        saveData(processedData, (result) => {
          console.log(result);
        });
      });
    });

이 예에서는 Promise(fetchData1 또는 fetchData2)가 먼저 완료되면 그 결과가 콘솔에 기록됩니다.

3. 모든 결과를 처리하기 위한 Promise.allSettled()

Promise.allSettled() 메서드는 제공한 모든 약속이 성공 또는 실패 상태가 될 때까지 기다린 후 완료됩니다. 그런 다음 각 약속의 결과가 포함된 배열이 반환됩니다.

fetchData()
  .then(processData)
  .then(saveData)
  .then(console.log)
  .catch(console.error);

이 예에서 Promise.allSettled()는 fetchData1() 및 fetchData2()가 모두 완료될 때까지 기다립니다. 그런 다음 각 약속의 상태와 결과(또는 오류)를 기록합니다. 이렇게 하면 성공 여부에 관계없이 각 약속에 무슨 일이 일어났는지 확인할 수 있습니다.

4.첫 번째 성공적인 약속으로 해결하기 위한 Promise.any()

Promise.any() 메서드는 Promise 목록에서 첫 번째 Promise가 올바르게 해결될 때까지 기다립니다. 하나 이상의 Promise가 해결된 경우 Promise.any() 메서드에 의해 값이 반환됩니다. 모든 약속이 거부되면 이 메서드는 오류를 발생시킵니다.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved!");
  }, 1000);
});

myPromise.then(result => console.log(result));

이 예에서 Promise.any()는 첫 번째 Promise가 성공적으로 해결될 때까지 기다립니다. 프로시저는 첫 번째 성공적인 Promise의 결과를 반환합니다(이 경우 'Success A' 값을 가진 promise2). 모든 약속이 거부되면 the.catch() 블록이 실행되어 오류 메시지가 기록됩니다. 이 전략은 나머지를 기다리지 않고 첫 번째 성공적인 약속의 결과를 받고 싶을 때 유용합니다.

Promise가 포함된 JavaScript 실행 흐름(중요)

1. JavaScript의 약속은 마이크로태스크 대기열에서 실행되며, 이는 setTimeout과 같은 매크로태스크보다 우선순위를 갖습니다.

다음은 이를 설명하는 예입니다.

myPromise.then(data => {
  console.log("Data received:", data);
});

이 예에서는:

• console.log(2)는 일반적인 동기 작업이므로 먼저 실행됩니다.

• console.log(6)도 동기식이므로 다음으로 실행됩니다.

• promise의.then()은 setTimeout 콜백 이전에 실행됩니다. 왜냐하면 promise는 우선순위가 더 높은 마이크로 작업이므로 3을 인쇄하기 때문입니다.

• 마지막으로 setTimeout 콜백이 실행됩니다. 이는 매크로 작업이므로 4를 인쇄합니다.

따라서 마이크로태스크 대기열의 우선순위로 인해 promise의.then()은 setTimeout 콜백 전에 실행된다는 점을 항상 기억하세요.

2. Promise 실행 순서 및 다중 .then() 호출을 통한 마이크로태스크 큐

JavaScript에서 코드는 특정 순서로 실행됩니다. 먼저 동기 코드, 그 다음 마이크로 작업(예: Promise), 마지막으로 매크로 작업(likesetTimeout)입니다.

이를 설명하는 한 가지 예는 다음과 같습니다.

    fetchData((data) => {
      processData(data, (processedData) => {
        saveData(processedData, (result) => {
          console.log(result);
        });
      });
    });

이 예에서는 동기 코드가 먼저 실행되어 3, 6, 2, 7, 8을 기록합니다. 동기 코드가 완료되면 마이크로 작업(the.then() 콜백)이 처리되어 1과 9를 기록합니다. 마지막으로 매크로 작업 (setTimeout에서) 지연 순서대로 실행되어 21(0ms) 및 13(10ms)을 기록합니다. 이는 JavaScript의 실행 순서를 강조합니다: 동기 코드 > 마이크로태스크 > 매크로 작업.

3. Promise에서 여러 개의 호출 해결 및 거부: 첫 번째 호출만 중요합니다.

Promise를 생성할 때 해결 또는 거부를 위한 첫 번째 호출만 중요합니다. 그 외 전화는 모두 거절됩니다.

다음은 이를 설명하는 예입니다.

fetchData()
  .then(processData)
  .then(saveData)
  .then(console.log)
  .catch(console.error);

이 예에서 Promise는 값 1로 해결되었습니다. Promise는 이미 첫 번째 해결로 해결되었으므로 두 번째 해결 및 거부 호출은 무시됩니다.

4. 순차적인 .then() 호출에서 Promise 연결 및 값 처리

Promise를 연결하면 Each.then()이 프로세스의 한 단계를 처리합니다.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved!");
  }, 1000);
});

myPromise.then(result => console.log(result));

이 예에서 Promise.resolve(1)는 값 1로 시작하지만 첫 번째 .then(() => 2)는 대신 2를 반환합니다. 다음 .then(3)은 무시되고 값 2가 전달됩니다. .then((value) => value * 3)은 값에 3을 곱하여 6이 됩니다. .then(Promise.resolve(4))는 값을 변경하지 않으며 마지막으로 .then(console. log) 로그 6. 이는 함수가 아닌 값은 무시되고 값이 체인을 통해 전달되는 방식을 보여줍니다.

5. .catch() 및 .finally() 처리를 사용한 Promise Chain

myPromise.then(data => {
  console.log("Data received:", data);
});

이 예에서는 Promise 해결의 다양한 단계가 어떻게 처리되는지 보여주기 위해 여러.then(),.catch() 및.finally() 메서드를 함께 연결합니다. 분석해 보겠습니다.

• finally()는 인수를 받지 않습니다.
  finally() 블록은 정리 코드를 실행하지만 값을 가져오거나 전달하지 않습니다. Promise의 결과에 관계없이 특정 코드가 실행되도록 하는 데 사용됩니다.

• finally()에서 값을 반환해도 Promise에는 영향을 주지 않습니다.
  finally() 블록에서 값을 반환하면 프로미스 체인이나 최종 값에 영향을 주지 않습니다. Promise 해결/거절 이후 실행되지만 결과는 수정되지 않습니다.

• finally()에서 오류가 발생하면 거부가 발생합니다.
  finally()에서 오류를 던지거나 거부된 Promise를 반환하면 Promise 체인이 오류 또는 거부 이유와 함께 거부됩니다.
  

myPromise.catch(error => {
  console.error("Error:", error);
});

또는

myPromise.finally(() => {
  console.log("Cleanup tasks");
});

• then()과 catch()의 순서가 중요합니다 .then() 및 .catch()는 순서에 관계없이 호출될 수 있지만 항상 Promise의 최종 상태를 반환합니다. Promise가 .catch()에 의해 처리되면 후속 .then()이 최종 값을 받게 됩니다.

예:

    fetchData((data) => {
      processData(data, (processedData) => {
        saveData(processedData, (result) => {
          console.log(result);
        });
      });
    });

약속 체인을 Async/Await로 변환

Async/await는 코드가 동기 모드에서 작성된 코드와 더 비슷해지게 만드는 Promise를 사용하는 방법입니다. 자주 사용되는 용어는 비동기 코드를 수행하는 더 간단하고 깔끔한 경로를 제공하기 때문에 "구문 설탕"입니다.

fetchData()
  .then(processData)
  .then(saveData)
  .then(console.log)
  .catch(console.error);

Promise를 Async/Await와 결합하기

Promise.all()을 사용하여 병렬 실행을 위해 Promise와 async/await를 결합할 수 있습니다.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved!");
  }, 1000);
});

myPromise.then(result => console.log(result));

모범 사례 및 일반적인 실수

• 깊은 중첩 방지: 코드를 플랫하고 읽기 쉽게 유지하려면 연결 또는 async/await를 사용하세요.

• 항상 오류 처리: 모든 Promise 체인에 a.catch() 또는 try/catch 블록이 있는지 확인하세요.

• 병렬 실행을 현명하게 사용: 작업이 독립적이지만 함께 완료해야 하는 경우에만 Promise.all()을 사용하세요.

결론

JavaScript Promise는 서버에서 데이터 검색과 같이 시간이 많이 걸리는 작업을 처리하는 가장 좋은 방법 중 하나입니다. 유지 관리가 더 쉬운 코드를 더 깔끔하게 작성하는 데도 도움이 되며, 배운 내용을 연습하면 비동기 코딩을 최대한 활용하는 데 도움이 됩니다. 실습 경험을 쌓고 오류를 우아하게 처리하기 시작하면 Promise는 JavaScript의 큰 부분이 될 것입니다.

읽어주셔서 감사합니다! 이 기사가 도움이 되었다면 강조 표시하거나 박수를 치거나 댓글을 남기거나 Twitter/X 및 LinkedIn을 통해 저에게 연락해 주세요. 이 기사는 매우 감사하고 이러한 콘텐츠를 무료로 유지하는 데 도움이 됩니다!

위 내용은 JavaScript Promise 및 작동 방식에 대해 알아야 할 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!