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?
曾经蜡笔没有小新
2017-06-26 10:50:56
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?
The onload event is bound to the Ajax request, and Vue is instantiated in the successful callback.
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.
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
Just wait until the request is successful, then execute the function and instantiate vue!
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 thecreated
hook of the instance. After getting the data Just assign a value to the instance,vm.data = ajaxData
.$(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.
This is not a technical issue, this is a product design issue. Maybe you should ask your product why it has such a design.