Merry's Dev. Blog

비동기 처리 - 1. 비동기와 콜백

비동기 처리 - 2.  Promise

비동기 처리 - 3. Promise Chaining | Error Handling

비동기 처리 - 4. Promise API

개요

• 개요는 시리즈 1과 동일함
• 이하 글 및 코드의 근본적인 출처는 https://ko.javascript.info/microtask-queue

Microtask (마이크로태스크)

의미

JS 엔진이 비동기 작업 결과를 처리하기 위해 사용하는 작업 단위

예시

프로미스의 .then .catch .finally 같은 콜백

특징

let promise = Promise.resolve();
promise.then(() => alert("프라미스 성공!"));
alert("코드 종료"); // 얼럿 창이 가장 먼저 뜹니다.

• 마이크로태스크는 Call stack (콜 스택)이 비었을 때, 즉시 실행 됨
  • 콜 스택이 비었음 : 현재 실행 중인 코드 없음 + 콜백 함수의 프로미스 처리가 완료 됨
  • 따라서 위 코드에서 alert(’코드 종료’) 가 현재 실행 중인 코드이므로 실행하고 → .then 이하 코드 실행함
• 마이크로태스크는 이벤트 루프에서 다음 태스크를 수행하기 전에 실행

마이크로태스크 Queue (큐)

• 마이크로태스크들이 대기하고 있는 큐(queue)
• 큐이므로 먼저 들어온 작업 실행 (FIFO)

비동기 처리 - 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(프로퍼티)

• 일반적으로 값을 리턴했을 때와는 다른 결과
• 따라서 프로젝트에서 createDetector() 함수를 실행했을 때 밑과 같은 결과 출력 됨

이전다음

01

• 내부 프로퍼티들은 프로미스 객체의 내부에 있어 개발자가 직접 접근 불가. 따라서 .then .catch .finally 사용해서 접근해야 함

2. 프로미스 핸들러 : .then .catch .finally

개요

• 비동기 작업 실행하는 도구들임
• .then : 프로미스가 이행된 경우 실행
• .catch : 프로미스가 거부된 경우 실행. 즉 에러 발생한 경우만 처리
• .finally
  • 프로미스가 처리된 (이행 or 거부) 경우 항상 실행
  • try ~ catch 문의 finally 문과 거의 동일 기능
  • .then 과의 차이점
    1. .finally 핸들러에는 인수가 없음. 따라서 프로미스가 이행되었는지, 거부되었는지 알 수 없음
    2. BUT .finally 에서는 절차를 마무리하는 ‘보편적’ 동작을 수행하기 때문에 성공, 실패 여부를 몰라도 됨
    3. .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에서 에러 객체를 다룰 수 있음