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?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-06-26 10:50:56
0
7
873

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?

曾经蜡笔没有小新
曾经蜡笔没有小新

Antworte allen(7)
習慣沉默

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

伊谢尔伦

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

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

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

滿天的星座

你可以在created中请求、

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

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

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

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

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

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

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

学习ing

其实这是很常见的需求。

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

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

阿神

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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!