JavaScript 비동기 처리 [2] - Promise, async+await

비동기 처리가 필요한 이유를 이해했고, Callback함수를 활용한 비동기 처리 방식과, 콜백 지옥의 존재가 이해됐다면, 만들어진 콜백 지옥을 만들지 않고 비동기 처리를 할 필요가 생긴다.
그리고 그 방법이 Promise와 async function이다.

1. Promise

프라미스를 잘 알려진 문서들을 통해 읽어봤다면, 몇 가지 짚고 넘어가야할 정보들이 있다.

1. Promise는 JS의 표준 내장 객체 중 하나로, new Promise() 생성자를 통해 생성할 수 있다.
2. 인자로 함수를 받고, 그 함수는 reject와 resolve라는 콜백을 인자로 기본적으로 제공받는다.
3. 일이 끝났을 때, resolve에 원하는 리턴값을 넣어 호출하면 끝난다.
4. resolve 호출이 끝난 뒤, resolve에 담은 데이터를 가지고 무언갈 하고싶다면, .then을 붙여 사용하면 된다.
5. 에러상황을 처리하길 원한다면, reject에 원하는 에러를 담으면 된다.

let myPromise = new Promise((resolve, reject) => {
  
  setTimeout(() => {
    // 일을 마쳤을 때
    if(getData()){
      resolve("Finish!");
    }
    
    // 원하는 값을 받아오지 못했을 때
    else{
      reject(new Error("Failed!"));
    }
  }, 1000)
})

프라미스가 끝나기를 기다린 뒤, 그 결과나 오류를 가지고 실행될 함수를 구독 함수라고 하고, 이를 구독시키는 방법이 .then과 같은 소비자이다.

myPromise.then(
  (res) => {
    console.log(res);
  }
  (error) => {
    console.log(error);
  }
}

.then은 두 개의 콜백함수를 인자로 받는다.
첫 번째는 성공(resolve)했을 때, 두 번째는 거부(reject)했을때를 의미하고,
각 인자는 resolve와 reject함수에 인자로 입력한 값들을 말한다.

성공된 경우만 다루고 싶다면 하나만 넣으면 된다.

myPromise.then((res) => {
    console.log(res);
  }
)

실패한 경우만 다루고 싶다면 .catch를 쓰면 된다. .then( null, error )와 똑같게 동작하지만, 보기엔 이게 더 명확하다.

myPromise.catch((error) => {
    console.log(error);
  }
}

.then과 .catch, 이 둘을 합쳐서 보기에 더 좋은 비동기 처리를 할 수 있다.

myPromise.then((res) => {
    console.log(res);
  }
).catch((error) => {
    console.log(error);
  }
}

맨 위 코드랑 달라진 건 없지만, 보기에 좋다는건 상당한 장점이다.

예제를 하나 살펴보자.

서버 통신의 대표적인 라이브러리 axios이다.
보면 axios.get()이후 .then을 사용하고 있는 것을 볼 수 있다.

.then은 Promise가 가질 수 있는 메소드이므로 axios.get은 프라미스를 리턴한다고 볼 수 있다.
물론 axios 설명 자체가 promise-based api이지만, 이 코드가 가장 promise를 사용하는 방법에 대해 잘 설명했다고 생각한다.

2. async + await

promise를 더 편하게 사용하기 위한 방식.

promise를 사용할 함수 앞에 async를 붙이고, promise앞에 await을 붙이면 된다.

async function getData(){
  const res = await axios.get('/user?ID=12345');
}

간단하다. 어렵게 생각할 것 없고 이게 다다.

앞의 내용이 다 이해됐다면 딱 이정도만 강의해도 이해할 수 있겠지?