javascript – Die Daten in Vue werden über Ajax abgerufen und dann in Vue instanziiert. Wie steuere ich, dass die Ajax-Anfrage zuerst ausgeführt wird, nachdem die Seite geladen wurde, und instanziiere dann Vue, nachdem die Anfrage erfolgreich ist?

Question

Die Daten in Vue werden über Ajax abgerufen und dann wird Vue instanziiert.
Wie steuere ich, dass die Ajax-Anfrage zuerst ausgeführt wird, nachdem die Seite geladen wurde, und instanziiere dann Vue, nachdem die Anfrage erfolgreich ist?

Answer 1

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

Answer 2

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

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

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

Answer 3

你可以在created中请求、

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

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

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

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

Answer 4

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

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

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

Answer 5

其实这是很常见的需求。

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

Answer 6

$(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也给提示，这是最近实习刚写的一个，个人感觉也蛮完整了。

Answer 7

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