TIL promise와 await의 관계

ESH'S VELOG·2023년 7월 15일
0

게시판 삭제 기능을 구현하다 기능이 제대로 작동되지 않는 상황이 발생

아래는 코드

deletePost = async (id, userId) => {
    const post = Post.findByPk(id);
    console.log('안녕', post);
    if (post.userId == userId) {
      await post.destroy();
      return { isSuccessful: true };
    } else {
      return {
        message: '삭제할 권한이 없습니다.',
      };
    }
  };

위와 같이 console.log를 찍어보니
안녕 Promise {} 이라고 뜬다.

사실 나는 Promise에 대해서 잘 이해하고 있지 못하고있다. Promise는 객체지향프로그래밍에서 비동기처리를 하고 약속된 무언가를 반환한다라고만 추상적으로 이해하고 있다. 이 기회에 Promise에 대해 알아보려고 한다.

Promise

promise는 함수에 콜백을 전달하는 대신에 콜백을 첨부하는 방식의 객체이다.
함수를 실행하게 되면 결과를 어떤 약속을 해주지않으면 아직 반환하지 않은 상태로 대기하게 된다.
promise에는 3가지 상태가 있는데

  • Pending(대기)
  • Fulfilled(이행)
  • Rejected(실패)
    비동기 처리가 완료 되지 않았다면 pending, 완료되었다면 Fulfilled, 실패하거나 오류가 발생하면 Rejected상태를 갖는다.

Promise 사용 예시

function success(result) {
  console.log(result)
}
function failure(error) {
	console.log(error)
}
const promiseFunction = createAsync(settings)
promise.then(success, failure)

위와 같이 promise를 사용해주면 비동기 처리된 함수를 호출하여 콜백을 해줄 수 있게된다.

문제해결

따라서 나는 비동기처리한 함수에 await를 써주어서 동기화시켜 pending상태가 아닌 다음 처리를 할 수 있도록 해주었더니 해결이 되었다.

deletePost = async (id, userId) => {
    const post = await Post.findByPk(id);
    console.log('안녕', post);
    if (post.userId == userId) {
      await post.destroy();
      return { isSuccessful: true };
    } else {
      return {
        message: '삭제할 권한이 없습니다.',
      };
    }
  };
profile
Backend Developer - Typescript, Javascript 를 공부합니다.

0개의 댓글