如果ajax在transition.next()之前使用Vue.js完成,则至少等待2秒

Question

如果在转换之前完成ajax,我需要显示微调器至少2秒.

我有以下但不工作

route: {
    data(transition) {

        this.getDelayedData();
        transition.next();
       }
    },

methods:{   
   getSliders(){
            this.$http.get('/api/sliders/getsliders')
                   .then(sliders =>{this.sliders = sliders.data

              });
        },
   getPosts(){
            this.$http.get('/api/posts/getposts')
                    .then(posts =>{this.posts = posts.data.data

                    });
        },
   getDelayedData(){
       function timer() {
           var dfd = $.Deferred();
           setTimeout(function()
                    {
                    console.log("done");
                    }, 2000,dfd.resolve);
                    return dfd.promise();
                    }
           $.when( this.getPosts(), this.getSliders(),timer() )
                .done();
       }
    }

我试图实现读这篇文章的代码但是$ .when函数不会等到setTimeout函数执行完毕.

Answer 1

您已经接受了我的其他答案,但我认为代码可以得到显着改善,如下所述:

通常建议不要混合jQuery使用Vue.js,因为这两个修改DOM:

• Vue.js对于它的模型视图绑定,使用其Reactivity System非常强大的DOM

• jQuery如果您在某处使用某些快速解决方案,可以修改使用class或id选择器.

您最终会花费大量时间来调试前端问题,从而将重点放在业务需求上.此外,Vue.js已经需要现代浏览器,因此从技术上讲jQuery,浏览器兼容性并不高 - 这是它的主要目标.

所以,如果你愿意离开jQuery,这是另一种方法:

getDelayedData() {
    // Create a new Promise and resolve after 2 seconds
    var myTimerPromise = new Promise((resolve, reject) => {
        setTimeout(() => {
            // callback function for timer, gets called after the time-delay
            // Your timer is done now. Print a line for debugging and resolve myTimerPromise
            console.log("2 seconds up, resolving myTimerPromise")
            resolve();
        }, 2000);  // This promise will be resolved in 2000 milli-seconds
    });

    // Start displaying ajax spinner before fetching data
    this.displaySpinner = true;

    // Fetch data now, within Promise.all()
    Promise.all([myTimerPromise, this.getPosts(), this.getSliders()]).then( () => {
        // Hide the spinner now. AJAX requests are complete, and it has taken at least 2 seconds.
        this.displaySpinner = false;
        console.log("Data fetched for sliders and posts");
    });
}

上面的代码也要求你拥有this.displaySpinner,激活或停用你的ajax微调器.或者您可能有其他方式这样做.

你仍然需要return this.$http.get(..)从你getPosts和getSliders方法.

注意:我没有测试过上面的代码,如果需要你需要调试.它应该工作,基于我对Promise.all()的理解,如本参考文档中所述:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

一旦开始工作,您可以简化myTimerPromise如下:

getDelayedData() {
    // Create a new Promise and resolve after 2 seconds
    var myTimerPromise = new Promise((resolve, reject) => {
        setTimeout(resolve, 2000);  // "resolve" is already a function, no need for another anonymous function here
    });
    // and do the other stuff here...
}

我更喜欢这种方法,因为它避免了jQuery.然后我的Vue.js应用程序可以小到30 KB gzip,而如果我捆绑jQuery,它可以超过100 KB.这只是个人选择:-)