🧡 Promise

Category : Javascript

• 함수의 return value로 Promise를 반환한다는 것은 이 함수는 비동기 작업을 하고 그 작업의 결과를 Promise객체로 반환받아서 작업할 수 있다는 뜻이다.

function isPositivePromise(number) {
  const excutor = (resolve, reject) => {
    setTimeout(() => {
      if (typeof number === 'number') {
        resolve(number >= 0 ? '양수' : '음수');
      } else {
        reject('주어진 값이 숫자가 아닙니다.');
      }
    }, 2000);
  };

  const asyncTask = new Promise(excutor);
  return asyncTask;
}

const result = isPositivePromise(10);
result.then((res) => {
		// resolve
    console.log('작업 성공 : ', res);
  }).catch((err) => {
		// reject
    console.log('작업 실패 : ', err);
  });

• 위에서 처리한 코드와 다르게 중간에 있는(isPositivePromise())는 Promise 객체를 반환하고 result.then().catch()를 이용해 결과를 처리한다.

• Promise.then()은 Fullfilled(이행)된 상태를 처리하는 부분이고 Promise.catch()는 Rejected(실패)된 상태를 처리하는 부분이다. Error handling시 catch()를 사용하는 것을 추천한다.

  (다만 Async, Await이 생긴 후로는 사용하지 않는 추세이다.)

function A(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const resA = a + 2;
      resolve(resA);
    }, 3000);
  });
}

function B(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const resB = a * 3;
      resolve(resB);
    }, 2000);
  });
}

function C(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const resC = a * -1;
      resolve(resC);
    }, 1000);
  });
}

// 결과를 resultB에 저장하고
const resultB = A(2).then((resA) => {
    console.log('A result : ', resA);
    return B(resA);
 });

// somthing another code //

// 다른 작업을 처리한 후 불러와서 사용할 수 있다.
resultB.then((resB) => {
    console.log('B result : ', resB);
    return C(resB);
}).then((resC) => {
    console.log('C result : ', resC);
});

• [코드]의 callback 지옥을 해결할 수 있는 코드이다.
• 이 방식의 장점은 비동기를 호출하는 코드와 결과를 처리하는 코드를 분리할 수 있다. (callback 지옥과 가독성있고 깔끔한 처리를 할 수 있다. )

🧡 sync & async

Category : Javascript

function A(a, cb) {
  setTimeout(() => {
    const resA = a + 2;
    cb(resA);
  }, 3000);
}

function B(b, cb) {
  setTimeout(() => {
    const resB = b * 3;
    cb(resB);
  }, 2000);
}

function C(c, cb) {
  setTimeout(() => {
    const resC = c * -1;
    cb(resC);
  }, 1000);
}

A(2, (resA) => console.log('A result : ', resA)); // (1)
B(2, (resB) => console.log('B result : ', resB));
C(2, (resC) => console.log('C result : ', resC));
console.log('end!');
/* end!
C result :  -2
B result :  6
A result :  4 */

• 위에서 확인할 수 있는 것처럼 함수의 호출은 A → B → C → *console.log()*순으로 했지만, *setTimeout()*으로 인해 결과는 console.log() → C → B → A순으로 진행되었음을 알 수 있다. 이것은 Javascript의 비동기처리 때문에 일어나는 일이다.

  Javascript의 비동기 처리 방식은 다음과 같다. 우선 A()하나만 가지고 살펴보자.

  1. (1)에서 A의 호출이 일어난다. A()는 JS Engine의 call stack에 추가되고 A()안의 setTimeout()도 call stack에 추가된다.
  2. setTimeout()은 비동기 함수이므로 Web APIs로 넘어가고 다음 순서인 A()가 실행된다.
  3. 3000ms의 시간이 지나면 setTimeout()이 실행되고 내부에 있는 a+2가 실행된다. 그리고 cb()는 callback queue로 이동한다.
  4. 한편, A()가 call stack에서 제거되면 다음 차례인 console.log(’end!’);가 실행된다.
  5. call stack이 비어있으면 event loop에 의해 callback queue에서 cb()가 call stack으로 이동하고 나머지 코드가 실행된 후 프로그램이 종료된다.

...

A(2, (resA) => {
  console.log('A result : ', resA);
  B(2, (resB) => {
    console.log('B result : ', resB);
    C(2, (resC) => {
      console.log('C result : ', resC);
    });
  });
});
console.log('end!');
/* end!
A result :  4
B result :  6
C result :  -2 */

• 위 쪽 코드의 실행 부분을 A → B → C 순으로 동기 실행되게 수정한 코드이다. 이처럼 콜백함수를 이용하면 비동기 처리 방식을 동기 처리로 바꿀 수 있다.

  이는 api데이터를 불러올 때 등 반드시 이전 실행 결과를 기다려야할 때 사용하면 된다.

• 비동기 처리 너무 어려운 데 중요한 개념이라 계속 접하면서 공부해야할 것 같다.