💻 Promise, async와 await

waterglasses·2022년 4월 5일

TIL async await promise 데브코스 프로그래머스

TIL

목록 보기

13/50

이 글은 Promise와 async와 await 에 대해서 다루었습니다.
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다

📃 오늘 공부한 것

Promise

비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 콜백 헬에서 어느정도 벗어날 수 있게 해준다.

Promise 생성

Promise 생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 전달받는데 이 콜백함수는 resolve와 reject 함수를 인자로 전달받는다.

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.
  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');
  }else { /* 비동기 작업 수행 실패 */
    reject('failure reason');
  }
});

Promise 비동기 처리가 성공(fulfilled)하였는지 또는 실패(rejected)하였는지 등의 상태 정보를 갖는다.

프로미스의 후속 처리 메소드

Promise 객체는 상태에 에 딷라 후속 처리 메소드를 체이닝 방식으로 호출한다.

then
then 메소드는 두 개의 콜백 함수를 인자로 전달 받는다. 첫 번째 콜백 함수는 성공(resolve 함수가 호출된 상태) 시 호출되고 두 번째 함수는 실패(reject 함수가 호출된 상태) 호출된다.
then 메소드는 Promise를 반환한다.

catch
예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출된다.
catch 메소드는 Promise를 반환한다.

promiseWork()
  .then(result => {
    return promiseNextWork(result)
  }).then(result => {
    return promiseNextWork(result)
  }).then(result => {
    return promiseNextWork(result)
  }).catch(e => {
    alert('에러가 발생했어요~')
  }).finally(() => {
    alert('작업이 끝남)
  })

프로미스 체이닝

프로미스는 후속 처리 메소드는 체이닝하여 여러 개의 프로미스를 연결하여 사용할 수 있다. 이로써 콜백 헬을 해결한다.

Async와 Await

Promise와 연관이 깊다. Promise가 콜백 깊이를 1단계로 줄여주기는 하지만 여전히 불편한 것은 사실이다.
여기에 async와 await 를 이용하면 Promise를 동기 코드처럼 보이게 할 수 있다.(실행은 비동기로 됨!)

async와 await 예시

const init = async () => {
    const data = await request("https://www.waterglasses.codes/${id}");
    this.setState({
      ...this.state,
      todos: data,
    });
  };