Making a blog: github.com/SugarTurboS…

preface

Recently, it was found that there were some duplicate requests in the project. In some pages, requests with the same parameters and the same address were sent several times consecutively within 1s. In order to solve this problem, two tools (rest-request-minder and rest-request-minder-webpack-plugin) were developed to help us avoid duplicate requests.

background

As projects become more complex, it is inevitable to write code that fails to notice that some requests have already been sent by other components, especially after hooks are used. Some hooks encapsulate the logic of the request in useEffect, and hooks are referenced by multiple components, resulting in repeated requests. It is also possible that button clicks are not buffered causing repeated requests to be sent. Usually facing these situations, we can only artificially check on the console, which is difficult to find and deal with.

The dangers of repeated requests

These repeated requests have two main effects

  • Increase the stress on the server
  • The page may display incorrectly because one of the requests failed

solution

pre-processing

Repeated requests may not be noticed during development, and to avoid this requires automatic monitoring and warning to prevent repeated requests from occurring in the first place.

Post processing

After a repeated request can automatically take the last request, do not issue the previous request.

conclusion

However, the reasons for the problems vary, because we should not automatically cover up the problems for the developers, but rather expose them for the developers to fix. Therefore, I decided to make a tool that can automatically monitor HTTP requests during the development process and give hints when repeated requests occur.

implementation

Can be done by rewriting method of XMLHttpRequest to monitor whether each request repeat, judgment method is: record interface address, parameters, and request time in an object, judge whether the current request within 1 s continuous send, again to determine whether a parameter is the same, if meet the conditions, a bigger tips and you will be prompted to print in the console.

To optimize the

Because an object is used to cache address parameters and timestamps for each request, it is possible that this object will consume too much memory due to the large number of requests. In order to control memory, LRU Cache algorithm is introduced to control the size of Cache. Currently, the maximum number of cache requests is set to 30. When receiving new requests, the cache that is not frequently used is deleted to ensure that the number of cache requests does not exceed 30. This algorithm mainly uses a map object and a bidirectional linked list to achieve the time complexity of new and insert is O (1).

The effect

A bigger tipConsole output

Repeat – request – minder is introduced

Repeat -request-minder is an NPM package that encapsulates the above functionality and is simple to use

npm i --save-dev repeat-request-minder
Copy the code
import repeatRequestMinder from 'repeat-request-minder';
repeatRequestMinder();
Copy the code

This will automatically monitor the project for duplicate requests and prompt you. If this parameter is not set, the toast prompt will be displayed for 3 seconds by default.

repeatRequestMinder({
  isShowToast: true,
  toastTime: 10000
});
Copy the code

You can also pass isShowToast and toastTime to control whether and for how long the toast prompt is displayed.

Repeat – request – minder webpack – the plugin is introduced

Since the package mentioned above needs to be invoked in code, however, we may not want this feature to be intrusive to the business at times. We made a webpack plug-in based on the repeat-request-minder. The purpose of this plug-in is to insert the entry code into a function that calls the repeat-request-minder immediately after the code is packaged. With the WebPack plugin, we can simply introduce the plugin into the WebPack development configuration to monitor repeated requests and alert developers during development. The usage method is as follows:

npm i --save-dev repeat-request-minder-webpack-plugin
Copy the code
const RepeatRequestMinderWebpackPlugin = require('repeat-request-minder-webpack-plugin');
new RepeatRequestMinderWebpackPlugin({
  chunk: 'index',
}),
Copy the code

The chunk parameter is the name of the entry in the Webpack. Fill in the name of the entry you want to insert this feature into.

new RepeatRequestMinderWebpackPlugin({
  chunk: 'index',
  isShowToast: true,
  toastTime: 10000
}),
Copy the code

You can also pass isShowToast and toastTime to control whether and how long the toast prompt is displayed.

Making the address

Repeat -request-minder repeat-request-minder-webpack-plugin