Web browser asynchronous operation processing method and device, electronic equipment and product

Abstract

The invention discloses a web browser asynchronous operation processing method and device, electronic equipment and a product, and relates to the technical field of web development. The web browser asynchronous operation processing method comprises the steps that an interaction event between a user and a web browser is monitored through a pointer event; when an interaction event between the user and the web browser is detected, creating a context object, and storing event information of the interaction event into the context object; and if the asynchronous operation event is triggered before the interaction event is ended, executing the asynchronous operation event, recording event information of the asynchronous operation event and updating the context object. According to the web browser asynchronous operation processing method and device, the electronic equipment and the product, context loss caused by asynchronous operation can be avoided, and context information does not need to be manually managed.

Description

TECHNICAL FIELD

[0001] The present application belongs to the technical field of web development, and particularly relates to a web browser asynchronous operation processing method and device, electronic equipment and product. BACKGROUND

[0002] With the increasing complexity of Web applications, the asynchronous operation process triggered by user interaction has become increasingly difficult to manage and debug.

[0003] Currently, the management of asynchronous operations is commonly done by using the async_hooks module in Node.js or Promise / Async-Await (Promise and Async-Await are important mechanisms for handling asynchronous operations in JavaScript, which make the writing and reading of asynchronous code more intuitive and easy to understand, thus solving the problem of nested and difficult-to-trace traditional callback functions) to handle asynchronous operations in Web applications.

[0004] However, the async_hooks module in Node.js is limited to server-side environments and cannot be directly applied to the browser side, and for complex asynchronous call chains, context information may need to be manually passed, increasing code complexity. For Promise / Async-Await, although the syntax is simple, it needs to manually manage context information, which is prone to errors and increases maintenance costs, and when dealing with complex asynchronous call chains, context information is easily lost, making debugging difficult.

[0005] Therefore, how to provide an effective solution to enable developers to more effectively manage and debug complex asynchronous processes triggered by user interaction in Web applications has become a difficult problem to be solved in the prior art. SUMMARY

[0006] The purpose of the present application is to provide a web browser asynchronous operation processing method, device, electronic equipment and product to solve the above-mentioned problems existing in the prior art.

[0007] In order to achieve the above-mentioned purpose, the present application adopts the following technical solutions: In a first aspect, the present application provides a web browser asynchronous operation processing method, comprising: listening to the interaction event of the user with the web browser through the pointer event; When the interaction event of the user with the web browser is detected, a context object is created, and the event information of the interaction event is saved to the context object; If an asynchronous operation event is triggered before the end of the interaction event, the asynchronous operation event is executed, event information of the asynchronous operation event is recorded, and the context object is updated.

[0008] In a possible design, the method further includes: When the end of the interaction event is detected, the context object is cleaned up.

[0009] In a possible design, after the context object is created and the event information of the interaction event is saved into the context object, the method further includes: The end of the interaction event is detected through addEventListener.

[0010] In a possible design, after the context object is created and the event information of the interaction event is saved into the context object, the method further includes: A user ID and / or a session ID are added to the context object.

[0011] In a possible design, the event information of the interaction event is saved into the context object, including: The event information of the interaction event is saved into the context object through a global variable currentContext or a Map.

[0012] In a possible design, before the asynchronous operation event is executed, the method further includes: The asynchronous operation event is wrapped.

[0013] In a possible design, the asynchronous operation event is an interface calling event or a file reading event.

[0014] In a second aspect, the present application provides a web browser asynchronous operation processing apparatus, including: A listening unit is configured to listen to an interaction event of a user with a web browser through a pointer event; A creating and saving unit is configured to create a context object and save event information of the interaction event into the context object when the interaction event of the user with the web browser is detected; An executing unit is configured to execute an asynchronous operation event, record event information of the asynchronous operation event, and update the context object if the asynchronous operation event is triggered before the end of the interaction event.

[0015] In a third aspect, the present application provides an electronic device comprising a memory, a processor and a transceiver connected in sequence for communication, wherein the memory is configured to store a computer program, the transceiver is configured to transmit and receive messages, and the processor is configured to read the computer program and execute the web browser asynchronous operation processing method according to the first aspect or any possible design of the first aspect.

[0016] In a fourth aspect, the present application provides a computer readable storage medium having instructions stored thereon, which, when executed on a computer, perform the web browser asynchronous operation processing method according to the first aspect or any possible design of the first aspect.

[0017] In a fifth aspect, the present application provides a computer program product comprising instructions, which, when executed on a computer, cause the computer to perform the web browser asynchronous operation processing method according to the first aspect or any possible design of the first aspect.

[0018] Advantages: The present application provides a new solution for web browser asynchronous operation processing, that is, a pointer event is used to monitor the interaction event between a user and a web browser; when detecting the interaction event between the user and the web browser, a context object is created, and event information of the interaction event is saved into the context object; if an asynchronous operation event is triggered before the interaction event ends, the asynchronous operation event is executed, event information of the asynchronous operation event is recorded, and the context object is updated. In this way, the user interaction is monitored through the pointer event, which is applicable to the asynchronous operation processing of the web browser; at the same time, a separate context object is created for the interaction event, without the need for manual management of context information, ensuring that all asynchronous operations triggered by the interaction can access the corresponding context, simplifying the code implementation and avoiding the problem of context loss. Secondly, the pointer event can monitor the interaction event of different input devices (such as a mouse, a touch screen, a stylus, etc.), realizing cross-platform compatibility. Whether on a desktop or a mobile device, developers can use the same API to process various types of user interaction, improving the reusability and flexibility of the code. In addition, through the context object, each interaction and its related asynchronous operation can be easily tracked and recorded, providing strong support for debugging, and developers can quickly locate the problem source, which is particularly important when dealing with complex asynchronous call chains. BRIEF DESCRIPTION OF DRAWINGS

[0019] Figure 1 A flowchart of the web browser asynchronous operation processing method provided by the embodiments of the present application; Figure 2A block diagram of a web browser asynchronous operation processing device provided by an embodiment of the present application is shown in the figure. Figure 3 A block diagram of an electronic device provided by an embodiment of the present application is shown in the figure. DETAILED DESCRIPTION

[0020] In order to more clearly illustrate the technical solutions of the embodiments of the present application or the prior art, the present application will be briefly introduced with reference to the drawings and the embodiments or the prior art description. Obviously, the following description of the drawings is only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained without creative labor. It should be noted that the description of these embodiments is used to help understand the present application, but does not constitute a limitation on the present application.

[0021] It should be understood that although the terms first, second, etc. may be used herein to describe various elements, these elements should not be limited by these terms. These terms are only used to distinguish one element from another. For example, a first element can be called a second element, and similarly a second element can be called a first element without departing from the scope of the example embodiments of the present application.

[0022] It should be understood that for the term "and / or" that may appear in the present application, it is only a description of the association relationship of the associated objects, which means that there can be three kinds of relationships, for example, A and / or B, which means that there are three cases of A alone, B alone, and A and B together; for the term " / and" that may appear in the present application, it is another description of the association relationship of another associated object, which means that there can be two kinds of relationships, for example, A / and B, which means that there are two cases of A alone and A and B together; in addition, for the character " / " that may appear in the present application, it generally means that the associated objects before and after are an "or" relationship.

[0023] EMBODIMENTS The first aspect of the embodiments of the present application provides a web browser asynchronous operation processing method, which can be executed by a computer device with certain computing resources, such as a personal computer, a smart phone or a personal digital assistant. As shown in the figure, Figure 1 The web browser asynchronous operation processing method can include the following steps S101-S103.

[0024] Step S101. Listen to the interaction event of the user with the web browser through the pointer event.

[0025] The pointer event is a type of DOM event triggered by a pointing device, which is used to create a unified DOM event model that can effectively master various input devices (mouse, stylus and single-point or multi-point finger touch). The interaction event can be, but is not limited to, a click, touch, etc.

[0026] In the embodiments of the present application, the event information can be obtained to determine whether the event listened to is the interaction event of the user and the web browser. The event information can include, but is not limited to, pointerId, pointerType and target, wherein pointerId represents the identifier of the pointer, which is used to distinguish different pointer devices (such as mouse, touch screen, etc.), and each interaction of the pointer device on the page generates a unique pointerId. pointerType represents the type of the pointer, for example, mouse represents a mouse, touch represents a touch, pen represents a stylus, and unknown represents an unknown type. Target represents the event target, that is, the element triggered by the pointer event.

[0027] Step S102. When the interaction event of the user and the web browser is detected, a context object is created, and the event information of the interaction event is saved to the context object.

[0028] When the interaction event of the user and the web browser is detected, a context object (ContextObject) can be created to store the event information of the currently detected interaction event, and the event information of the interaction event is saved to the context object, so as to bind the context object.

[0029] When the event information of the interaction event is saved to the context object, the event information of the interaction event can be saved to the context object through a global variable currentContext or Map, but is not limited to this.

[0030] In one or more embodiments, after the context object is created and the event information of the interaction event is saved to the context object, the user ID and / or session ID can be added to the context object.

[0031] Step S103. If an asynchronous operation event is triggered before the interaction event ends, the asynchronous operation event is executed, the event information of the asynchronous operation event is recorded, and the context object is updated.

[0032] In the embodiments of the present application, after the context object is created and the event information of the interaction event is saved into the context object, the end of the interaction event can be monitored in real time through addEventListener, and whether an asynchronous operation event is triggered can also be monitored in real time. The asynchronous operation event refers to an event other than the interaction event between the user and the web browser, and the asynchronous operation event can be, but is not limited to, an interface calling event or a file reading event.

[0033] If the asynchronous operation event is triggered before the end of the interaction event, the asynchronous operation event can be executed, the event information of the asynchronous operation event is recorded, and the context object is updated. Specifically, if the asynchronous operation event is executed successfully, success information is recorded and the context object is updated, and if the asynchronous operation event fails, the success or failure is recorded and the context object is updated.

[0034] In one or more embodiments, before the asynchronous operation event is executed, the asynchronous operation event can also be wrapped so that the relevant operation record can be found subsequently.

[0035] In one or more embodiments, when the end of the interaction event is monitored, the context object can be cleaned up to prevent memory leakage or pollution of subsequent processes.

[0036] The web browser asynchronous operation processing method provided by the application, through a pointer event, an interaction event between a user and a web browser is monitored; when the interaction event between the user and the web browser is detected, a context object is created, and event information of the interaction event is saved into the context object; if an asynchronous operation event is triggered before the interaction event ends, the asynchronous operation event is executed, event information of the asynchronous operation event is recorded, and the context object is updated. In this way, through the pointer event, the user interaction can be monitored, and the asynchronous operation processing of the web browser can be applied; at the same time, through the creation of a separate context object for the interaction event, the context information does not need to be manually managed, it is ensured that all asynchronous operations triggered by the interaction can access the corresponding context, the code implementation is simplified, and the problem of context loss is avoided; secondly, through the pointer event, the interaction events of different input devices (such as a mouse, a touch screen, a stylus, etc.) can be monitored, cross-platform compatibility is realized, on a desktop or a mobile device, developers can use the same API to process various types of user interactions, the code reusability and flexibility are improved; in addition, through the context object, each interaction and the related asynchronous operation can be easily tracked and recorded, which provides strong support for debugging, developers can quickly locate the problem source, and this capability is particularly important when processing a complex asynchronous call chain. Finally, the scheme is flexible, the context content and the processing mode of the asynchronous operation can be customized according to specific needs, it is easy to integrate with other existing Web frameworks and technology stacks, and wide applicability is provided.

[0037] Please refer to Figure 2 The second aspect of the embodiment of the application provides a web browser asynchronous operation processing device, which comprises: A monitoring unit is configured to monitor an interaction event between a user and a web browser through a pointer event. A creating and saving unit is configured to create a context object when the interaction event between the user and the web browser is detected, and save event information of the interaction event into the context object. An executing unit is configured to execute an asynchronous operation event if the asynchronous operation event is triggered before the interaction event ends, record event information of the asynchronous operation event, and update the context object.

[0038] The working process, working details and technical effects of the web browser asynchronous operation processing device provided by the second aspect of the embodiment can be referred to the first aspect of the embodiment, and will not be repeated here.

[0039] As Figure 3As shown, the third aspect of the embodiment of the present application provides an electronic device, comprising a memory, a processor and a transceiver connected in sequence and in communication, wherein the memory is configured to store a computer program, the transceiver is configured to transceive messages, and the processor is configured to read the computer program and execute the web browser asynchronous operation processing method according to the first aspect of the embodiment.

[0040] For example, the memory can include, but is not limited to, a random access memory (RAM), a read-only memory (ROM), a flash memory, a first-in-first-out memory (FIFO) and / or a first-in-last-out memory (FILO), etc.; the processor can be, but is not limited to, a microprocessor of STM32F105 series, an ARM (Advanced RISC Machines) processor, an X86 architecture processor or a processor integrated with a neural-network processing unit (NPU); and the transceiver can be, but is not limited to, a WiFi (Wireless Fidelity) transceiver, a Bluetooth transceiver, a General Packet Radio Service (GPRS) transceiver, a ZigBee transceiver, a 3G transceiver, a 4G transceiver and / or a 5G transceiver, etc.

[0041] The fourth aspect of the embodiment provides a computer-readable storage medium storing instructions of the web browser asynchronous operation processing method according to the first aspect of the embodiment, i.e., the computer-readable storage medium stores instructions, and when the instructions are run on a computer, the web browser asynchronous operation processing method according to the first aspect is executed. The computer-readable storage medium refers to a carrier storing data, which can include, but is not limited to, a floppy disk, an optical disk, a hard disk, a flash memory, a USB flash disk and / or a Memory Stick, etc., and the computer can be a general-purpose computer, a special-purpose computer, a computer network or other programmable devices.

[0042] The fifth aspect of the embodiment provides a computer program product containing instructions, which, when run on a computer, causes the computer to execute the web browser asynchronous operation processing method according to the first aspect of the embodiment, wherein the computer can be a general-purpose computer, a special-purpose computer, a computer network or other programmable devices.

[0043] It is to be understood that the details set forth herein do not limit the example embodiments. Other examples can of course be used without departing from the spirit of the example embodiments. The drawings, which are incorporated into and form a part of the specification, illustrate several examples. These examples, which are described in sufficient detail to disclose the example embodiments, are given by way of explanation only and are not intended to be limiting. Furthermore, the connecting lines shown in the various figures contained herein are intended to represent example functional relationships and / or physical or logical couplings between the various examples, components, and / or devices. It should be noted that many alternative or equivalent implementations can be used without departing from the spirit of the example embodiments. For example, the various examples can be used together in any combination or as stand-alone or distributed examples. Moreover, the term "example" is used in the sense of serving as an example, instance, or illustration. For the

[0044] Finally, it should be noted that the above-mentioned merely preferred embodiments of the present application are not intended to limit the scope of the present application. Any modification, equivalent replacement or improvement made without departing from the spirit and principle of the present application shall fall within the scope of the present application.

Claims

1. A method for handling asynchronous operations in a web browser, characterized in that, include: Listen for user interaction events with the web browser through pointer events; When an interaction event between the user and the web browser is detected, a context object is created, and the event information of the interaction event is saved into the context object; If an asynchronous operation event is triggered before the interaction event ends, the asynchronous operation event is executed, the event information of the asynchronous operation event is recorded, and the context object is updated.

2. The web browser asynchronous operation processing method according to claim 1, characterized in that, The method further includes: When the interaction event ends, clean up the context object.

3. The web browser asynchronous operation processing method according to claim 1, characterized in that, After creating a context object and saving the event information of the interaction event into the context object, the method further includes: Use addEventListener to listen for whether the interaction event has ended.

4. The web browser asynchronous operation processing method according to claim 1, characterized in that, After creating a context object and saving the event information of the interaction event into the context object, the method further includes: Add the user ID and / or session ID to the context object.

5. The web browser asynchronous operation processing method according to claim 1, characterized in that, Saving the event information of the interaction event to the context object includes: The event information of the interaction event can be saved to the context object through the global variable currentContext or a Map.

6. The web browser asynchronous operation processing method according to claim 1, characterized in that, Before executing the asynchronous operation event, the method further includes: Wrap the asynchronous operation event.

7. The web browser asynchronous operation processing method according to claim 1, characterized in that, The asynchronous operation event is either an interface call event or a file read event.

8. A web browser asynchronous operation processing device, characterized in that, include: The listening unit is used to listen for user interaction events with the web browser via pointer events; A storage unit is created to create a context object and save the event information of the interaction event into the context object when an interaction event between the user and the web browser is detected. An execution unit is configured to execute an asynchronous operation event if such an event is triggered before the interaction event ends, record the event information of the asynchronous operation event, and update the context object.

9. An electronic device, characterized in that, The device includes a memory, a processor, and a transceiver that are sequentially and communicatively connected. The memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute the asynchronous operation processing method for a web browser as described in any one of claims 1 to 7.

10. A computer program product, comprising a computer program or instructions, characterized in that, When the computer program or the instructions are executed by the computer, they implement the asynchronous operation processing method of the web browser as described in any one of claims 1 to 7.

Images