javascript - Les données dans Vue sont obtenues via Ajax, puis Vue est instanciée. Comment contrôler que la requête Ajax soit exécutée d'abord après le chargement de la page, puis instancier Vue une fois la requête réussie ?

Question

Les données dans Vue sont obtenues via Ajax, puis Vue est instanciée.
Comment contrôler que la requête Ajax soit exécutée d'abord après le chargement de la page, puis instancier Vue une fois la requête réussie ?

Answer 1

L'événement onload est lié à la requête Ajax et Vue est instanciée lors du rappel réussi.

Answer 2

J'ai vu une question similaire sur Baidu hier.
Je voudrais demander d'où elle vient ?

Vous voulez savoir pourquoi vous faites cela ?

Ma réponse est : ce n’est pas recommandé.

Answer 3

Vous pouvez demander en création,

Il est préférable de ne pas laisser la page attendre les demandes, sinon elle sera vide,

Lors de la création, si vous n'arrivez toujours pas à obtenir le résultat après montage, vous pouvez demander une animation de chargement

Ne laissez pas la page attendre la demande avant le rendu. Si la vitesse Internet de l'utilisateur n'est pas bonne et que l'animation de chargement n'est pas vue mais qu'elle est vide, la première chose à laquelle vous penserez est le problème avec le site Web. il y a une animation de chargement, vous saurez qu'elle attend la demande

Utilisez l'animation de chargement pour faciliter la compréhension des utilisateurs

Answer 4

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

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

Attendez simplement que la requête aboutisse, puis exécutez la fonction et instanciez vue !

Answer 5

En fait, il s’agit d’une exigence très courante.

Vue peut être instanciée du premier coup, à ce moment 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() signifie exécuter la fonction à l'intérieur après le chargement de la page.
Écrivez quelques invites de chargement dans le beforeSend de jquery ajax. Si le succès efface les invites, alors s'il y a des données, elles seront instanciées. S'il n'y a pas de données, il vous demandera également si ce n'est pas le cas. erreurs. C'est celui que je viens d'écrire lors de mon récent stage. Je le trouve personnellement assez complet.

Answer 7

Ce n'est pas un problème technique, c'est un problème de conception de produit. Vous devriez peut-être demander à votre produit pourquoi il a un tel design.