axios.get callback 내부에서 this

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

axios를 이용한 api 호출

작성

572

안녕하세요 강의 잘 듣고 있습니다.

다름이 아니라 axios.get()의 callback 함수의 내부에서 vm.을 사용하셨는데, vm.users가 아니라 this.users를 사용해도 정상적으로 데이터가 들어가고 있습니다.

async created(){
    await axios.get('https://api.hnpwa.com/v0/news/1.json').then((res) => {
      console.log(res)
      this.newses = res.data
    }).catch((err) => {
      console.log(err)
    })
  },

인텔리센스가 띄워주는 타입을 보니 callback 내부의 this와 외부에서의 this가 동일하게 CombinedVueInstance로 잡히는데 혹시 차이점이 있을까요? 아니면 버전업에 따른 수정 사항인지 궁금합니다.

감사합니다.

axios this vuejs javascript

답변 3

장기효(캡틴판교)

지식공유자

안녕하세요 동현님, 좋은 질문이네요. axios 콜백 함수 내부에서 vm을 사용하셨다라는 부분은 Vue.js 시작하기 강의를 말씀하신 건가요? 화살표 함수는 this 바인딩을 바꿔줍니다. 위 코드에서 axios 콜백 함수의 this와 컴포넌트의 this는 동일하게 나오는게 맞아요 :)

권동현

질문자

제가 arrow function을 사용해서 그런 것 같네요. 강의 예시 코드에서는 사용하지 않았었군요

권동현

질문자

11강 axios를 이용한 api 호출에서 아래와 같이 사용하셔서 질문 드렸습니다. 답변 감사합니다~

async created(){
    const vm = this
    await axios.get('https://api.hnpwa.com/v0/news/1.json').then((res) => {
      console.log(res)
      vm.newses = res.data
    }).catch((err) => {
      console.log(err)
    })
  },

인프런 커뮤니티 질문&답변

axios.get callback 내부에서 this