비동기 처리 - 1. 비동기와 콜백 글 보러 가기
개요
- 시리즈 1편의 개요와 동일
- 이하에서는 콜백 지옥의 단점을 보완하고자, 비동기 처리를 프로미스로 처리하는 경우를 정리했음.
- 이하 내용의 근본적인 출처는 https://ko.javascript.info/promise-basics
1. Promise
문법
let promise = new Promise(function(resolve, reject) {
// executor
});
- resolve reject
: JS의 자체 제공 콜백. 따라서 개발자는 이것들을 신경 쓰지 않고, executor 부분만 작성하면 ok - executor 부분
- new Promise 에 전달하는 함수 : executor (실행자, 실행 함수) 의 형태
- executor 에서는 결과를 즉시 얻든 (동기), 늦게 얻든 (비동기) 상관없이 인수로 넘겨준 콜백 하나 (resolve 또는 reject 중 하나) 를 반드시 호출해야 함
리턴되는 Promise 객체의 내부 property(프로퍼티)
State | “pending” | “fulfilled” | “rejected” |
Result | undefined | value 출력 | error 출력 |
대기 | 이행 | 거부 |
- 일반적으로 값을 리턴했을 때와는 다른 결과
- 따라서 프로젝트에서 createDetector() 함수를 실행했을 때 밑과 같은 결과 출력 됨
- 내부 프로퍼티들은 프로미스 객체의 내부에 있어 개발자가 직접 접근 불가. 따라서 .then .catch .finally 사용해서 접근해야 함
2. 프로미스 핸들러 : .then .catch .finally
개요
- 비동기 작업 실행하는 도구들임
- .then : 프로미스가 이행된 경우 실행
- .catch : 프로미스가 거부된 경우 실행. 즉 에러 발생한 경우만 처리
- .finally
- 프로미스가 처리된 (이행 or 거부) 경우 항상 실행
- try ~ catch 문의 finally 문과 거의 동일 기능
- .then 과의 차이점
- .finally 핸들러에는 인수가 없음. 따라서 프로미스가 이행되었는지, 거부되었는지 알 수 없음
- BUT .finally 에서는 절차를 마무리하는 ‘보편적’ 동작을 수행하기 때문에 성공, 실패 여부를 몰라도 됨
- .finally 에서는 자동으로 다음 핸들러에 결과와 에러를 전달함
예시 코드
// 프로젝트에 적용
return new Promise((resolve, reject) => {
this._detector.estimateHands(imageData).then(result => {
this._result = result;
console.log(`this._result: `, this._result);
this._result.forEach((res) => {
console.log(`${res.handedness} hand keypoints:`);
res.keypoints.forEach((keypoint, i) => {
let x = keypoint.x - 320;
let y = keypoint.y - 240;
console.log(`Keypoint ${i}: [${x}, ${y}]`);
})
})
resolve(this._result);
}).catch(e => {
reject(e);
});
})
// .finally 문 예시
new Promise((resolve, reject) => {
throw new Error("에러 발생!");
})
.finally(() => alert("프라미스가 준비되었습니다."))
.catch(err => alert(err)); // <-- .catch에서 에러 객체를 다룰 수 있음
'Backend > Node.js' 카테고리의 다른 글
[Asynchronous] 비동기 처리 - 4. Promise API (0) | 2023.12.01 |
---|---|
[Asynchronous] 비동기 처리 - 3. Promise Chaining | Error Handling (1) | 2023.12.01 |
[Asynchronous] 비동기 처리 - 1. 비동기와 콜백 (0) | 2023.12.01 |
[Coding-Practice] 코드 최적화 - 4. 간결한 코드 작성 (1) | 2023.12.01 |
[Coding-Practice] 코드 최적화 - 3. for문과 forEach문 (0) | 2023.11.30 |