Vue 2 nextTick에 대해서

Vue 2 nextTick에 대해서

nextTick은 다음 액션에서 코드를 실행할 수 있다는 것을 알았습니다.하지만 제 코드에 맞지 않습니다.누군가 도와주실 수 있나요?정정해 주세요.고마워요.

.vue

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
        })
        Vue.nextTick(()=>{
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
}
.....

{{user.id}}동작합니다.여기서 다음 오류가 발생합니다.

GET http://localhost:8000/getShop/미정의 404(찾을 수 없음)

EDIT #1 이와 같은 조작을 하면 동작합니다만, 제 생각에 이것은 올바른 방법이 아닙니다.

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
}
.....

EDIT #2 이와 같은 조작을 하면 동작하지 않습니다.vm.user.id 는 설정되어 있지 않습니다.

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
        })
        vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
          vm.shop = response.data.data.shop
        })
      },
}
.....

제 생각에 당신이 이해한 것은nextTick는잘못되었습니다.매뉴얼을 읽으면 콜백이 에 전달된다고 되어 있습니다.nextTick기능은 다음 DOM 업데이트 후에 실행됩니다.

디렉티브를 사용하여 요소가 DOM에 존재하는지 여부를 결정하는 속성이 있다고 가정합니다.요소가 DOM에 존재하도록 속성 값을 변경하는 경우 예를 들어 Vue가 변경 내용을 처리하고 DOM을 업데이트할 때까지 기다려야 해당 요소의 참조를 가져올 수 있습니다.이 경우 다음 명령어를 사용합니다.Vue.nextTick그 요소를 취득하기 위해서 DOM 에 쿼리를 송신할 때까지, 그 요소가 실제로 존재하는 것을 확인합니다.

당신의 시나리오는 DOM과는 아무런 관련이 없습니다.

2개의 비동기 HTTP 콜을 연속해서 실행해야 합니다.두 번째 콜은 첫 번째 콜의 결과에 의존하기 때문입니다.첫 번째 HTTP 요구를 기동하기 전에 첫 번째 HTTP 요구가 완료되었는지 확인할 수 없기 때문에 첫 번째 구현과 세 번째 구현(EDIT #2)이 불안정합니다.이것에 의해, 다음의 에러가 발생하는 것을 알 수 있습니다.vm.user.id설정되지 않았습니다.

첫 번째 HTTP 요구가 완료된 후 두 번째 HTTP 요구가 실행되므로 두 번째 구현(EDIT#1)이 더 정확합니다.그래도 약간의 수정을 제안합니다.

getUserInfo() {
    vm.$http.get('/getAuthUser')
        .then(response => {
            vm.user = response.data;

            return vm.$http.get('/getShop/' + vm.user.id);
        }).then(response => {
            vm.shop = response.data.data.shop;
        });
}

첫 번째 콜백은Promise그 결과는 두 번째에 입력된다.then이 접근법이 마음에 드는 이유는 이 접근법이 네스트되어 있기 때문입니다.thens. MDN의 Promise 관련 문서도 읽어보실 것을 권장합니다.

언급URL : https://stackoverflow.com/questions/42152937/vue-2-about-nexttick