개요
- 개요는 시리즈 1편과 동일함
- 이하 내용의 근본적인 출처는 https://ko.javascript.info/promise-chaining | https://ko.javascript.info/promise-error-handling
1. Promise Chaining (프로미스 체이닝)
의미
순차적으로 처리해야 하는 비동기 작업이 여러 개 있는 경우 사용하는 기법
방법 1 : 프로미스를 리턴
- 즉 resolve (result) 하는 것
- 예시 코드
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);
});
})
방법 2: .then을 여러 번 사용
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000); // (*)
}).then(function(result) { // (**)
alert(result); // 1
return result * 2;
}).then(function(result) { // (***)
alert(result); // 2
return result * 2;
}).then(function(result) {
alert(result); // 4
return result * 2;
});
fetch와 프로미스 체이닝 함께 이용 가능
- fetch
- JS에서 제공하는 네트워크 요청의 생성, 응답을 다루기 위한 API
- HTTP 요청을 보내거나 서버에서 데이터를 가져올 때 사용됨
- Promise 기반의 비동기 방식으로 동작
- 브라우저 환경 or Node.js 에서 사용 가능
- 예시 코드 : Promise.race 를 사용하여 fetch 요청에 타임아웃을 설정
return Promise.race([
fetch(resource, Object.assign({signal}, init)).then(response => { //fetch 함수를 이용하여 네트워크 리소스에 대한 요청 수행
clearTimeout(timeoutID); //fetch 요청이 완료되면 타임아웃을 취소하기 위해 사용됨
return response;
}),
new Promise((resolve, reject) => {
timeoutID = setTimeout(() => {
if (controller) controller.abort();
reject(new Error(`Fetch timed out after ${timeout} ms`));
}, timeout);
})
]);
2. Error Handling (에러 핸들링)
// 실행 순서: catch -> then
new Promise((resolve, reject) => {
throw new Error("에러 발생!");
}).catch(function(error) {
alert("에러가 잘 처리되었습니다. 정상적으로 실행이 이어집니다.");
}).then(() => alert("다음 핸들러가 실행됩니다."));
- .then 구문 안에서 throw new Error 하고, .catch 구문으로 에러 다시 던져서 처리하면 보다 효과적으로 에러 처리 됨
- 만약 위처럼 에러 핸들링하지 않는다면, 서버에 에러를 알리지 않은 채 스크립트가 죽고 콘솔창에 메시지가 출력 됨.
: 이 경우 JS 는 전역 에러를 생성하는데, 다시 복구가 어려움
'Backend > Node.js' 카테고리의 다른 글
[Asynchronous] 비동기 처리 - 5. Microtask : 비동기 처리의 메모리 측면 개념 (0) | 2023.12.01 |
---|---|
[Asynchronous] 비동기 처리 - 4. Promise API (0) | 2023.12.01 |
[Asynchronous] 비동기 처리 - 2. Promise (1) | 2023.12.01 |
[Asynchronous] 비동기 처리 - 1. 비동기와 콜백 (0) | 2023.12.01 |
[Coding-Practice] 코드 최적화 - 4. 간결한 코드 작성 (1) | 2023.12.01 |