Vue 2 О nextTick

Question

Я читал, что 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/undefined 404 (Not Found)

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 Если я что-то вроде этого он не будет работать COz 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 
     }) 
     }, 
} 
..... 

Answer 1

Я думаю, что ваше понимание того, что делает nextTick, неверно. Если вы читаете documentation, в нем говорится, что обратный вызов, который вы передаете функции nextTick, будет выполнен после следующего обновления DOM.

Предположим, что у вас есть свойство, которое определяет, существует или нет элемент в DOM с директивой v-if. Если вы измените значение свойства, чтобы этот элемент существовал в DOM, вам, возможно, придется ждать, пока Vue обработает изменение и обновит DOM, прежде чем вы сможете захватить ссылку на этот элемент, например. В этом случае вы должны использовать Vue.nextTick, чтобы убедиться, что к тому моменту, когда вы хотите запросить DOM для получения этого элемента, он действительно существует.

Ваш сценарий не имеет ничего общего с DOM.

У вас есть 2 асинхронных HTTP-вызова, которые вы хотите выполнить один за другим, потому что второй полагается на результат первого. Ваша первоначальная реализация и третья (EDIT # 2) являются шелушащими, потому что вы не убедитесь, что первый HTTP-запрос завершен, прежде чем запускать второй, что объясняет, почему вы получаете ошибки о vm.user.id, которые не установлены.

Ваша вторая реализация (EDIT # 1) правильна, потому что второй запрос HTTP запускается после завершения первого. Тем не менее, я хотел бы предложить небольшое изменение:

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 вызова. Мне нравится этот подход, потому что он имеет вложенные then s. Я также предлагаю вам прочитать MDN docs on Promises.