A method and device for creating a progress bar and a method for displaying a progress bar

Abstract

An embodiment of the present application provides a method for creating a progress bar, a device, and a method for displaying a progress bar. The method includes: triggering a process of dynamically creating a progress bar component through a root component of a project, where the project includes a platform development project, the progress bar component is used to represent the execution progress of at least one asynchronous request, and the progress bar component is used to set the attributes of the progress bar displayed on the page; when it is confirmed that the results of each asynchronous request in the at least one asynchronous request are all returned, a message for closing the progress bar displayed on the page is sent through the root component of the project, and the attributes of the progress bar are set through the progress bar component. Through this method, the processing progress of multiple asynchronous requests can be displayed through a progress bar, the amount of code development can be saved, and the processing speed can be effectively improved.

Description

Technical Field

[0001] This application relates to the field of interface development. Specifically, embodiments of this application relate to a method for creating a progress bar, a device, and a method for displaying a progress bar. Background Art

[0002] When an application processes a large amount of data, it sometimes takes a long time and requires the user to wait. With the development of Internet technology, in order to improve the interface friendliness and let the user understand the current progress of the ongoing task and other information, a browser generally displays a progress bar for a request on the current page. For example, when a user sends a request to download a file through a browser page, the related technology uses a progress bar to display the current download progress (i.e., the progress execution of a current request or an operation).

[0003] The related technology has at least the following technical defects: The current technology for displaying a progress bar sets the display of the web - side progress bar when a certain request is sent and closes the progress bar when the processing of the request ends. That is to say, the progress bar of the existing technology is used to represent the start and end of the execution process of a single request triggered through the page, and it is impossible to display the execution progress of multiple requests triggered through the page by the progress bar. Summary of the Invention

[0004] The purpose of the embodiments of this application is to provide a method for creating a progress bar, a device, and a method for displaying a progress bar. Through this method, the processing progress of multiple asynchronous requests can be displayed by the progress bar, the amount of code development can be saved, and the processing speed can be effectively improved.

[0005] In a first aspect, some embodiments of this application provide a method for creating a progress bar. The method includes: triggering a process of dynamically creating a progress bar component through the root component of a project, where the project includes a platform development project, the progress bar component is used to represent the execution progress of at least one asynchronous request, and the progress bar component is used to set the attributes of the progress bar displayed on the page; when it is confirmed that the results of each asynchronous request in the at least one asynchronous request have all been returned, a message for closing the progress bar displayed on the page is sent through the root component of the project, and the attributes of the progress bar are set by the progress bar component.

[0006] Some embodiments of the present application dynamically create and destroy the required progress bar components in the root component of the project, which significantly reduces the development difficulty and the amount of code development compared with the solution of directly writing the progress bar code at the required position in the prior art. Moreover, in the embodiments of the present application, after the root component confirms that it has received the return values from all asynchronous requests, it issues a notification to close the progress bar, which can effectively control the progress bar closing operation in scenarios where multiple asynchronous requests are generated for page opening and the like.

[0007] In some embodiments, the process of triggering the dynamic creation of the progress bar component by the root component of the project includes: after the root component of the project responds to receiving the display progress bar messages of each asynchronous request in the at least one asynchronous request, it issues a notification to create the progress bar component.

[0008] Some embodiments of the present application can respond to as many asynchronous requests as possible to the greatest extent by creating a progress bar notification only after confirming that it has received the display progress bar messages of each asynchronous request, and then display the total execution progress of all asynchronous requests through one progress bar.

[0009] In some embodiments, after issuing the notification to create the progress bar component, the method further includes: injecting the pre-encapsulated progress bar component.

[0010] Some embodiments of the present application can improve the development speed by creating the progress bar component through the direct injection method.

[0011] In some embodiments, before the process of triggering the dynamic creation of the progress bar component by the root component of the project, the method further includes: selecting at least one of two alternative processing modules as the current request processing module according to the type or number of the at least one asynchronous request, where the alternative processing module is used to generate the display progress bar message and the close progress bar message; if the root component confirms that it has received the display progress bar messages issued by all modules included in the current request processing module, it issues a notification to create the progress bar component.

[0012] Some embodiments of the present application can generate corresponding progress bars by setting two types of processing units to respond to different types of asynchronous requests as many as possible.

[0013] In some embodiments, the two alternative processing modules include a first alternative processing module based on a first function and a second alternative processing module based on an interceptor. The first function is used to record the return values of different asynchronous requests in more than one asynchronous request and send a message to close the progress bar when the return values of different asynchronous requests in the more than one asynchronous request are all returned. The first function is also used to send the message to display the progress bar. The interceptor is used to identify the asynchronous requests that need to display the progress bar and send the message to display the progress bar and the message to close the progress bar. Among them, selecting at least one of the two alternative processing modules as the current request processing module according to the type of the at least one asynchronous request includes: if it is confirmed that the at least one asynchronous request includes a table request and a non-table request, both the first alternative processing module and the second alternative processing module are used as the current request processing module; or, if it is confirmed that none of the at least one asynchronous requests is a table request, the first alternative processing module is used as the current request processing module.

[0014] Some embodiments of the present application set up a dedicated interceptor to process table requests, while different processing modules are used for other types of asynchronous requests. Because the different processing modules can record the return values of multiple asynchronous requests at the same time (used to indicate that the corresponding requests have been executed), a message to close the progress bar can be sent at an appropriate time.

[0015] In some embodiments, the first function is a forkjoin function and the interceptor is an http interceptor.

[0016] In some embodiments, the two alternative processing modules include a first alternative processing module based on a first function and a second alternative processing module based on an interceptor. The first function is used to record the return values of different asynchronous requests in more than one asynchronous request and send a message to close the progress bar when the return values of different asynchronous requests in the more than one asynchronous request are all returned. The first function is also used to send the message to display the progress bar. The interceptor is used to identify the asynchronous requests that need to display the progress bar and send the message to display the progress bar and the message to close the progress bar. Among them, selecting at least one of the two alternative processing modules as the current request processing module according to the number of the at least one asynchronous request includes: if it is confirmed that the number of the at least one asynchronous request is one, the second alternative processing module is used as the current request processing module.

[0017] Some embodiments of the present application use an interceptor to generate messages to display the progress bar and close the progress bar for the case of one asynchronous request.

[0018] In some embodiments, communication between the first alternative processing module, the second alternative processing module, and the root component is based on the subscriber and observer pattern.

[0019] Some embodiments of the present application use the subscriber-observer pattern to enable each alternative processing module to send display progress bar messages and close progress bar messages to the root component in real time, so that the root component further determines whether to finally send a notification to create a progress bar component based on the generation time and execution status of these messages.

[0020] In some embodiments, after the process of triggering the dynamic creation of a progress bar component by the root component of the project, the method further includes: setting a timer according to the estimated completion time, where the progress bar component can determine the stage and refresh rate of the progress bar displayed on the page based on the timer.

[0021] Some embodiments of the present application control the stage and refresh rate of the progress bar by introducing a timer.

[0022] In some embodiments, before the process of triggering the dynamic creation of a progress bar component by the root component of the project, the method further includes: receiving and storing, by the root component, progress bar display information and an estimated completion time from a server, where the server is configured to return return values for each asynchronous request in response to all asynchronous requests included in the at least one asynchronous request, and the progress bar component is configured to control the display process of the progress bar based on the progress bar display information and the estimated completion time.

[0023] Some embodiments of the present application enhance the authenticity of the progress bar displayed on the page by using the estimated completion time and progress bar display information from the server.

[0024] In some embodiments, before the process of triggering the dynamic creation of a progress bar component by the root component of the project, the method further includes: receiving, by the root component, an estimated completion time and custom progress bar attribute information from a server, where the server is configured to return return values for each asynchronous request in response to all asynchronous requests included in the at least one asynchronous request, and the progress bar component is configured to control the display process of the progress bar based on the custom progress bar attribute information and the estimated completion time.

[0025] Some embodiments of the present application can enhance the difference of the progress bar displayed on the page by obtaining progress bar display information in a custom manner.

[0026] In some embodiments, the method further includes: sending a message about the stage of the acquisition request through the root component; receiving, through the root component, response information returned from the server side, where the response information includes: the total number of request steps, the current stage of the request, and the estimated completion time of the request; controlling, through the progress bar component and the response information, the description information of the current request stage of the progress bar being displayed on the page; and / or, controlling, through the progress bar component and the response information, the refresh rate of the progress bar being displayed on the page.

[0027] In some embodiments of the present application, the information on the progress bar can be modified in real time by receiving information from the server side, which can increase the authenticity of the progress bar.

[0028] In some embodiments, after sending, through the root component of the project, a message to close the progress bar displayed on the page, the method further includes: confirming that the progress bar component has received a close notification from the root component, and confirming that the progress bar displayed on the current page has reached 100%, then sending a control instruction to close the progress bar to the page, where the page responds to the control instruction to close the progress bar.

[0029] In some embodiments of the present application, after receiving the close notification, it is necessary to confirm again that the progress bar has reached 100% before closing the progress bar to improve the customer experience.

[0030] In some embodiments, after sending, through the root component of the project, a message to close the progress bar displayed on the page, the method further includes: confirming that the progress bar component has received a close notification from the root component, and confirming that the progress bar displayed on the current page has not reached 100%, then sending an instruction to accelerate the progress of the progress bar to the page so that the progress bar is loaded to 100%; sending a control instruction to close the progress bar to the page, where the page responds to the control instruction to close the progress bar.

[0031] In some embodiments of the present application, if it is confirmed that the progress bar has not reached 100% after receiving the close notification, it is necessary to first let the progress bar accelerate to 100% before closing the progress bar to improve the customer experience.

[0032] In some embodiments, after sending the control instruction to close the progress bar to the page, the method further includes: destroying the progress bar component and sending a destruction notification to the root component.

[0033] In some embodiments of the present application, the progress bar component will be immediately destroyed after the progress bar is closed, avoiding occupying too much memory.

[0034] In some embodiments, after destroying the progress bar component, the method further includes: controlling the page to pop up a window for displaying operation result information.

[0035] Some embodiments of the present application also notify the execution results of multiple asynchronous requests by means of a page pop-up window.

[0036] In a second aspect, some embodiments of the present application provide a device for creating a progress bar. The device includes: a progress bar creation module configured to trigger a process of dynamically creating a progress bar component through a root component of a project, where the project includes a platform development project, the progress bar component is used to represent the execution progress of at least one asynchronous request, and the progress bar component is used to set the attributes of the progress bar displayed on the page; a progress bar closing module configured to, when it is confirmed that the results of each asynchronous request in the at least one asynchronous request have been returned, send a message to close the progress bar displayed on the page through the root component module of the project, and the attributes of the progress bar are set by the progress bar component.

[0037] In a third aspect, some embodiments of the present application provide a method for displaying a progress bar. The method includes: generating and sending a page opening request in response to a user's input operation, where the page opening request is parsed into multiple asynchronous requests, and the page opening request is used to request display elements of a page from a server side; generating and displaying a progress bar for the multiple asynchronous requests or closing the progress bar on the page by means of the device as described in the second aspect embodiment, where the progress bar is used to represent the opening progress of the page.

[0038] In a fourth aspect, some embodiments of the present application provide a computer storage medium, on which a computer program is stored. When the program is executed by a processor, the method described in any one of the first aspect and the third aspect embodiments can be implemented.

[0039] In a fifth aspect, some embodiments of the present application provide an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, the method described in any one of the first aspect and the third aspect embodiments can be implemented. Description of the Drawings

[0040] To more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings required to be used in the embodiments of the present application. It should be understood that the following drawings only show some embodiments of the present application, and therefore should not be regarded as limiting the scope. For those of ordinary skill in the art, without creative efforts, other related drawings can also be obtained based on these drawings.

[0041] Figure 1 System block diagram of the development progress bar and application development results provided by the embodiments of the present application;

[0042] Figure 2 One of the method flowcharts for creating a progress bar provided by the embodiments of the present application;

[0043] Figure 3 Another method flowchart for creating a progress bar provided by the embodiments of the present application;

[0044] Figure 4 Block diagram of the device components for creating a progress bar provided by the embodiments of the present application;

[0045] Figure 5 Method flowchart for displaying a progress bar provided by the embodiments of the present application;

[0046] Figure 6 Schematic diagram of the composition of an electronic device provided by the embodiments of the present application. Detailed implementation manners

[0047] Next, the technical solutions in the embodiments of the present application will be described with reference to the accompanying drawings in the embodiments of the present application.

[0048] It should be noted that similar reference numerals and letters denote similar items in the following drawings. Therefore, once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings. At the same time, in the description of the present application, the terms "first", "second", etc. are only used for distinguishing descriptions and cannot be construed as indicating or implying relative importance.

[0049] Next, the technical defects existing in the existing progress bar development field discovered by the inventors in their research will be briefly elaborated.

[0050] First, in actual applications, multiple asynchronous requests are sent simultaneously on a single page. Under the existing solutions, when designers display the progress bar, it is often for a single request and cannot meet the requirement of closing the progress bar after all request return results of the page are obtained. Moreover, the existing technology requires adding code at each position where the progress bar needs to be displayed, increasing the coding workload.

[0051] Second, the existing progress bars are generally set to a fixed number of segments to simulate real requests. This solution does not meet the requirement of dynamically setting the segments and the increasing rate of the progress bar according to actual requests.

[0052] Third, the completion time of the existing progress bar is an estimated value and there is an inaccurate phenomenon. Often, when the percentage has not reached 100%, the request has already ended and the progress bar is closed, which will bring an unrealistic experience effect to users.

[0053] That is to say, the current technologies for displaying progress bars are often targeted at single requests, and web page display code and logic processing code need to be added at the positions of page components where progress bars need to be displayed. Moreover, the increase in the percentage of the progress bar is not realistic. Some embodiments of the present application can at least meet the requirements for displaying progress bars for multiple requests or a single request, and reduce the code workload.

[0054] For example, the method for creating a progress bar provided in some embodiments of the present application includes: in the root component of a project, adding progress bar display settings to all server asynchronous requests sent by the page, closing the progress bar after all request return results of the page where the progress bar needs to be displayed, and the progress bar supports real-time refreshing of the current request stage description information and the refreshing rate according to the request stage.

[0055] Please refer to Figure 1 , Figure 1 a system for developing a progress bar and the results of application development, the system includes: an application client 100, a development client 200, and a server end 300.

[0056] The development client 200 includes a display 201, a keyboard 203, and a host 202. During the process of developing the progress bar, the developer 20 creates the root component of a project through the display 201, and then receives the display progress bar message and the close progress bar message from multiple requests or a single request through the root component, and after receiving these messages, sends a notification for creating a progress bar component according to a preset duration, thereby triggering the process of creating a progress bar component. It should be noted that in order to adapt to the development of progress bars for multiple asynchronous requests in some embodiments of the present application, a notification for closing the progress bar needs to be generated only after the close progress bar message is received through the root component, and the close progress bar message is generated only after it is confirmed that the return values of all asynchronous requests have been returned. Therefore, the embodiments of the present application can generate progress bars that can handle multiple asynchronous requests simultaneously.

[0057] It can be understood that the progress bar module developed for a project includes: the root component of the project, a progress bar component created by means of the root component, and at least one processing module that receives multiple asynchronous requests and confirms whether to generate a display progress bar message or a close progress bar message to be sent to the root component. For specific results, please refer to the following description. To avoid repetition, no more details will be provided here.

[0058] In some embodiments of the present application, the server 300 is used to return the required development information to the development client. For example, the server 300 is used to receive an asynchronous request sent from the development client (or the application client 100), and in response to the asynchronous request, return a request result to the development client (or the application client 100). In some embodiments of the present application, the server 300 is used to receive information about the stage where the acquisition request sent from the development client (or the application client 100) is located, and in response to the request information, return the total number of request steps, the current stage where the request is located, and the estimated completion time of the request to the development client (or the application client 100). After that, the development client will control the display attributes of the progress bar displayed on the page of the application client 100 based on this information. For example, adjust the display information of the progress bar to make it closer to the actual processing stage, and adjust the loading speed of the progress bar to more realistically reflect the actual processing speed.

[0059] It can be understood that, in some embodiments of the present application, if the project is a platform development project, the server 300 at least further needs to return various element information required for page display to the application client or the development client, and these element information are the data requested by each asynchronous request.

[0060] After the development of the progress bar is completed, the developed program can be deployed on the development client 200. Then, during specific application, the browser 110 of the application client 100 receives multiple asynchronous requests triggered by the user 10, and then inputs the multiple asynchronous requests into the program developed on the development client 200, creates a progress bar for the multiple asynchronous requests and displays the progress bar on the page of the browser 110, and closes the progress bar displayed on the page of the browser 110 after all the processing results (or called return values) of the multiple asynchronous requests are returned. It can be understood that the server 300 is also used to generate and feedback the processing results for each asynchronous request in response to the multiple asynchronous requests during specific application, and the development client is used to assist in generating the progress bar displayed on the page of the browser 110 and closing the progress bar during specific application.

[0061] The following Figure 2 exemplarily elaborates on the method for creating a progress bar executed on the development client 200.

[0062] Such as Figure 2As shown in the figure, some embodiments of the present application provide a method for creating a progress bar, and the method includes: S101, triggering a process of dynamically creating a progress bar component through the root component of the project, where the project includes a platform development project, the progress bar component is used to represent the execution progress of at least one asynchronous request, and the progress bar component is used to set the attributes of the progress bar displayed on the page; S102, when it is confirmed that the results of all asynchronous requests in the at least one asynchronous request are returned, a message for closing the progress bar displayed on the page is sent through the root component of the project, and the attributes of the progress bar are set by the progress bar component.

[0063] That is to say, compared with the prior art of directly writing progress bar code at the required position, dynamically creating and destroying the required progress bar component in the root component of the project in some embodiments of the present application significantly reduces the development difficulty and the amount of code development. Moreover, in the embodiments of the present application, the progress bar closing operation can be effectively controlled in scenarios where multiple asynchronous requests are generated for page opening and the like by sending a progress bar closing notification only after the root component confirms that it has received return values from all asynchronous requests.

[0064] It should be noted that before executing S101, it is also necessary to obtain messages for displaying the progress bar of at least one asynchronous request and messages for closing the progress bar corresponding to at least one asynchronous request with the help of multiple processing modules, and trigger the creation or destruction of the progress bar component through these messages.

[0065] The implementation processes of the above steps are described below by way of example.

[0066] First, the process of generating messages for displaying the progress bar of all asynchronous requests in at least one asynchronous request and messages for closing the progress bar is described by way of example.

[0067] That is to say, in some embodiments of the present application, before executing S101, the method further includes: selecting at least one of two alternative processing modules as the current request processing module according to the type or number of the at least one asynchronous request, where the alternative processing module is used to generate messages for displaying the progress bar and messages for closing the progress bar; if the root component confirms that it has received the messages for displaying the progress bar sent by all modules included in the current request processing module, a notification for creating the progress bar component is sent. That is to say, some embodiments of the present application can generate corresponding progress bars for as many different types of asynchronous requests as possible by setting two types of processing units to generate messages for displaying the progress bar in response to different types of asynchronous requests.

[0068] The types of alternative processing modules are described below by way of example.

[0069] For example, in some embodiments of the present application, the two alternative processing modules include a first alternative processing module based on a first function and a second alternative processing module based on an interceptor. The first function is used to record the return values of different asynchronous requests in more than one asynchronous request and send a message to close the progress bar when the return values of different asynchronous requests in the more than one asynchronous request are all returned, and the first function is also used to send the message for displaying the progress bar. The interceptor is used to identify the asynchronous requests that need to display the progress bar and send the message for displaying the progress bar and the message for closing the progress bar. Correspondingly, selecting at least one of the two alternative processing modules as the current request processing module according to the type of the at least one asynchronous request includes: if it is confirmed that the at least one asynchronous request includes a table request and a non-table request, both the first alternative processing module and the second alternative processing module are used as the current request processing module; or, if it is confirmed that none of the at least one asynchronous requests is a table request, the first alternative processing module is used as the current request processing module. For example, the first function is a forkjoin function and the interceptor is an http interceptor.

[0070] That is to say, some embodiments of the present application set up a dedicated interceptor to process table requests, while for other types of asynchronous requests, different processing modules are used. Because the different processing modules can record the return values of multiple asynchronous requests (used to indicate that the corresponding requests have been executed) at the same time, a message to close the progress bar can be sent at an appropriate time.

[0071] For example, in some embodiments of the present application, the two alternative processing modules include a first alternative processing module based on a first function and a second alternative processing module based on an interceptor. The first function is used to record the return values of different asynchronous requests in more than one asynchronous request and send a message to close the progress bar when the return values of different asynchronous requests in the more than one asynchronous request are all returned, and the first function is also used to send the message for displaying the progress bar. The interceptor is used to identify the asynchronous requests that need to display the progress bar and send the message for displaying the progress bar and the message for closing the progress bar. Wherein, selecting at least one of the two alternative processing modules as the current request processing module according to the number of the at least one asynchronous request includes: if it is confirmed that the number of the at least one asynchronous request is one, the second alternative processing module is used as the current request processing module. That is to say, some embodiments of the present application use an interceptor to generate messages for displaying the progress bar and closing the progress bar for the case of one asynchronous request.

[0072] In some embodiments, the first alternative processing module, the second alternative processing module and the root component communicate with each other based on the subscriber and observer mode. That is, some embodiments of the present application use the subscriber observer mode to implement each alternative processing module to send a display progress bar message and a close progress bar message to the root component in real time, so that the root component further determines whether to finally issue a notification to create a progress bar component based on the generation time and execution status of these messages.

[0073] In order to further improve the authenticity and diversity of the progress bar displayed on the page, the method further includes the following process before executing S101.

[0074] For example, in some embodiments of the present application, before executing S101, the method further includes: receiving and storing progress bar display information and estimated completion time from the server through the root component, wherein the server is used to return a return value for each asynchronous request in response to all asynchronous requests included in the at least one asynchronous request, and the progress bar component is configured to control the display process of the progress bar according to the progress bar display information and the estimated completion time. Some embodiments of the present application improve the authenticity of the progress bar displayed on the page through the estimated completion time and progress bar display information from the server.

[0075] For example, in some embodiments of the present application, before the process of dynamically creating a progress bar component is triggered by the root component of the project, the method further includes: receiving an estimated completion time and customized progress bar attribute information from the server through the root component, wherein the server is used to return a return value for each asynchronous request in response to all asynchronous requests included in the at least one asynchronous request, and the progress bar component is configured to control the display process of the progress bar according to the customized progress bar attribute information and the estimated completion time. Some embodiments of the present application can obtain the progress bar display information in a customized manner to enhance the diversity of the progress bar displayed on the page.

[0076] The implementation process of S101 is described below by way of example.

[0077] In some embodiments of the present application, S101 exemplarily includes: the root component of the project issues a notification of creating the progress bar component in response to receiving a display progress bar message from each asynchronous request in the at least one asynchronous request. Some embodiments of the present application can respond to as many asynchronous requests as possible to the greatest extent by creating a progress bar notification only after confirming receipt of a display progress bar message for each asynchronous request, and then display the total execution progress of all asynchronous requests through a progress bar.

[0078] It should be noted that, in some embodiments of the present application, after the notification of creating the progress bar component is issued, the method further includes: injecting the pre-packaged progress bar component. Some embodiments of the present application can improve the development speed by creating a progress bar component by direct injection. In some embodiments of the present application, after the process of dynamically creating a progress bar component is triggered by the root component of the project, the method further includes: setting a timer according to the estimated completion time, wherein the progress bar component can determine the stage and refresh rate of the progress bar displayed on the page according to the timer. Some embodiments of the present application control the stage and refresh rate of the progress bar by introducing a timer.

[0079] Assuming that the page is already in the process of displaying the progress bar, in order to more realistically reflect the response progress of each asynchronous request, the method for creating a progress bar described in some embodiments of the present application also includes the following process.

[0080] For example, in some embodiments of the present application, the method for creating a progress bar further includes: sending a message to obtain the stage of the request through the root component; receiving response information returned from the server through the root component, wherein the response information includes: the total number of request steps, the stage of the current request, and the estimated completion time of the request; controlling the current request stage description information of the progress bar being displayed on the page through the progress bar component and the response information; and / or controlling the refresh rate of the progress bar being displayed on the page through the progress bar component and the response information. Some embodiments of the present application can increase the authenticity of the progress bar by modifying the information on the progress bar in real time through information received from the server.

[0081] Unlike the technical solution in the related art that closes the progress bar displayed on the page as soon as a notification to close the progress bar is received, some embodiments of the present application also require reconfirming the loading status of the progress bar after receiving the notification to close the progress bar and accelerating the progress bar to 100% when it is confirmed that the progress bar has not reached 100%, thereby improving the user experience.

[0082] For example, in some embodiments of the present application, after the root component of the project sends a message to close the progress bar displayed on the page, the method further includes: confirming that the progress bar component receives the closing notification from the root component and confirming that the progress bar displayed on the current page has reached 100%, then sending a control instruction to close the progress bar to the page, wherein the page responds to the control instruction and closes the progress bar. In some embodiments of the present application, after receiving the closing notification, it is necessary to confirm again that the progress bar has reached 100%, and then close the progress bar to improve customer experience.

[0083] For example, in some embodiments of the present application, after the root component of the project sends a message to close the progress bar displayed on the page, the method further includes: confirming that the progress bar component receives a closing notification from the root component, and confirming that the progress bar displayed on the current page has not been completed to 100%, then sending an instruction to accelerate the progress of the progress bar to load the progress bar to 100%; sending a control instruction to close the progress bar to the page, wherein the page responds to the control instruction and closes the progress bar. In some embodiments of the present application, after receiving the closing notification, if it is confirmed that the progress bar has not been completed to 100%, it is necessary to first accelerate the progress bar to 100%, and then close the progress bar to improve customer experience.

[0084] In order to reduce memory requirements, in some embodiments of the present application, the dynamically created progress bar component needs to be destroyed immediately.

[0085] For example, in some embodiments of the present application, after the control instruction to close the progress bar is issued to the page, the method further includes: destroying the progress bar component and issuing a destruction notification to the root component. In some embodiments of the present application, the progress bar component is destroyed immediately after the progress bar is closed to avoid occupying too much memory.

[0086] In order to improve user experience, in some embodiments of the present application, after destroying the progress bar component, the method further includes: controlling the page to pop up an operation result information pop-up window. Some embodiments of the present application also notify the execution results of multiple asynchronous requests by means of page pop-ups.

[0087] Combine the following Figure 3 The method for creating a progress bar in some embodiments of the present application is exemplified by taking the response process of multiple asynchronous requests generated during the page opening process as an example.

[0088] In the first step, the page sends an HTTP request, which may include one request or multiple requests.

[0089] The second step is to determine whether the http request is multiple requests or non-table type. If so, execute the third step, otherwise execute the fourth step.

[0090] The third step is to use the forkjoin function (ie, the function used by the first processing module).

[0091] Use the forkjoin function (which can accept multiple observables as parameters, then execute all observables in parallel, and the final result is the last output value of each observable) to put the return values of multiple server request interfaces sent by the page simultaneously in an array. While the http request is being sent, post a message notification to display the progress bar to the root component (that is, display the progress bar message, which is received by the root component of the project). When the return results for all requests have been returned, post a notification to close the progress bar message (that is, close the progress bar message, which is received by the root component of the project).

[0092] Step 4, http interceptor.

[0093] Create a response interceptor for http requests (the request interceptor is to perform some operations uniformly before the request is sent, such as adding a token to the request body; the response interceptor is after receiving the result, instead of directly exporting it immediately, but doing some processing on the response code and then returning the processed data to the page). Since the table data in the project is obtained by setting the url of the component and cannot be put into the forkjoin function, the requests and result returns for the table need to be processed separately in the interceptor, and notifications to display and close the progress bar are sent (that is, send a message to display the progress bar and a message to close the progress bar to the root component of the page). At the same time, notifications to display and close the progress bar for a single request are also sent in this interceptor.

[0094] Step 5, store data through the root component of the page. For example, this data includes the progress bar time and display information.

[0095] That is to say, if the root component of the project receives the initial display information and the estimated completion time for setting the progress bar, this data is stored first and used when creating the progress bar.

[0096] Step 6, when the root component of the project receives the message to display the progress bar from each alternative processing module, display the progress bar in the way of dynamically creating components. At the same time, if there is information in Step 5, set the display information and the estimated completion time through creating an instance of the progress bar component.

[0097] The code for creating a dynamic component is as follows: const componentFactory = this.resolver.resolveComponentFactory(component);

[0098] this.containerRef = this.container.createComponent(componentFactory);

[0099] Among them, component is a custom progress bar component.

[0100] It should be noted that in some embodiments of the present application, a web display progress bar component is created, which includes a moving image showing loading, current task information, and a progress percentage value. The component is also set with a parameter for receiving the total time required for the progress bar to complete the whole process, with a default value of 30 seconds. And a timer device for increasing the progress bar percentage. In some embodiments of the present application, after the progress bar component is created, a timer is set according to the estimated completion time. In some embodiments of the present application, when there are multiple task stages in certain background requests, a message of the current stage and the estimated completion time of the current stage can be published to the progress bar component when the task stage is changed. In some embodiments of the present application, after the progress bar component receives the message to modify the progress bar, the timer and the display information are reset according to the latest time.

[0101] In the seventh step, when the root component of the project receives the message to close the progress bar, it first determines whether the progress of the current progress bar has reached 100%. If it has reached, the progress bar is immediately closed and the component is destroyed; if it has not reached, the progress is quickly increased to 100%, and then the progress bar is closed and the component is destroyed.

[0102] In the eighth step, if the current request needs to display an operation result pop-up window, when there is a progress bar, this operation pop-up window is first blocked, and after the progress bar is destroyed, the current operation result is displayed and subsequent page operations are performed.

[0103] It should be noted that some embodiments of the present application use the subscriber-observer mode. In the root component of the project, messages for displaying, modifying, and closing the progress bar are received, and corresponding logic processing codes are written.

[0104] In summary, it is not difficult to understand that in some embodiments of the present application, by adding the display and closing logic code of the progress bar in the general file of the project, it is not necessary to set it separately at each request where the progress bar needs to be displayed, which greatly reduces the amount of code. Through the forkjoin function, multiple requests issued by the page at the same time are batch processed, not only for a single request to set the progress bar, but also when there are multiple requests on the page, the progress bar can be closed after waiting for all requests to return results, which is more in line with the needs of users in actual use. The progress bar display information and timer can be set according to the real stage of the request to increase the authenticity of the progress bar; when the progress bar receives a closing event, it first increases to 100% and then disappears, increasing smoothness. That is to say, in some embodiments of the present application, the display and closing logic code of the progress bar is added to the root component and the http request interceptor file in the project, and the encapsulated progress bar component is injected by dynamically creating components to display the progress bar on the web page. In addition, the logic code for receiving the parameters of whether to display the progress bar and modifying the display information is added to the progress bar component. The developer can pass the corresponding parameters according to the actual business needs and the stage of the current request. There is no need to repeatedly set the relevant logic processing of the progress bar display, simplifying the development. When there are multiple requests on a page, and the user requires to wait for all requests on the page to return results before closing the progress bar, these requests can be processed in batches through the forkjoin function. If some requests cannot be processed in the forkjoin function or only a progress bar is added to a single request, these are specially processed in the http interceptor. It should be noted that special processing refers to publishing a single request display and closing progress bar component message to the root component in the interceptor, and the specific display and closing are still processed by the root component, which is the same as the process of multiple requests in the present invention.

[0105] Please refer to Figure 4 , Figure 4 It is shown that the embodiment of the present application provides a device for creating a progress bar. It should be understood that the device is similar to the above Figure 2 The method embodiment corresponds to the method embodiment, and can execute each step involved in the above method embodiment. The specific functions of the device can be referred to in the description above. To avoid repetition, the detailed description is appropriately omitted here. The device includes at least one software function module that can be stored in the memory in the form of software or firmware or solidified in the operating system of the device. The device for creating a progress bar includes: a progress bar creation module 101 and a progress bar closing module 102.

[0106] The progress bar creation module 101 is configured to trigger the process of dynamically creating a progress bar component through the root component of the project, wherein the project includes a platform development project, the progress bar component is used to represent the execution progress of at least one asynchronous request, and the progress bar component is used to set the properties of the progress bar displayed on the page.

[0107] The progress bar closing module 102 is configured to, when it is confirmed that the results of all the asynchronous requests in the at least one asynchronous request have been returned, send a message to close the progress bar displayed on the page through the root component module of the project, and the attributes of the progress bar are set through the progress bar component.

[0108] Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working process of the device described above can refer to the corresponding process in the foregoing method, and will not be elaborated here too much.

[0109] As Figure 5 shown, some embodiments of the present application provide a method for displaying a progress bar. The method includes: S101, generating and sending a page opening request in response to a user's input operation, where the page opening request is parsed into a plurality of asynchronous requests, and the page opening request is used to request display elements of a page from a server side; S102, through Figure 4 the device generates and displays a progress bar for the plurality of asynchronous requests on the page or closes the progress bar, where the progress bar is used to represent the opening progress of the page.

[0110] Some embodiments of the present application provide a computer storage medium, on which a computer program is stored, and when the program is executed by a processor, the method described in the above embodiments can be implemented.

[0111] As Figure 6 shown, some embodiments of the present application provide an electronic device 500, which includes a memory 510, a processor 520, and a computer program stored on the memory 510 and executable on the processor 520. Among them, when the processor 520 reads the program from the memory 510 through a bus 530 and executes the program, the method described in the above embodiments can be implemented.

[0112] The processor 520 can process digital signals and can include various computing structures. For example, a complex instruction set computer structure, a reduced instruction set computer structure, or a structure that implements a combination of multiple instruction sets. In some examples, the processor 520 can be a microprocessor.

[0113] The memory 510 can be used to store instructions executed by the processor 520 or data related to the execution of the instructions. These instructions and / or data can include code for implementing some or all of the functions of one or more modules described in the embodiments of the present application. The processor 520 in the embodiments of the present disclosure can be used to execute the instructions in the memory 510 to implement Figure 2The method shown in [figure]. Memory 510 includes dynamic random access memory, static random access memory, flash memory, optical memory, or other memories well known to those skilled in the art.

[0114] In several embodiments provided in this application, it should be understood that the disclosed devices and methods can also be implemented in other ways. The device embodiments described above are merely illustrative. For example, the flowcharts and block diagrams in the accompanying drawings show the possible architectures, functions, and operations of devices, methods, and computer program products according to multiple embodiments of this application. In this regard, each block in the flowchart or block diagram may represent a module, a program segment, or a part of code that contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than marked in the accompanying drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram and / or flowchart, as well as the combination of blocks in the block diagram and / or flowchart, can be implemented by a dedicated hardware-based system that performs the specified functions or actions, or can be implemented by a combination of dedicated hardware and computer instructions.

[0115] In addition, each functional module in various embodiments of this application can be integrated together to form an independent part, or each module can exist separately, or two or more modules can be integrated to form an independent part.

[0116] If the described function is implemented in the form of a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of this application. The aforementioned storage medium includes: USB flash drives, mobile hard disks, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), magnetic disks, or optical disks, etc., which can store program codes.

[0117] The above are only embodiments of the present application and are not intended to limit the protection scope of the present application. For those skilled in the art, various changes and modifications can be made to the present application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included within the protection scope of the present application. It should be noted that similar reference numerals and letters indicate similar items in the following drawings. Therefore, once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings.

[0118] As described above, these are only specific implementation manners of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can easily think of changes or replacements within the technical scope disclosed by the present application, and all should be covered within the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

[0119] It should be noted that in this text, relational terms such as "first" and "second" are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the term "comprising", "including" or any other variation thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not expressly listed, or further includes elements inherent to such process, method, article or device. Without further limitation, an element defined by the statement "including one..." does not exclude the existence of additional identical elements in the process, method, article or device including the said element.

Claims

1. A method for creating a progress bar, characterized in that, the method includes: selecting at least one of two alternative processing modules as the current request processing module according to the type or number of at least one asynchronous request, wherein the alternative processing modules are used to generate display progress bar messages and close progress bar messages for each asynchronous request in the at least one asynchronous request, the two alternative processing modules include a first alternative processing module based on a first function and a second alternative processing module based on an interceptor, the first function is used to record return values for each asynchronous request in more than one asynchronous request and publish a message to close the progress bar when the return values for each asynchronous request in the more than one asynchronous request are all returned, and the first function is also used to publish the display progress bar message, and the interceptor is used to identify asynchronous requests that need to display a progress bar and publish the display progress bar message and the close progress bar message; if the root component of the project confirms receiving the display progress bar messages sent by all modules included in the current request processing module, then issue a notice to create a progress bar component, wherein the project includes a platform development project, the progress bar component is used to represent the execution progress of the at least one asynchronous request, and the progress bar component is used to set the attributes of the progress bar displayed on the page; trigger the process of dynamically creating the progress bar component through the root component; when it is confirmed that the results of each asynchronous request in the at least one asynchronous request are all returned, then issue a message to close the progress bar displayed on the page through the root component, and the attributes of the progress bar are set by the progress bar component.

2. The method according to claim 1, characterized in that, after issuing the notice to create the progress bar component, the method further includes: injecting the pre-encapsulated progress bar component.

3. The method according to claim 1, characterized in that, the selecting at least one of two alternative processing modules as the current request processing module according to the type of at least one asynchronous request includes: if it is confirmed that the at least one asynchronous request includes a table request and a non-table request, then both the first alternative processing module and the second alternative processing module are used as the current request processing module; or, if it is confirmed that the at least one asynchronous request is not a table request, then the first alternative processing module is used as the current request processing module.

4. The method according to claim 1, characterized in that, the first function is a forkjoin function, and the interceptor is an http interceptor.

5. The method according to claim 1, characterized in that, the selecting at least one of two alternative processing modules as the current request processing module according to the number of at least one asynchronous request includes: if it is confirmed that the number of the at least one asynchronous request is one, then the second alternative processing module is used as the current request processing module.

6. The method according to claim 5, characterized in that, communication between the first alternative processing module, the second alternative processing module and the root component is based on the subscriber and observer pattern.

7. The method according to claim 1, wherein, after the process of triggering the dynamic creation of the progress bar component by the root component, the method further includes: setting a timer according to the estimated completion time, wherein the progress bar component can determine the stage and refresh rate of the progress bar displayed on the page according to the timer.

8. The method according to claim 1, wherein, before the process of triggering the dynamic creation of the progress bar component by the root component, the method further includes: receiving and storing, by the root component, the progress bar display information and the estimated completion time from the server side, wherein the server side is configured to return return values for each asynchronous request in response to all asynchronous requests included in the at least one asynchronous request, and the progress bar component is configured to control the display process of the progress bar according to the progress bar display information and the estimated completion time.

9. The method according to claim 1, wherein, before the process of triggering the dynamic creation of the progress bar component by the root component, the method further includes: receiving, by the root component, the estimated completion time and the custom progress bar attribute information from the server side, wherein the server side is configured to return return values for each asynchronous request in response to all asynchronous requests included in the at least one asynchronous request, and the progress bar component is configured to control the display process of the progress bar according to the custom progress bar attribute information and the estimated completion time.

10. The method according to claim 8 or 9, wherein, the method further includes: sending, by the root component, a message for obtaining the stage of the request; receiving, by the root component, response information returned from the server side, wherein the response information includes: the total number of request steps, the current stage of the request, and the estimated completion time of the request; controlling, by the progress bar component and the response information, the current request stage description information of the progress bar being displayed on the page; and / or, controlling, by the progress bar component and the response information, the refresh rate of the progress bar being displayed on the page.

11. The method according to claim 1, wherein, after the root component sends a message to close the progress bar displayed on the page, the method further includes: confirming that the progress bar component has received the close notification from the root component, and confirming that the progress bar displayed on the current page has reached 100%, then sending a control instruction to close the progress bar to the page, wherein the page closes the progress bar in response to the control instruction.

12. The method according to claim 1, wherein, after the root component sends a message to close the progress bar displayed on the page, the method further includes: confirming that the progress bar component has received the close notification from the root component, and confirming that the progress bar displayed on the current page has not reached 100%, then sending an instruction to accelerate the progress of the progress bar to the page so that the progress bar is loaded to 100%; Send a control instruction to the page to close the progress bar, where the page responds to the control instruction and closes the progress bar.

13. The method according to claim 11 or 12, characterized in that, after sending the control instruction to the page to close the progress bar, the method further includes: Destroy the progress bar component and send a destruction notice to the root component.

14. The method according to claim 13, characterized in that, after destroying the progress bar component, the method further includes: controlling the page to pop up a window for displaying operation result information.

15. A device for creating a progress bar, characterized in that, the device includes: A progress bar creation module, configured to: Select at least one of two alternative processing modules as the current request processing module according to the type or number of at least one asynchronous request, where the alternative processing modules are used to generate display progress bar messages and close progress bar messages for each asynchronous request in the at least one asynchronous request, and the two alternative processing modules include a first alternative processing module based on a first function and a second alternative processing module based on an interceptor. The first function is used to record the return values of each asynchronous request in more than one asynchronous request and publish a message to close the progress bar when the return values of each asynchronous request in the more than one asynchronous request are all returned, and the first function is also used to publish the display progress bar message. The interceptor is used to identify asynchronous requests that need to display a progress bar and publish the display progress bar message and the close progress bar message; If the root component of the project confirms that it has received the display progress bar messages sent by all modules included in the current request processing module, then send a notice to create a progress bar component, where the project includes a platform development project, and the progress bar component is used to represent the execution progress of the at least one asynchronous request, and the progress bar component is used to set the attributes of the progress bar displayed on the page; Trigger the process of dynamically creating the progress bar component through the root component; A progress bar closing module, configured to, when it is confirmed that the results of each asynchronous request in the at least one asynchronous request have all been returned, send a message to close the progress bar displayed on the page through the root component module, and the attributes of the progress bar are set by the progress bar component.

16. A method for displaying a progress bar, characterized in that, the method includes: Generate and send a page opening request in response to a user's input operation, where the page opening request is parsed into multiple asynchronous requests, and the page opening request is used to request display elements of the page from the server side; Generate and display a progress bar for the multiple asynchronous requests or close the progress bar on the page through the device according to claim 15, where the progress bar is used to represent the opening progress of the page.

17. A computer storage medium, on which a computer program is stored, characterized in that, when the program is executed by a processor, it can implement the method according to any one of claims 1-14 and claim 16.

18. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein, when the processor executes the program, the method described in any one of claims 1-14 and claim 16 can be implemented.

Images