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}}确实有用。这给了我以下错误：

获取http://localhost:8000/getShop/undefined 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
        })
      },
}
.....

Answer 1

我认为您对nextTick所做的事情的理解是不正确的。如果您阅读documentation，则表示您传递给nextTick函数的回调将在下一次DOM更新后执行。

假设您有一个属性，可以使用v-if指令确定DOM中是否存在元素。如果更改属性的值以使元素存在于DOM中，则可能必须等待Vue处理更改并更新DOM，然后才能获取该元素的引用，例如。在这种情况下，您应该使用Vue.nextTick来确保在您想要查询DOM以获取该元素时，它实际上是存在的。

您的方案与DOM没有任何关系。

您有2个异步HTTP调用要一个接一个地执行，因为第二个依赖于第一个的结果。您的原始实现和第三个（EDIT＃2）是不稳定的，因为在解除第二个请求之前您没有确保第一个HTTP请求完成，这解释了为什么您没有设置vm.user.id的错误。

您的第二个实现（编辑＃1）更正确，因为第二个HTTP请求在第一个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。我还建议你阅读MDN docs on Promises。

Vue 2关于nextTick

1 个答案: