Asynchronous operation processing method and device, equipment and storage medium
By creating a global state context and a centralized state management library in the front-end application, the asynchronous operations of component instances are monitored in real time, solving the problem of scattered asynchronous operation processing methods, realizing unified asynchronous operation state monitoring and processing, and improving processing efficiency and user experience.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-12
- Publication Date
- 2026-03-10
AI Technical Summary
Existing asynchronous operation processing methods are scattered and lack a unified operating system, resulting in low processing efficiency and affecting the normal operation of front-end applications and user experience.
Create a global state context in the front-end application to monitor the asynchronous operations of component instances in real time. A unified asynchronous operation state monitoring and processing is achieved through a centralized state management library and global listeners, including creating target state nodes, updating state, listening for state changes and processing them accordingly.
It enables cross-component collaboration and asynchronous operation tracing, improving the processing efficiency of asynchronous operations and ensuring the normal operation of the front-end application and user experience.
Smart Images
Figure CN121635993A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of asynchronous operation processing technology, specifically to an asynchronous operation processing method, apparatus, device, and storage medium. Background Technology
[0002] As front-end applications become increasingly complex and component-based development paradigms become more widespread, modern web applications increasingly rely on asynchronous data retrieval, dynamic module loading, and integration with third-party resources. These asynchronous operations naturally introduce loading delays and runtime error risks, thus requiring handling of asynchronous operations and the repair or recovery of the problems they cause.
[0003] Asynchronous operations have multiple states, and existing asynchronous operation processing methods are relatively scattered, lacking a unified operating system. This results in low processing efficiency for asynchronous operations, which in turn affects the normal operation of front-end applications and reduces user experience. Summary of the Invention
[0004] In view of this, this application provides a method, apparatus, device, and storage medium for processing asynchronous operations, which addresses the problem that existing asynchronous operation processing methods are relatively scattered and lack a unified operating system, resulting in low processing efficiency of asynchronous operations, thereby affecting the normal operation of front-end applications and reducing user experience.
[0005] To achieve the above objectives, the following solution is proposed:
[0006] Firstly, a method for handling asynchronous operations includes:
[0007] In the front-end application, create a global state context;
[0008] When a component instance is created and inserted into the DOM tree, a new state node corresponding to the component instance is created as the target state node.
[0009] The state context is updated based on the target state node to obtain a centralized state management library;
[0010] The asynchronous operations of the component instance are monitored in real time to determine the final state of the component instance, and the final state is updated in the target state node corresponding to the component instance.
[0011] Register a global listener in the state centralized management library to monitor the state changes of each target state node in the state centralized management library;
[0012] The asynchronous operations corresponding to each of the target state nodes are processed based on their state changes.
[0013] Preferably, creating a new state node corresponding to the component instance as the target state node includes:
[0014] Obtain the type name of the component instance, the index of the component instance, and key attributes;
[0015] A unique identifier is generated using the type name, the index of the component instance, and key attributes;
[0016] The unique identifier is searched for in the set of states within the state context;
[0017] If the unique identifier is not contained in the global state, a new state node is created for the component instance as the target state node.
[0018] If the unique identifier is contained in the global context, then the historical state of the component instance is obtained;
[0019] The component instance is initialized using the historical state to establish a new state node as the target state node.
[0020] Preferably, the real-time monitoring of the asynchronous operations of the component instance to determine the final state of the component instance includes:
[0021] When an asynchronous operation of the component instance is detected to start, the state of the component instance is updated to loading, and a timeout timer is created and started.
[0022] Determine whether the asynchronous operation was successful;
[0023] If so, the state of the component instance is updated to a success state, which is then used as the final state of the component instance.
[0024] If not, the state of the component instance is updated to a failed state, and the corresponding error object is captured and used as the final state of the component instance.
[0025] If the timer times out during the operation, the state of the component instance will be updated to a degraded loading state, which will be the final state of the component instance.
[0026] Preferably, the step of processing the corresponding asynchronous operations based on the state changes of each of the target state nodes includes:
[0027] For each target state node, when a state change is detected in the target state node, an event is generated based on the state change.
[0028] Based on the event, determine the new state type of the target state node;
[0029] The asynchronous operation corresponding to the newly changed state type is processed.
[0030] Preferably, processing the asynchronous operation corresponding to the newly changed state type includes:
[0031] If the new state type is a loading state type, then activate the Suspense boundary of the component instance corresponding to the target state node;
[0032] If the new state type is a degraded loading state type, then activate the Suspense boundary of the component instance corresponding to the target state node, and pass the preset metadata to the Suspense boundary so that the Suspense boundary can switch the interface according to the metadata.
[0033] If the new state type is an error state type, then an error object is extracted from the target state node, and the corresponding asynchronous operation is processed according to the error object.
[0034] Preferably, the step of processing the asynchronous operation corresponding to the error object includes:
[0035] Render the error interface based on the error object;
[0036] The error object is evaluated to determine the error type;
[0037] According to the error type, select the corresponding recovery strategy from the preset strategy set;
[0038] The recovery strategy is configured in the error interface so that the error interface can perform page recovery based on the recovery strategy.
[0039] Preferably, it further includes:
[0040] After the asynchronous operation is completed, the state centralized management library is updated. It is then determined whether there is at least one target state node that is not in a successful state in the updated state centralized management library.
[0041] If not, then the global state is aggregated into a success state;
[0042] If so, then determine whether there exists a target state node whose final updated state is an error state;
[0043] If there exists a target state node whose final updated state is an error state, then the global state is aggregated into the error state;
[0044] If there is no target state node whose final state after the update is an error state, then determine whether there is a target state node whose final state after the update is a downgraded loading state.
[0045] If there exists a target state node whose final updated state is a degraded loading state, then the global state is aggregated into the degraded loading state.
[0046] Secondly, an asynchronous processing apparatus includes:
[0047] The state context creation module is used to create a global state context in the front-end application;
[0048] The target state node creation module is used to create a new state node corresponding to a component instance as the target state node when a component instance is created and inserted into the DOM tree.
[0049] The state centralized management library determination module is used to update the state context based on the target state node to obtain the state centralized management library;
[0050] The state update module is used to monitor the asynchronous operations of the component instance in real time, determine the final state of the component instance, and update the final state in the target state node corresponding to the component instance.
[0051] The state change monitoring module is used to register a global listener in the state centralized management library to monitor the state changes of each target state node in the state centralized management library.
[0052] The recovery processing module is used to process the corresponding asynchronous operations based on the state changes of each of the target state nodes.
[0053] Thirdly, an asynchronous processing device, including a memory and a processor;
[0054] The memory is used to store programs;
[0055] The processor is configured to execute the program to implement the steps of the asynchronous operation processing method as described in any of the first aspects.
[0056] Fourthly, a storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the processing method for asynchronous operation as described in any of the first aspects.
[0057] As can be seen from the above technical solution, this application creates a global state context in the front-end application; when a component instance is created and inserted into the DOM tree, a new state node corresponding to the component instance is created as the target state node; the state context is updated according to the target state node to obtain a centralized state management library; the asynchronous operations of the component instance are monitored in real time to determine the final state of the component instance, and the final state is updated in the target state node corresponding to the component instance; a global listener is registered in the centralized state management library to listen for state changes of each target state node in the centralized state management library; and the asynchronous operations corresponding to each target state node are processed based on the state changes of each target state node. This application implements a unified asynchronous operation state monitoring and processing mechanism through a global state context, a centralized state management library, and a global listener, achieving cross-component collaboration and asynchronous operation tracking that cannot be achieved by existing technologies. Attached Figure Description
[0058] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.
[0059] Figure 1 An optional flowchart of an asynchronous operation processing method provided in an embodiment of this application;
[0060] Figure 2 A schematic diagram of the structure of an asynchronous operation processing device provided in an embodiment of this application;
[0061] Figure 3 This is a schematic diagram of the structure of an asynchronous operation processing device provided in an embodiment of this application. Detailed Implementation
[0062] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0063] This invention can be used in a wide variety of general-purpose or special-purpose computing environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor devices, distributed computing environments including any of the above devices, etc.
[0064] This invention provides a method for processing asynchronous operations. This method can be applied to various computer terminals or smart terminals, and its execution entity can be the processor or server of the computer terminal or smart terminal. The flowchart of the method is shown below. Figure 1 As shown, it specifically includes:
[0065] S1: In the front-end application, create a global state context.
[0066] This application can use the React Context API to create a global state context, which consists of two parts: a stateMap, which is a global dictionary or mapping structure used to store the state of all components; and a dispatch, which is a unified dispatch function used to modify the stateMap.
[0067] This state context is a persistent, structured data storage area that is specifically used to store state metadata related to asynchronous operations throughout its lifecycle.
[0068] The state context is essentially a single state machine that integrates multiple states. It requires defining a standard set of states, including: idle, loading, success, and error, and extending this with sub-states loadingWithFallback and errorWithRetry. Furthermore, it passes state and dispatch methods down through the React Context API, allowing any child component to subscribe to or modify its own state without needing to pass through props.
[0069] The window context exists independently of the rendering cycle of any UI component, ensuring that state data is not lost when the component is updated or temporarily unloaded.
[0070] S2: When a component instance is created and inserted into the DOM tree, a new state node corresponding to the component instance is created as the target state node.
[0071] When a component is instantiated, a dedicated target state node is proactively allocated to it within the global state context. This target state node represents a minimal, independently manageable asynchronous unit, enabling independent state tracking for multiple asynchronous operations at the component level or within a component. This avoids ineffective rendering caused by coarse-grained management. The creation timing of the target state node is related to the mounting timing of the component instance.
[0072] This target state node is independent, and it can achieve state isolation through an identifier.
[0073] S3: Update the state context according to the target state node to obtain a centralized state management library.
[0074] The state management library integrates persistence capabilities, automatically saving and restoring state when components are unloaded or routes are switched. It supports quick display of historical content when navigating back. To reduce re-rendering caused by context updates, selector pattern and shallow comparison optimization can be used to notify only components that depend on state changes to update.
[0075] The centralized state management library organizes discrete target state nodes into a structured set, enabling global asynchronous operation processing.
[0076] S4: Monitor the asynchronous operations of the component instance in real time to determine the final state of the component instance, and update the final state in the target state node corresponding to the component instance.
[0077] This application can automatically track the lifecycle of a component instance by intercepting and listening to its asynchronous operations, such as data requests and dynamic imports, without requiring manual intervention from the developer. This ensures that the target state node in the centralized state management library always reflects the most accurate and up-to-date asynchronous operations, thus guaranteeing accuracy.
[0078] Once the asynchronous operation is completed, it will be updated in the corresponding target state node.
[0079] S5: Register a global listener in the state centralized management library to monitor the state changes of each target state node in the state centralized management library.
[0080] This application also introduces a global listening mechanism in this step. A global listener is registered in the state centralized management library, which is equivalent to introducing a centralized event scheduling system. Any change of the target state node will be captured by this global listener and published as an event. For example, each target state node's state change can create its own corresponding event.
[0081] S6: Process the corresponding asynchronous operations based on the state changes of each of the target state nodes.
[0082] In this step, corresponding processing strategies can be automatically executed based on changes in the target status node, such as displaying error messages, retrying error logic, and reporting logs, which facilitates problem elimination and problem tracing.
[0083] Furthermore, since the global listener can monitor the state changes of multiple target state nodes simultaneously, this step can collaboratively process the same state changes.
[0084] This application provides developers with an integrated, global asynchronous operation processing mechanism, eliminating the need for developers to write lengthy and error-prone imperative code for separate processing, greatly improving developer efficiency, and ensuring the normal operation of front-end applications.
[0085] As can be seen from the above technical solution, this application creates a global state context in the front-end application; when a component instance is created and inserted into the DOM tree, a new state node corresponding to the component instance is created as the target state node; the state context is updated according to the target state node to obtain a centralized state management library; the asynchronous operations of the component instance are monitored in real time to determine the final state of the component instance, and the final state is updated in the target state node corresponding to the component instance; a global listener is registered in the centralized state management library to listen for state changes of each target state node in the centralized state management library; and the asynchronous operations corresponding to each target state node are processed based on the state changes of each target state node. This application implements a unified asynchronous operation state monitoring and processing mechanism through a global state context, a centralized state management library, and a global listener, achieving cross-component collaboration and asynchronous operation tracking that cannot be achieved by existing technologies.
[0086] The method provided in this embodiment of the invention includes a process for creating a new state node corresponding to the component instance as the target state node, which is described in detail below:
[0087] Obtain the type name of the component instance, the index of the component instance, and key attributes;
[0088] A unique identifier is generated using the type name, the index of the component instance, and key attributes;
[0089] The unique identifier is searched for in the set of states within the state context;
[0090] If the unique identifier is not contained in the global state, a new state node is created for the component instance as the target state node.
[0091] If the unique identifier is contained in the global context, then the historical state of the component instance is obtained;
[0092] The component instance is initialized using the historical state to establish a new state node as the target state node.
[0093] Specifically, generating a unique identifier for a component instance requires generating an identifier associated with the component type corresponding to that component instance. Therefore, a unique identifier can be generated by combining the component type and instance characteristics, i.e., obtaining the component instance's type name, index, and key properties. Specifically, in React, the component instance will have a unique key property, so this key property can be directly obtained as the index. In addition, if the identifier generated by using only the type name and index may not accurately guarantee uniqueness, this application also uses the component instance's key properties to jointly generate a unique identifier. One or more props can be declared in advance as key properties of the component instance, then the prop values specified in the key property declaration are determined, and finally the type name, index, and prop values of each key property are combined to generate a unique identifier.
[0094] The global state may or may not contain a unique identifier. If it does, it means that there is a historical state of the component instance in the global state, but the historical state needs to be used to initialize the component instance and obtain a new state node to ensure the real-time nature of the state. If it does not contain a unique identifier, then a new state node needs to be created.
[0095] The process of real-time monitoring of the asynchronous operations of the component instance in this application to determine the final state of the component instance is described in detail below.
[0096] When an asynchronous operation of the component instance is detected to start, the state of the component instance is updated to loading, and a timeout timer is created and started.
[0097] Determine whether the asynchronous operation was successful;
[0098] If so, the state of the component instance is updated to a success state, which is then used as the final state of the component instance.
[0099] If not, the state of the component instance is updated to a failed state, and the corresponding error object is captured and used as the final state of the component instance.
[0100] If the timer times out during the operation, the state of the component instance will be updated to a degraded loading state, which will be the final state of the component instance.
[0101] Specifically, asynchronous operations of component instances can be wrapped using higher-order components or custom Hooks. Within this wrapper layer, the start of the asynchronous operation can be detected, and at the moment the asynchronous operation starts, the state of the component instance can be updated to loading. A timer is also started to ensure timeliness. If the timeout occurs, the UI needs to be prompted to display degraded content such as a skeleton screen.
[0102] If the state is updated to a success state, the final state of the component instance can be updated to a success state. If it fails, the corresponding error object needs to be captured, and the failure state should be used as the final state. When the final state is updated to success or failure, a timer can be used to clean it up.
[0103] The following embodiments provide a detailed explanation of the steps in this application for processing the corresponding asynchronous operations based on the state changes of each of the target state nodes.
[0104] For each target state node, when a state change is detected in the target state node, an event is generated based on the state change.
[0105] Based on the event, determine the new state type of the target state node;
[0106] The asynchronous operation corresponding to the newly changed state type is processed.
[0107] Specifically, the step of processing the asynchronous operation corresponding to the newly changed state type may include:
[0108] If the new state type is a loading state type, then activate the Suspense boundary of the component instance corresponding to the target state node;
[0109] If the new state type is a degraded loading state type, then activate the Suspense boundary of the component instance corresponding to the target state node, and pass the preset metadata to the Suspense boundary so that the Suspense boundary can switch the interface according to the metadata.
[0110] If the new state type is an error state type, then an error object is extracted from the target state node, and the corresponding asynchronous operation is processed according to the error object.
[0111] Specifically, the above process is used to achieve deep integration of Suspense and Error Boundary, build a unified state mechanism, and set state transition rules. When the new state type is a loading state type, the Suspense boundary of the component instance corresponding to the target state node needs to be activated, so that it enters a waiting state. If it is a degraded loading state type, in addition to activating the Suspense boundary, a signal containing metadata needs to be passed to the Suspense boundary, so that the Suspense boundary can switch to which interface based on the metadata, such as a richer degraded UI. If it is a degraded loading state type, the Error Boundary closest to the corresponding component instance is activated, and the detailed error object is determined and passed to the Error Boundary.
[0112] Suspense boundaries are native components provided by React; they are built into the component tree using... <suspense>A component explicitly defines a scope or region for declaratively managing the loading state of asynchronous operations (such as data fetching and dynamic imports), allowing the component to display standby content (such as a loading indicator) while waiting for asynchronous resources; Error Boundary is React's error-catching mechanism, which captures JavaScript errors in the child component tree through lifecycle methods or hooks, preventing the entire application from crashing and displaying a degraded UI.
[0113] In addition, since there are multiple component instances, the React.lazy capability can be configured to achieve flexible loading. That is, if component instance A depends on the data of component instance B, A will be processed first, and then B will be processed, which can also avoid state conflicts. If you want to improve efficiency, you can also implement batch synchronization operations to reduce performance jitter caused by frequent state updates.
[0114] To further avoid conflicts, a coordinator can be configured to synchronize the lifecycle events of Suspense and ErrorBoundary. For example, when the fallback of Suspense is displayed, the coordinator suspends non-critical background tasks. Furthermore, if the same operation is triggered consecutively, the preceding unfinished operation is automatically canceled to ensure that the state is consistent with the latest request.
[0115] Furthermore, regarding Error Boundary, it cannot adapt to component-level requirements. Local errors can easily spread to the global scope, disrupting local application functionality. Therefore, this application can pre-inspect resources that block rendering before UI components are rendered. For non-critical resources, a strategy combining lazy loading and preloading can be adopted, such as loading components within the viewport immediately and preloading adjacent components. During the loading process, degraded content can be dynamically switched at any time based on the loading duration, such as skeleton screens, rotating icons, progress bars, etc., to avoid interface flickering caused by short loading cycles.
[0116] Next, we need to handle the asynchronous operation corresponding to the error object. The specific steps are as follows:
[0117] Render the error interface based on the error object;
[0118] The error object is evaluated to determine the error type;
[0119] According to the error type, select the corresponding recovery strategy from the preset strategy set;
[0120] The recovery strategy is configured in the error interface so that the error interface can perform page recovery based on the recovery strategy.
[0121] Specifically, the error object contains key information such as the error type and error message. The Error Boundary can then capture this error object and the error information it contains. Different error types correspond to different recovery strategies, which ensures adaptability. Therefore, the recovery strategy can be configured in the error interface to enable the error page to recover. In this way, the error interface can recover the error page according to the recovery configuration.
[0122] The error types include network errors, data format errors, and permission errors. The preset policy set has a built-in error knowledge base, which defines the default handling method for each error type. For example, for network errors, automatic retry is required; for data format errors, an empty status should be displayed, etc. This embodiment does not impose any restrictions on this.
[0123] The error interface rendered based on the error object includes a retry button, an error details collapse panel, and a backup data display. To achieve autonomy, you can define degraded UI components, styles, and interaction logic by configuring the object.
[0124] Furthermore, after the asynchronous operation is completed, since the state central management library has been updated, this application also includes the following operations:
[0125] Determine whether there is at least one target state node that is not in a successful state in the updated state centralized management database;
[0126] If not, then the global state is aggregated into a success state;
[0127] If so, then determine whether there exists a target state node whose final updated state is an error state;
[0128] If there exists a target state node whose final updated state is an error state, then the global state is aggregated into the error state;
[0129] If there is no target state node whose final state after the update is an error state, then determine whether there is a target state node whose final state after the update is a downgraded loading state.
[0130] If there exists a target state node whose final updated state is a degraded loading state, then the global state is aggregated into the degraded loading state.
[0131] Specifically, error states have high priority. Therefore, if there is a target state node in the state management library whose final state is error, the entire system will be aggregated into an error state. Degradation loading states have lower priority. Only when all target state nodes have a final state of success can the entire system be aggregated into a success state.
[0132] In addition, custom mechanisms can be added to the above process. For example, if the state changes of a route-level component instance take precedence over those of a component-level instance, then the route-level instance needs to take precedence.
[0133] and Figure 1 Corresponding to the method described above, embodiments of the present invention also provide an asynchronous operation processing device for processing... Figure 1 The specific implementation of the method, the asynchronous operation processing device provided in this embodiment of the invention, can be integrated in a computer terminal or various mobile devices. Figure 2 The processing devices for asynchronous operations are introduced, such as... Figure 2 As shown, the device may include:
[0134] The state context creation module 10 is used to create a global state context in the front-end application;
[0135] The target state node creation module 20 is used to create a new state node corresponding to the component instance as the target state node when a component instance is created and inserted into the DOM tree.
[0136] The state centralized management library determination module 30 is used to update the state context according to the target state node to obtain the state centralized management library;
[0137] The state update module 40 is used to monitor the asynchronous operation of the component instance in real time, to determine the final state of the component instance, and to update the final state in the target state node corresponding to the component instance.
[0138] The state change monitoring module 50 is used to register a global listener in the state centralized management library to monitor the state changes of each target state node in the state centralized management library.
[0139] The recovery processing module is used to process the corresponding asynchronous operations based on the state changes of each of the target state nodes.
[0140] As can be seen from the above technical solution, this application creates a global state context in the front-end application; when a component instance is created and inserted into the DOM tree, a new state node corresponding to the component instance is created as the target state node; the state context is updated according to the target state node to obtain a centralized state management library; the asynchronous operations of the component instance are monitored in real time to determine the final state of the component instance, and the final state is updated in the target state node corresponding to the component instance; a global listener is registered in the centralized state management library to listen for state changes of each target state node in the centralized state management library; and the asynchronous operations corresponding to each target state node are processed based on the state changes of each target state node. This application implements a unified asynchronous operation state monitoring and processing mechanism through a global state context, a centralized state management library, and a global listener, achieving cross-component collaboration and asynchronous operation tracking that cannot be achieved by existing technologies.
[0141] Furthermore, embodiments of this application provide an asynchronous processing device. Optionally, Figure 3 A hardware block diagram of an asynchronous processing device is shown, with reference to... Figure 3 The hardware structure of an asynchronous processing device may include: at least one processor 01, at least one communication interface 02, at least one memory 03, and at least one communication bus 04.
[0142] In this embodiment, the number of processor 01, communication interface 02, memory 03 and communication bus 04 is at least one, and processor 01, communication interface 02 and memory 03 communicate with each other through communication bus 04.
[0143] Processor 01 may be a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present invention.
[0144] Memory 03 may include high-speed RAM, and may also include non-volatile memory, such as at least one disk storage device.
[0145] The memory stores a program, which the processor can call. The program is used to perform the following asynchronous operations:
[0146] In the front-end application, create a global state context;
[0147] When a component instance is created and inserted into the DOM tree, a new state node corresponding to the component instance is created as the target state node.
[0148] The state context is updated based on the target state node to obtain a centralized state management library;
[0149] The asynchronous operations of the component instance are monitored in real time to determine the final state of the component instance, and the final state is updated in the target state node corresponding to the component instance.
[0150] Register a global listener in the state centralized management library to monitor the state changes of each target state node in the state centralized management library;
[0151] The asynchronous operations corresponding to each of the target state nodes are processed based on their state changes.
[0152] Optionally, the refined and extended functions of the program can be found in the description of the asynchronous operation processing method in the method embodiment.
[0153] This application embodiment also provides a storage medium that can store a program suitable for execution by a processor. A processing method for controlling the device where the storage medium is located to perform the following asynchronous operations during program execution includes:
[0154] In the front-end application, create a global state context;
[0155] When a component instance is created and inserted into the DOM tree, a new state node corresponding to the component instance is created as the target state node.
[0156] The state context is updated based on the target state node to obtain a centralized state management library;
[0157] The asynchronous operations of the component instance are monitored in real time to determine the final state of the component instance, and the final state is updated in the target state node corresponding to the component instance.
[0158] Register a global listener in the state centralized management library to monitor the state changes of each target state node in the state centralized management library;
[0159] The asynchronous operations corresponding to each of the target state nodes are processed based on their state changes.
[0160] Specifically, the storage medium can be a computer-readable storage medium, which can be an electronic storage device such as flash memory, EEPROM (Electrically Erasable Programmable Read-Only Memory), EPROM, hard disk, or ROM.
[0161] Optionally, the refined and extended functions of the program can be found in the description of the asynchronous operation processing method in the method embodiment.
[0162] Furthermore, the functional modules in the various embodiments of this disclosure can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part. If the function is implemented as 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 disclosure, in essence, or the part that contributes to the prior art, or a part of the 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 cause a computer device (which may be a personal computer, a live streaming device, or a network device, etc.) to execute all or part of the steps of the methods in the various embodiments of this disclosure.
[0163] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
[0164] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.
[0165] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.< / suspense>
Claims
1. A method of processing for asynchronous operation, characterized by, The application relates to a state management method and device for a front-end application. A global state context is created in the front-end application. When a component instance is created and inserted into a DOM tree, a new state node corresponding to the component instance is created as a target state node. The state context is updated according to the target state node to obtain a state centralized management library. Asynchronous operations of the component instance are monitored in real time to determine a final state of the component instance, and the final state is updated in the target state node corresponding to the component instance. A global listener is registered in the state centralized management library to listen to state changes of each target state node in the state centralized management library. Based on the state changes of the target state nodes, corresponding asynchronous operations are processed.
2. The method of claim 1, wherein, The new state node corresponding to the component instance is created as the target state node, including: The type name of the component instance, the index of the component instance and key attributes are obtained. A unique identifier is generated by using the type name, the index of the component instance and the key attributes. The unique identifier is searched in a state set in the state context. If the unique identifier is not contained in the global, a new state node is created for the component instance as the target state node. If the unique identifier is contained in the global, a historical state of the component instance is obtained. The component instance is initialized by using the historical state to establish the new state node as the target state node.
3. The method of claim 1, wherein, The asynchronous operations of the component instance are monitored in real time to determine the final state of the component instance, including: When the asynchronous operations of the component instance are monitored to be started, the state of the component instance is updated to a loading state, a timeout timer is created and started. It is judged whether the asynchronous operations are successful. If yes, the state of the component instance is updated to a success state as the final state of the component instance. If no, the state of the component instance is updated to a failure state, an error object is captured and used as the final state of the component instance. If the timer is timed out during the operation process, the state of the component instance is updated to a degraded loading state as the final state of the component instance.
4. The method of claim 1, wherein, The asynchronous operations corresponding to each target state node are processed based on state changes of the target state nodes, including: For each target state node, when a state change of the target state node is listened to, an event is generated according to the state change. The state type of the new change of the target state node is determined based on the event. The asynchronous operation corresponding to the target state node is processed according to the state type of the new change.
5. The method of claim 4, wherein, If the state type of the new change is a loading state type, a Suspense boundary of the component instance corresponding to the target state node is activated. If the new changed state type is a downgrade loading state type, a suspense boundary corresponding to a component instance of the target state node is activated, and preset metadata is passed to the suspense boundary, so that the suspense boundary performs interface switching according to the metadata; If the new changed state type is an error state type, an error object is extracted from the target state node, and an asynchronous operation corresponding to the target state node is processed according to the error object.
6. The method of claim 5, wherein, The processing of the asynchronous operation according to the error object includes: rendering an error interface according to the error object; error evaluation is performed on the error object to determine an error type; a corresponding recovery strategy is selected from a preset strategy set according to the error type; the recovery strategy is configured in the error interface, so that the error interface performs page recovery based on the recovery strategy.
7. The method according to any one of claims 1 to 6, characterized in that, Further comprising: after the asynchronous operation is processed, the state centralized management library is updated, and it is determined whether there is at least one target state node that is not a success state in the updated state centralized management library; if not, the global state is aggregated as a success state; if yes, it is determined whether there is a target state node whose final state after the update is an error state; if there is a target state node whose final state after the update is an error state, the global state is aggregated as the error state; if there is no target state node whose final state after the update is an error state, it is determined whether there is a target state node whose final state after the update is a downgrade loading state; if there is a target state node whose final state after the update is a downgrade loading state, the global state is aggregated as the downgrade loading state.
8. A processing device operating asynchronously, characterized by comprising: a state context creation module, configured to create a global state context in a front-end application; a target state node creation module, configured to create a new state node corresponding to a component instance as a target state node when the component instance is created and inserted into a DOM tree; a state centralized management library determination module, configured to update the state context according to the target state node to obtain a state centralized management library; a state update module, configured to monitor asynchronous operations of the component instance in real time to determine a final state of the component instance, and update the final state in the target state node corresponding to the component instance; a state change monitoring module, configured to register a global listener in the state centralized management library to monitor state changes of each target state node in the state centralized management library; a recovery processing module, configured to process asynchronous operations corresponding to each target state node based on state changes of the target state nodes.
9. A processing device operating asynchronously, characterized by comprising a memory and a processor; the memory is configured to store a program; the processor is configured to execute the program to implement each step of the asynchronous operation processing method according to any one of claims 1-7.
10. A storage medium having stored thereon a computer program, characterized in that The computer program is executed by the processor to implement each step of the asynchronous operation processing method according to any one of claims 1-7. The computer program is executed by the processor to implement each step of the asynchronous operation processing method according to any one of claims 1-7.