Vue中的data数据通过Ajax获取,然后实例化Vue。如何控制让页面加载完毕后先执行Ajax请求,请求成功后再实例化Vue?

Vue中的data数据通过Ajax获取,然后实例化Vue。
如何控制让页面加载完毕后先执行Ajax请求,请求成功后再实例化Vue?

回答:

onload事件绑定Ajax请求,请求成功回调中再实例化Vue就可以了。

回答:

昨天在百度知道那里看到类似的问题,
想问一下是那里过来的吗?

想知道你为什么要这样做?

我的答案是:不建议这样做。

回答:

你可以在created中请求、

最好不要让页面等待请求、不然会有空白、

created的时候请求如果到了mounted还拿不到结果、可以出loading动画

不要让页面等待请求之后再渲染、万一用户网速不好、却看不到loading动画而是一片空白、首先会想到网站的问题、如果有loading动画、才会知道、是在等待请求

用loading动画、更让用户容易理解

回答:

$.ajax({
    url: "...", 
    ...
    success: function(){
        active();
    }
});

function active(){
     let app=new Vue({
        data:{
        },
        ...
    })
}

就是等请求成功了,再执行函数,执行vue的实例化!

回答:

其实这是很常见的需求。

Vue可以在第一时间实例化,这时的data可以没有值,界面上展示loading或”正在加载”之类的提示,同时在实例的created钩子中发起数据请求,得到数据后给实例赋值就行了,vm.data = ajaxData

回答:

$(document).ready(function() {
    $.ajax({
        type: "get",
        async: false,
        url: '',
        dataType: "JSONP",
        beforeSend: function(){
            $("#content .loading").html("数据加载中<img class='loading-gif' src='images/loading.gif'/>");
        },
        success: function (data) {
            if(data.orders.length != 0){
                $("#content .loading").empty();
                // 实例化
            }
            else{
                $("#content .loading").html("暂时没有你的数据哦");
            }
        },
        error: function (message) {
            $("#content .loading").html("数据请求失败,请稍候再试");
        }
    });
});

$(document).ready()表示页面加载后执行里面的函数。
jquery ajax的beforeSend里写点加载提示,success就清空提示然后有数据就实例化没有就提示,请求error也给提示,这是最近实习刚写的一个,个人感觉也蛮完整了。

回答:

这个不是技术问题,这个是产品设计问题,或许你应该问一下你们产品,为什么会有这样的设计。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注