HeropCode/Vue-Movie-app

Promise 생성자 안에 async 넣는 부분에 대한 질문이 있습니다!

Closed this issue · 2 comments

beaniejoy commented

안녕하세요. 좋은 강의 감사드립니다! 질문이 있는데요.

return new Promise(async resolve => {
  const res = await axios.get(`https://www.omdbapi.com/?apikey=${API_KEY}&s=${state.title}&page=${pageNum}`)
  commit('pushIntoMovies', res.data.Search)
  resolve(res.data)
})

알려주신 대로 다음과 같이 작성해서 lint를 수행해봤는데

Promise executor functions should not be async (no-async-promise-executor) at src\store\movie.js:25:32:

다음과 같이 에러 나와서 구글링 쪼금 해서 나온 내용들이
Promise내부에 async 붙이지 말라는 식으로 언급한 내용들이 있었습니다.

dev server 돌아가는데 이상은 없었는데 강사님이 알려주신 이 방식대로 그냥 써도 될까요?
궁금해서 남깁니다!

감사합니다.

ParkYoungWoong commented

@beaniejoy 님 안녕하세요.
해당 Lint 사양은 제가 모르고 있던 부분이네요!
좋은 정보 감사합니다~ :D

일단 해당 코드는 별도 reject을 실행하지 않는(오류가 손실될 수 있는 구조가 아닌) 심플한 '가져오기' 코드입니다.
Lint에서 언급된 사례가 발생할 구조는 아니기 때문에 동작에는 문제가 없습니다.
그러나 이 방식이, 'new Promise()는 결국 다시 promise 객체를 반환하기 때문에 내부 해결(Resolve)이 잘못된 코드 해석으로 이어질 수 있다.'는 Lint에서 말하는 부분은 충분히 공감합니다.
단지, 현재 코드가 너무 심플해서 그 내용에 해당하는지는...

중요한 건 Lint에 맞는 코드 작성이니까 권장 방법으로 수정하는 것이 좋겠네요.
저라면 다음과 같이 수정하겠습니다!

function fetchMovies ({ state, commit }, pageNum) {
  const promise = new Promise(resolve => {
    const res = axios.get(`https://www.omdbapi.com/?apikey=${API_KEY}&s=${state.title}&page=${pageNum}`)
    resolve(res)
  })
  return promise.then(res => res.data)
}

결론적으로,
"강사님이 알려주신 이 방식대로 그냥 써도 될까요?" 질문에 대해선,
"이 예제에서는 제공된 방법으로 그대로 진행하셔도 괜찮고, 나중에 새로운 비동기 코드를 작성하실 때는 위 수정된 방법을 추천합니다."라고 말씀드리겠습니다.

혹시 현재 설치하신 eslint와 eslint-plugin-vue 버전이 각각 @5.16.0, @5.0.0이 아니라면 강의 영상에서는 보이지 않는 Lint 에러/경고가 있을 수 있습니다.
Lint 사양이 지속적으로 추가되다 보니 제가 모르는 Lint 사양이 많습니다만,
확실히 말씀드릴 수 있는 것은 해당 Lint는 어디까지나 권장하는 방법이지 절대적인 문법의 기준은 아닙니다!
그리고 ESLint 버전이나 다른 Lint 방식에 따라서 내용이 다를 수 있으니 결국 상황에 맞게 수정하면서 쓰는 것이 좋다고 봅니다.
그래서 결국 현재 상황은 Promise 내부에 실행 함수에서 async 키워드를 사용하지 않는 것이 되겠네요!

위 내용 확인해 보시고, 추가 질문이 있으시면 GitHub Issues보단 제 메일(thesecon@gmail.com)로 연락주시면 좀 더 빠르게 답변을 드릴 수 있습니다.
그럼 즐겁고 좋은 하루 보내세요~
감사합니다 :)

  • 👍3
beaniejoy commented

와.. 친절하고 자세한 설명 정말 감사드립니다! 😭
아직 자바스크립트 문법이 친숙하진 않아서 이런 부분에서 궁금증이 많았습니다. ㅎㅎ
강사님 강의 덕분에 vue로 한번 프로젝트 해볼 수 있을 것 같아요!

감사합니다!~ 좋은 하루 되세요~ 😄

  • 😄1