CN110231964B - Method for preventing repeated requests during dynamic loading of js resources - Google Patents
Method for preventing repeated requests during dynamic loading of js resources Download PDFInfo
- Publication number
- CN110231964B CN110231964B CN201910508793.0A CN201910508793A CN110231964B CN 110231964 B CN110231964 B CN 110231964B CN 201910508793 A CN201910508793 A CN 201910508793A CN 110231964 B CN110231964 B CN 110231964B
- Authority
- CN
- China
- Prior art keywords
- javascript
- resource
- promise
- resources
- instance
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44568—Immediately runnable code
- G06F9/44578—Preparing or optimising for loading
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
- Devices For Executing Special Programs (AREA)
Abstract
The invention discloses a method for preventing repeated requests when dynamically loading js resources, which maintains corresponding Promise instances of different js resources by using a map object and dynamically loads the js resources by creating script tags in the Promise object instances, so that when each component refers to the same js resource, the obtained Promise instances are unique, the introduction of the same js resource by different components is ensured to be consistent, and the repeated requests of the same js resource are prevented.
Description
Technical Field
The invention relates to the technical field of webpage js loading, in particular to a method for preventing repeated requests during dynamic loading of js resources.
Background
In the html page, when external js resources are needed, the js resources can be dynamically introduced by creating a script tag, setting the src attribute of the script tag and adding the script tag to the head element. In a single-page application developed by using a exact framework, when a brother or a father and son component simultaneously depends on a same external js resource, a method for creating a script tag to dynamically introduce the js resource can be used. Because this method is asynchronous, when the first request for an external js resource has not returned success, another component determines that the js resource has not been acquired and dynamically loads the same js resource again through the script tag. This can result in repeated requests for the same js resource, as well as repeated execution of the introduced js code.
Disclosure of Invention
Aiming at the problems, the invention provides a method for preventing repeated requests during dynamic loading of js resources, which solves the problem of repeated requests which may occur during dynamic loading of js resources by creating script tags.
The invention realizes the purpose through the following technical scheme:
a method for preventing repeated requests during dynamic loading of js resources comprises the following steps:
step one, creating a javascript file, creating a javascript object config used for configuration in a js file, wherein keys in the config object are js resource identifiers, and values in the config object are addresses of corresponding js resources;
step two, a map object is created, keys in the map object are js resource identifiers, and the values of the keys are corresponding premium objects;
step three, a loadJs function is created and is derived through an export command, an id parameter is received, the id parameter is a js resource identifier, whether a map object contains the js resource identifier or not is judged in the loadJs function, and if yes, a Promise object instance corresponding to the id is returned; if not, a new Promise object is created and returned, and the js resource identifier and the corresponding Promise object instance are stored in the map object;
step four, in a Promise object instance, judging whether js resources to be introduced are successfully requested or not according to whether the window object has an attribute with an incoming id as a name or not, if so, calling a resolve method to change the state of the Promise object into a success state, otherwise, dynamically creating a script tag, inquiring a corresponding js resource address url in a configuration object config according to the js resource identifier, setting the src attribute of the script tag to introduce external js resources, and calling the resolve method in an onload event of the script tag to change the state of the Promise object into a success state, namely, the request of the js resources is successful;
step five, other modules import loadJs function through import command, obtain the corresponding Promise instance according to the js resource identification to be used, and can execute the code depending on the required js resource in the then method of the Promise instance;
through the steps, when a plurality of components depend on the same js resource and dynamically load the resource by using the created script tag, repeated requests and repeated execution of codes on the same resource due to asynchronization are avoided.
The method further comprises the step of judging whether the js resource identifier in the step one is used for judging whether the attribute exists on the window object so as to judge whether the introduction of the js resource of a third party is successful.
The invention has the beneficial effects that:
the method of the invention maintains the corresponding Promise instances of different js resources by using one map object, dynamically loads the js resources by creating the script tag in the Promise object instances, realizes that the obtained Promise instances are unique when each component refers to the same js resource, ensures that the introduction of the same js resource by different components is consistent, and prevents repeated requests for the same js resource.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the embodiments or the drawings needed to be practical in the prior art description, and obviously, the drawings in the following description are only some embodiments of the embodiments, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
FIG. 1 is a flow chart of the method of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the technical solutions of the present invention will be described in detail below. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. All other embodiments, which can be derived by a person skilled in the art from the examples given herein without any inventive step, are within the scope of the present invention.
In any embodiment, as shown in fig. 1, a method for preventing repeated requests when dynamically loading js resources according to the present invention includes the following steps:
step one, creating a javascript file, creating a javascript object config used for configuration in a js file, wherein keys in the config object are js resource identifiers, and values in the config object are addresses of corresponding js resources; the js resource identifier is used for judging whether the attribute exists on the window object so as to judge whether the introduction of the js resource of a third party is successful;
step two, a map object is created, keys in the map object are js resource identifiers, and the values of the keys are corresponding premium objects;
step three, a loadJs function is created and is derived through an export command, an id parameter is received, the id parameter is a js resource identifier, whether a map object contains the js resource identifier or not is judged in the loadJs function, and if yes, a Promise object instance corresponding to the id is returned; if not, a new Promise object is created and returned, and the js resource identifier and the corresponding Promise object instance are stored in the map object;
step four, in a Promise object instance, judging whether js resources to be introduced are successfully requested or not according to whether the window object has an attribute with an incoming id as a name or not, if so, calling a resolve method to change the state of the Promise object into a success state, otherwise, dynamically creating a script tag, inquiring a corresponding js resource address url in a configuration object config according to the js resource identifier, setting the src attribute of the script tag to introduce external js resources, and calling the resolve method in an onload event of the script tag to change the state of the Promise object into a success state, namely, the request of the js resources is successful;
step five, other modules import loadJs function through import command, obtain the corresponding Promise instance according to the js resource identification to be used, and can execute the code depending on the required js resource in the then method of the Promise instance;
through the steps, when a plurality of components depend on the same js resource and dynamically load the resource by using the created script tag, repeated requests and repeated execution of codes on the same resource due to asynchronization are avoided.
In an embodiment, as shown in fig. 1, a method for preventing repeated requests during dynamically loading js resources of the present invention includes the following steps:
creating a javascript file, creating a javascript object config used as configuration in the js file, wherein a key in the config object is a js resource identifier, and the identifier is a character string, and judging whether the request of the js resource of a third party is successful or not according to whether the attribute exists on the window object or not; the value in the config object is the address of the corresponding js resource;
creating a map object, wherein the key in the map object is also a js resource identifier and the value is the corresponding Promise object;
then creating a loadJs function, exporting the loadJs function through an export command, receiving an id parameter, wherein the id parameter is a js resource identifier, judging whether a map object contains the js resource identifier in the loadJs function, and returning a Promise object instance corresponding to the id if the map object contains the js resource identifier; if not, a new Promise object is created and returned, and the js resource identifier and the corresponding Promise object instance are stored in the map object;
judging whether the js resource to be introduced is successfully requested or not according to the id parameter, namely the js resource identifier in the instance of the Promise object, if so, calling a resolve method, otherwise, inquiring the corresponding js resource address url in the configuration object config according to the js resource identifier, dynamically creating a script tag, setting the src attribute of the script tag to introduce the external js resource, and changing the state of the Promise object into success by calling the resolve method in the onload event of the script tag, namely, the request for the js resource is successful.
Other modules import loadJs functions through import commands and acquire the Promise objects corresponding to js resource identifiers, so that when a plurality of components depend on an external js resource at the same time, a request is only initiated once for the same js resource, and repeated requests and repeated execution of codes are prevented.
The method of the invention maintains the corresponding Promise instances of different js resources by using one map object, dynamically loads the js resources by creating the script tag in the Promise object instances, realizes that the obtained Promise instances are unique when each component refers to the same js resource, ensures that the introduction of the same js resource by different components is consistent, and prevents repeated requests for the same js resource.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. The various features described in the foregoing detailed description may be combined in any suitable manner without contradiction, and various combinations that are possible in the present invention will not be further described in order to avoid unnecessary repetition. Any combination of the different embodiments of the present invention is also possible, and the same should be considered as the disclosure of the present invention as long as it does not depart from the gist of the present invention.
Claims (2)
1. A method for preventing repeated requests during dynamic loading of JavaScript resources is characterized by comprising the following steps:
step one, creating a JavaScript file, creating a JavaScript object config used for configuration in the JavaScript file, wherein keys in the config object are JavaScript resource marks, and values in the config object are addresses corresponding to JavaScript resources;
step two, a map object is created, keys in the map object are also JavaScript resource marks, and the value of the keys is the corresponding Promise object;
step three, a loadJavaScript function is created and is derived through an export command, an id parameter is received, the id parameter is a JavaScript resource identifier, whether a map object contains the JavaScript resource identifier or not is judged in the loadJavaScript function, and if the map object contains the JavaScript resource identifier, a Promise object instance corresponding to the id parameter is returned; if not, a new Promise object is created and returned, and the JavaScript resource identification and the corresponding Promise object instance are stored in the map object;
step four, in the instance of the Promise object, judging whether the JavaScript resource to be introduced is successfully requested or not according to whether the window object has an attribute with the transmitted id parameter as the name, if so, calling a resolve method to change the state of the Promise object into a successful state, otherwise, dynamically creating a JavaScript label, inquiring a corresponding JavaScript resource address url in a configuration object config according to the JavaScript resource identifier, setting the src attribute of the JavaScript label to introduce the external JavaScript resource, and changing the state of the Promise object into a successful state by calling the resolve method in the onload event of the JavaScript label, namely, successfully requesting the JavaScript resource;
and step five, other modules import the loadJavaScript function through the import command, acquire the corresponding Promise instance according to the JavaScript resource identification to be used, and execute the code depending on the needed JavaScript resource in the method of the Promise instance.
2. The method of claim 1, wherein the JavaScript resource identifier in the first step is used to determine whether the attribute exists on the window object, so as to determine whether the third-party JavaScript resource is successfully introduced.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910508793.0A CN110231964B (en) | 2019-06-12 | 2019-06-12 | Method for preventing repeated requests during dynamic loading of js resources |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910508793.0A CN110231964B (en) | 2019-06-12 | 2019-06-12 | Method for preventing repeated requests during dynamic loading of js resources |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110231964A CN110231964A (en) | 2019-09-13 |
| CN110231964B true CN110231964B (en) | 2021-06-22 |
Family
ID=67859876
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910508793.0A Active CN110231964B (en) | 2019-06-12 | 2019-06-12 | Method for preventing repeated requests during dynamic loading of js resources |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110231964B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112612530B (en) * | 2019-09-18 | 2022-05-17 | 华为技术有限公司 | Class query method and device |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106293714A (en) * | 2016-07-29 | 2017-01-04 | 四川天邑康和通信股份有限公司 | A kind of method of improvement ajax performance based on data Layer |
| CN109710347A (en) * | 2018-10-16 | 2019-05-03 | 北京天地和兴科技有限公司 | A method of list page is generated with filtering function based on MVC frame Efficient Development |
| CN109783183A (en) * | 2019-02-18 | 2019-05-21 | 北京达佳互联信息技术有限公司 | Request processing method, device, electronic equipment and storage medium |
-
2019
- 2019-06-12 CN CN201910508793.0A patent/CN110231964B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106293714A (en) * | 2016-07-29 | 2017-01-04 | 四川天邑康和通信股份有限公司 | A kind of method of improvement ajax performance based on data Layer |
| CN109710347A (en) * | 2018-10-16 | 2019-05-03 | 北京天地和兴科技有限公司 | A method of list page is generated with filtering function based on MVC frame Efficient Development |
| CN109783183A (en) * | 2019-02-18 | 2019-05-21 | 北京达佳互联信息技术有限公司 | Request processing method, device, electronic equipment and storage medium |
Non-Patent Citations (5)
| Title |
|---|
| axios 的二次封装（拦截重复请求、异常统一处理）;大白;《https://segmentfault.com/a/1190000016457844》;20180919;全文 * |
| js promise 的使用;拉面的无聊时光;《https://www.jianshu.com/p/1be39e24f020》;20171110;全文 * |
| JS解决页面多次，重复请求 的2个方法;weixin_30739595;《https://blog.csdn.net/weixin_30739595/article/details/98212601》;20170624;全文 * |
| Promise 异步流程控制;wheato;《https://juejin.cn/post/6844903501315719176》;20170929;全文 * |
| Using multiple requests with promise [duplicate];Meanteacher;《https://stackoverflow.com/questions/44294280/using-multiple-requests-with-promise》;20170601;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110231964A (en) | 2019-09-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108255615B (en) | Cross-language calling method, server and storage medium | |
| EP3975474B1 (en) | Methods and apparatuses for chaining service data | |
| CN108363588B (en) | Method for realizing interaction between web and native function, electronic device and readable storage medium | |
| CN107450928B (en) | Hybrid development method based on cache technology | |
| CN105468369A (en) | Method and system for calling native function by JavaScript on mobile platform | |
| CN107357885B (en) | Data writing method and device, electronic equipment and computer storage medium | |
| CN110096541B (en) | Method and device for data exchange between databases | |
| CN110231964B (en) | Method for preventing repeated requests during dynamic loading of js resources | |
| CN104881808A (en) | Method, server and system for obtaining auction data in real time | |
| CN104361040A (en) | Method and device for customized query | |
| CN105847319A (en) | Mobile terminal network request method and system | |
| CN104143110A (en) | Two-dimensional code generating method with web site information | |
| KR102583532B1 (en) | Scheduling method and apparatus, device and storage medium | |
| CN110990000B (en) | Data request processing method, device and equipment of MVC pattern design model layer | |
| CN112925586A (en) | Applet routing method, device, computer equipment and storage medium | |
| CN104317819A (en) | Method and system for webpage cross-domain communication based on browsers | |
| CN111966704A (en) | ORM framework implementation method, system, computer equipment and storage medium | |
| KR102572013B1 (en) | Request processing method, apparatus, device and computer storage medium | |
| CN113779122B (en) | Method and device for exporting data | |
| CN112272135B (en) | Mail sending method, device, equipment and storage medium for storage software | |
| CN114115648B (en) | Data request processing method, device, equipment and storage medium | |
| CN114090625A (en) | Data processing method, device, equipment and computer readable storage medium | |
| CN104965909A (en) | Dynamic web content request handling method | |
| CN111026563B (en) | Interface calling method and device, storage medium and electronic equipment | |
| CN117850753B (en) | Method, device, equipment and medium for generating interface code based on someip matrix |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |