javascript - The data in Vue is obtained through Ajax, and then Vue is instantiated. How to control the Ajax request to be executed first after the page is loaded, and then instantiate Vue after the request is successful?

Question

The data in Vue is obtained through Ajax, and then Vue is instantiated.
How to control the Ajax request to be executed first after the page is loaded, and then instantiate Vue after the request is successful?

Answer 1

The onload event is bound to the Ajax request, and Vue is instantiated in the successful callback.

Answer 2

I saw a similar question on Baidu yesterday.
I would like to ask where it came from?

Want to know why you do this?

My answer is: This is not recommended.

Answer 3

You can request in created,

It is best not to let the page wait for requests, otherwise it will be blank,

When creating, if you still can’t get the result after being mounted, you can request a loading animation

Don’t let the page wait for the request before rendering. If the user’s Internet speed is not good and the loading animation is not visible but a blank page, the first thing that will come to mind is the problem with the website. Only if there is a loading animation will you know that it is waiting for the request

Use loading animation to make it easier for users to understand

Answer 4

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

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

Just wait until the request is successful, then execute the function and instantiate vue!

Answer 5

Actually, this is a very common requirement.

Vue can be instantiated at the first time. At this time, the data can have no value. A prompt such as loading or "loading" will be displayed on the interface. At the same time, a data request will be initiated in the created hook of the instance. After getting the data Just assign a value to the instance, 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() means executing the function inside after the page is loaded.
Write some loading prompts in the beforeSend of jquery ajax. If success clears the prompts, then if there is data, it will be instantiated. If there is no data, it will prompt if it is not. It will also give prompts for request errors. This is the one I just wrote during my recent internship. I personally feel that it is quite complete.

Answer 7

This is not a technical issue, this is a product design issue. Maybe you should ask your product why it has such a design.