vue-element-admin global loading waiting

Recent requirements:

Global loading, all interfaces should be able to manually control whether to display the loading waiting function

I searched Baidu and found that many of them are written in the interceptor. The loading method of element ui is called in the interceptor. Loading starts when the interface is requested, and loading is closed when the interface returns or the interface reports an error and throws an exception.

I changed this idea a bit because it is a little different from my needs. Our need is to manually control whether to display the loading waiting function. Since it is manual control, we must not call the loading method directly in the interceptor. One step forward, when calling the interface, we start to control whether to enable the loading method. I need to manually encapsulate the call of axios. I encapsulated axios when I developed it before. Code:

url: interface api,

data: parameters

dom: When passing class or id in html, you need to add './#', because loading will use the querySelector attribute method of js. This attribute is used to distinguish whether the loading wait is the whole page loading wait or a certain part of the dom loading wait. It is not necessary to pass it. The default is to wait for the whole page to load.

bool: distinguish whether to enable loading wait -- not required, default is to enable loading wait

In the picture, I encapsulate multiple types of axios. Not all requests need to be loaded and waited. The default get request here is to load some initial data, which does not need to be shown to customers.

I only added so many parameters in the post to distinguish whether loading and waiting are required and whether global and local loading and waiting are required. In addition, the axiosDownload request is a file stream type, which is a special request. It is distinguished to facilitate data processing in development. Basically, all of this part needs to be loaded and waited, because we need to tell customers that the data is being downloaded.

The method before requesting data is processed. After the request, the return method is almost the same as the one on the Internet and ends when the result is returned.

Get rid of some interfering elements and look directly at the essence of the interceptor

The principle of the interceptor is to intercept once when the request is initiated and once again when the request is returned. The loading wait has been processed before the interceptor intercepts. There is no need to call the loading wait again when requesting. You only need to call the end of the loading wait when returning the interception.

As shown below:

Let's take a look at the key loading and waiting method. This method is available on the Internet. This is basically borrowed from the method of the Internet master. It's been a while, and I forgot which master's code it was. I can't post the code of the master at the original address here. I hope that the master will not be angry when he sees it.

The method basically ends the global loading wait here

This is the end of this article about vue-element-admin global loading waiting. For more related vue-element-admin global loading content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!