[JS] async는 프로미스 객체를 반환하는 것을 간과해 생긴 오류

async는 await이 없다면 필요하지 않다는 생각에 코드를 아래처럼 수정한 적이 있다.

 

 

기존 코드

TaskState.js

  async deleteTask(taskId) {
    deleteTaskAPI(taskId)
      .then(() => this.fetchTasks())
  }
  ..

 

 

deleteCard.js

function deleteTask() {
  if (currentTaskId !== null){
    taskStateInstance.deleteTask(currentTaskId)
    .then(() => {
      alert(`카드가 삭제되었습니다. cardId: ${currentTaskId}`);
      closeModal();
    })
  }
}

deleteCard.js 에서 TaskState.js의 인스턴스를 받아 deleteTask() 메서드를 수행하는 로직이 있었다.

 

 

수정 코드

여기서 TaskState.js의 deleteTask 내부에 await이 필요없어지면서 async 를 제거하게 되었다.

TaskState.js

 deleteTask(taskId) {
    deleteTaskAPI(taskId)
      .then(() => this.fetchTasks())
  }

 

deleteCard.js

    .then(() => {
      alert(`카드가 삭제되었습니다. cardId: ${currentTaskId}`);
      closeModal();
    })

이렇게 처리하니 deleteCard.js의 deleteTask() 메서드 내부 로직이 실행되지 않았다.


 문제 원인은 async로 정의된 메서드는 항상 Promise를 반환한다는 것을 간과했던 것이었다. 프로미스객체를 반환하지 않으니 .then 체인이 연결되지 않게 된 것이다.

 

 

async를 다시 붙여 프로미스 객체를 반환해주거나, 혹은 아래 처럼 프로미스 객체를 반환해 해결할 수 있습니다.

deleteTask(taskId) {
  return deleteTaskAPI(taskId)
    .then(() => this.fetchTasks());
}