[JS] ES6 Promise 개념정리

 

개념정리

동기

호이스팅이 된 다음, 작성한 코드들이 차례대로 실행되는 것을 말한다.

( hoisting : 변수, 함수 선언이 가장 먼저 실행되는 것 )

 

비동기

코드 순서에 따르지 않고 실행되는 것으로, setTimeout / AJAX / eventListener 등의 처리 시 비동기 처리 된다.

 

콜백함수

실행할때 다시 call back 해달라고 하는 함수. 함수 안에서 동작하는 또 다른 함수의 형태.

콜백함수로 동기 / 비동기 처리 모두 할 수 있다.

Synchronous callback : 함수 내 코드가 바로 실행될 수 있는 코드인 경우

Asynchronous callback : 함수 내 코드가 실행 타이밍을 기다려야하는 코드인 경우

 

 

콜백함수의 중첩이 많아지면 가독성이 떨어지고 복잡해지므로, promise 문법을 사용하면 좋다.

 

 

 

 

 

promise 사용하기

주로 비동기 처리를 위해 콜백함수를 사용하는 대신, 더 좋은 코드를 만들기 위해 promise 문법을 사용한다.

Promise is a Jacascript object for asynchronous operation.

 

 

 

 

 

promise 사용 시 알아야 할 포인트

state

프로세스가 기능 수행 중인지, 수행을 완료해서 성공인지, 실패인지 상태를 확인하는 것

pending (기능 수행 중) > fulfilled (완료) or rejected (거절)

 

producer & consumer

promise를 선언하는 것은 producer 코드이고

만들어진 promise를 사용하는 것은 consumer 코드이다.

 

 

 

 

 

producer

function promiseName() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("work done successfully");
      // reject(new Error("didnt work"));
    }, 2000);
  });
}

시간이 조금 걸리는 일들은, 프로세스 완료 후에 순차적으로 기능을 실행하기 위해서 promise를 만든다.

 

만약 데이터를 받아오는데 시간이 걸리는 코드가 있는데,

화면에 UI를 표시하는 동기적 코드가 먼저 실행된다면 사용자는 내용이 빈 화면을 보게 될 수 있다.

안정적으로 데이터가 다 온 다음 내용을 화면에 표시해줄 수 있도록 하는 비동기 처리 함수가 필요한 것이다.

 

💡

producer는 선언된 순간 작업을 시작한다.

페이지를 오픈하자마자 데이터를 요청해야하는 경우는 상관없지만,

사용자가 버튼을 눌러서 데이터를 요청해야하는 경우라면 불필요한 데이터 요청 작업이 일어날 수 있으므로 주의해야한다.

 

💡

promise를 선언하는것은, 프로세스가 성공했는지 실패했는지 판정하게 하기 위함이다.

resolve () 함수를 통해 프로세스 성공 시 받아올 리턴값을 설정할 수 있고,

reject (new Error()) 함수를 통해 프로세스 실패 시 받아올 리턴값을 설정할 수 있다.

 

💡

promise는 비동기 처리를 위한 코드를 가독성 좋게 디자인하기 위함이지 (this is just coding style),

동기처리 되는 코드를 비동기처리 할 수 있도록 만드는 문법이 아니다.

 

 

😓

promise를 이해하기위해 많은 글과 강의를 찾아봤는데 promise를 조금씩 다르게 선언하더라..

// 1
const promiseName = new Promise((resolve, reject) => {
 //
})

// 2
function promiseName(value) {
  return new Promise((resolve, reject) => {
   //
  })
}

이 두가지 경우가 어떻게 다른지 모르겠다 ㅠㅠ

-

아!! 오픈챗 선생님들께 여쭤봐서 답을 찾았다!

var functionName = function() {} vs function functionName() {}

이건 promise를 떠나서 hoisting의 문제였다.

functionOne();

var functionOne = function() {
  console.log("Hello!");
};
// TypeError: functionOne is not a function

functionTwo();

function functionTwo() {
  console.log("Hello!");
}
// Outputs: "Hello!"

변수로 선언하는 경우, 변수 코드가 실행될 순서가 되었을 때 실행된다.

함수로 선언하는 경우, 페이지가 열리자마자 호이스팅되어 먼저 정의되기 때문에, 함수코드가 뒤쪽에 있더라도 자유롭게 사용 가능하다.

고로 함수로 선언해 사용하는 것이 안정적이겠다.

 

 

 

 

 

consumer

promise
  .then((value) => {
    console.log(value); // output : work done successfully
  })
  .catch((value) => {
    console.log(value); // output : didnt work
  })
  .finally(() => {
    console.log("done");
  });

.then : 프로세스 성공
.catch : 프로세스 실패
.finally : 성공 여부에 관계없이 마지막에 실행

만들어 놓은 promise를 이용해서 리턴값을 받아와 3가지 메소드를 붙여 실행할 수 있다.

 

만약 promise 함수에 reject 값이 설정되어있는데 catch 메소드를 사용하지 않으면 에러가 발생한다.

 

 

 

 

 

promise chaining

promise를 사용하면 함수 속에 함수, 또 함수 속에 함수를 넣지 않고 순차적으로 실행되어야 하는 코드를 병렬로 펼칠 수 있다.

promiseName()
  .then((result) => {
    console.log(result); // 작업 수행 후
    return promiseName(); // 다음 작업에 넘겨줄 내용
  })
  .then((result) => {
    console.log(result); // 넘어온 내용을 받아서 실행
  });

 

 

 

 

 

 

 

 

 

 

[ 참고 글 ]

자바스크립트 Promise 쉽게 이해하기

 

[JavaScript] 바보들을 위한 Promise 강의 - 도대체 Promise는 어떻게 쓰는거야?

[자바스크립트] 비동기 처리 2부 - Promise