[Vue.js][문제해결] 분명히 정확한 객체의 키를 입력했는데 "undefined"라니...

 

[그림 1] data 키의 배열 값을 가져오고 싶었다.

 

[그림 1]의 data 배열의 값을 사용하고자 했다. 그래서 .data 키로 접근하고자 시도하였으나 "undefined"라는 결과만 출력되었다. 여러 차례 시도해 봤으나 결과는 동일했다. 다시 코드를 찬찬히 살펴보고 있는데 헛웃음이 나왔다.

async $get(url) {
  return await axios.get(url).catch((e) => {
    console.log(e)
  }).data
}

위 코드와 같이 .data를 catch에다 붙였던 것이다. 그러니 백날 시도해도 "undefined"일 수밖에...

async $get(url) {
  return (
    await axios.get(url).catch((e) => {
      console.log(e)
    })
  ).data
},

위와 같이 코드를 수정하자 [그림 2]와 같이 원하는 배열 값을 가져올 수 있게 되었다.

 

[그림 2] data 키의 배열 값을 성공적으로 가져왔다.

 

이런 경우는 문제라기보다는 실수인데, 경험의 부족 때문일 수도 있겠지만 코딩을 하다 보면 이런 일로 많은 시간을 허비하게 되더라!