프로그래밍/JavaScript

[ JS ] 프라미스와 async / await : promise

L.Joey 2024. 6. 4. 17:06

프라미스 

promise 객체 기본 구조

let promise = new Promise(function(resolve, reject) {
  // executor (제작 코드)
});

  • executer 는 자동으로 실행, 이 부분에서 코드로 작성한 원하는 작업이 처리됩니다.
  • executer 의 인수 resolve 와 reject 는 자바스크립트에서 자제 제공하는 콜백입니다.
    • resolve : 작업이 성공적으로 끝난 경우 그 결과를 나타낸는 value 와 함께 호출됩니다.
    • reject : 에러 발생시 에러객체를 나타내는 error와 함께 호출
  • 프로미스의 특징 : 성공또는 실패 둘 중 하나만 존재

예시

let promise = new Promise(function(resolve, reject) {
  resolve("완료");

  reject(new Error("…")); // 무시됨
  setTimeout(() => resolve("…")); // 무시됨
});

 

프라미스 소비자  then, catch, finally

then

- 첫 번째 인수는 프라미스가 fullfilled 되었을 때 실행 -> 실행 결과

- 두 번째 인수는 프라미스가 refuse 되었을 때 실행 -> 에러 호출

promise.then(
  function(result) { /* 결과(result)를 다룹니다 */ },
  function(error) { /* 에러(error)를 다룹니다 */ }
);

 

reject 예시

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

// reject 함수는 .then의 두 번째 함수를 실행합니다.
promise.then(
  result => alert(result), // 실행되지 않음
  error => alert(error) // 1초 후 "Error: 에러 발생!"을 출력
);

 

resolve 예시

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("완료!"), 1000);
});

// resolve 함수는 .then의 첫 번째 함수(인수)를 실행합니다.
promise.then(
  result => alert(result), // 1초 후 "완료!"를 출력
  error => alert(error) // 실행되지 않음
);

 

Catch

에러만 다루고 싶은 경우 사용 try {...} catch{...} 에서 catch 와 같은 역할

.then() 을 다 나열한 후 마지막에 사용되는 소비자

 

Finally

결과가 어떻든 마무리가 필요하면 finally 가 유용

finally 에선 절차를 마무리하는 보편적 동작을 수행하기 때문에  성공 혹은 실패 여부를 몰라도 됨

finally 는 자동으로 다음 핸들러에 결과와 에러를 전달

 

 

참고자료

https://ko.javascript.info/async