[Javascript] 비동기함수(3) - Promise

앞선 포스팅에서 비동기 함수를 사용할때의 callback hell을 설명한 바 있다.

[Javascript] 비동기함수(2) - CallBack

비동기와 콜백 저번 포스팅에서는 비동기 함수가 어떻게 작동하는지 보았다. client에서 자원을 server에게 요청하는 코드들은 대부분 비동기함수로 작동을 한다. 예를 들어 어떤 이벤트가 발생했을때 아래의 함수..

artdev.tistory.com

 2015년 6월 , Ecma International 에서는 es2015라는 새로운 문법을 도입하였다.

약 500p 분량의 내용이 있는데 나도 아직 모르는문법이 수두룩하다.

ecma2015바로가기

es6라 불리는 이 문법에 promise가 설명되어있다. 조금 deep해서 mdn의 설명을봐도 좋을것 같다.

---

-mdn

---

mdn의 설명을 보면 꼭 알 수 있지는 않은 값을 위한 대리자 라는 표현을 하였다. 이 것이 우리가 http요청을 하거나 file혹은 db등등에서 data를 가져올때 항상 일어날수 있는 일을 말하는것이다.

promise가 좋은점은 비동기 메서드에서 마치 동기 메서드 처럼 값을 반환할수 있다 는 점이다. 

동기적으로 사용이 가능하다면, 굳이 이벤트 루프를 생각하지 않고 그냥 위에서 아래로 코드를 적어나가면 되는것이다.

callback hell을 겪을 필요없이 코드가 읽기 쉬워지고 비동기 data를 처리하는것도 매우 쉬워지게 된것이다.

---

3가지 상태가 있다. 

초기 promise는 pending 상태로 있다가 이행이 되면(내가 요청한것이 잘 오면) fulfill 상태가 되고, 거부가 되면 reject 상태가 된다.

또한 처리가 된 상태(settled)에서도 다시 promise를 리턴하면 다시 비동기적인 작업을 처리할수가 있다.

const getDataFromFilePromise = path => {
  return new Promise((resolve,reject) => {
    fs.readFile(path,(err,data)=>{
      if(err){
        reject(err);
      }else{
        resolve(data)
      }
    })
  })
};

getDataFromFilePromise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log("error!", error);
  })

위 코드는 nodeJS에서 대표적인 비동기 함수인 fileSystem 에서 readFile 메서드를 사용한것이다.

Promise 생성자는 인자에 callback함수를 받게 되는데 그 부분에 처리할 코드를 작성해주면 된다.

callback함수는 resolve,와 reject를 인자로 받게 되는데 이 인자를 가지고 잘 이행되었을때(fulfilled)와 거부되었을때(rejected)를 처리해주면 된다.

이행된다면 resolve에 인자로 값을 넣어주고, 

거부되었다면 reject에 인자로 넣어주면된다.

---

객체를 만들면 then 메서드와 catch메서드로 결과를 받아와서 사용하면된다.

만약 이행이 성공되었다면 then으로 실행흐름이 넘어와서 then부분의 callback으로 resolve에서 넘겨준 data가 넘어오게 된다. 

이행이 거부되었다면 catch로 실행흐름이 넘어와서 catch의 callback으로 reject에서 넘겨준 data가 넘어오게 된다.

또한 settled 된 부분에 대하여 promise를 return하게 되면 계속해서 then을 이어 붙여나갈수가 있다.

이 부분이 강점이라고 생각되는데, 여기서 비동기적인 부분을 동기적으로 볼수가 있다고 생각된다.

getDataFromFilePromise
  .then((data) => {
    console.log(data);
    return new Promise((resolve,reject)){...}
  })
  .then((data) => {
    // someCode...
    return new Promise ...
  })
  .then((...)=>{
    // code...
  })
  .catch((err) => {
    console.log("error!", error);
  })

실행순서가 보장되어있기때문에 매우 편하게 비동기적인 작업을 수행할수가 있다.