Are you still worrying about repeated requests in the project?

github blog: https://github.com/SugarTurboS/Blogs/issues/44

If the article is helpful to you, please send a star, thank you.

Are you still worrying about repeated requests in the project?

Preface

Recently, it was discovered that there will be some repeated requests in the project. In some pages, requests with the same parameters and the same address will be sent multiple times within 1 second. In order to solve this problem, two tools ( repeat-request-minder and repeat-request-minder-webpack-plugin ) were finally made to help us avoid repeated requests.

background

As the project becomes more and more complex, it is inevitable that when writing the code, you will not notice that some requests have been sent in other components, especially after hooks are used. Some hooks encapsulate the logic of the request in useEffect, and the hooks are too many. Two component references caused duplicate requests. In addition, it is also possible that the click of the button does not have anti-shake, resulting in repeated sending requests.
Usually, we can only manually check these situations on the console, which is difficult to find and deal with.

The harm of repeated requests

These repeated requests have two main effects

Increase the pressure on the server
The page may be displayed incorrectly due to a failed request

Solutions

Pre-processing

In general, you may not notice duplicate requests during development. To avoid this situation, you need to automatically monitor and give warnings to prevent duplicate requests from the source.

Post-processing

After repeated requests occur, the last request can be automatically taken, and the previous request is not issued.

in conclusion

However, the reasons for the problems are different, because we should not automatically help developers to cover up the problems, but should expose the problems and let the developers fix them by themselves. Therefore, I decided to build a tool that can automatically monitor http requests during the development process and give prompts when repeated requests occur.

Method to realize

You can monitor whether each request is repeated by rewriting the method in XMLHttpRequest. The judgment method is: record the address, parameters and request time of the interface request in an object, judge whether the current request is sent continuously within 1s, and then judge whether the parameters are the same. If the conditions are met, toast prompts and prints the prompts on the console.

optimization

Since an object is used to cache the address parameter and timestamp of each request, it is possible that the memory occupied by this object is too large due to a large number of requests.
In order to control the memory, the LRU Cache algorithm is introduced to control the size of the cache. Currently, the maximum number of cache requests is set to 30. When there are new requests, the infrequently used caches will be deleted first to ensure that the number of caches does not exceed 30. This algorithm mainly uses a map object and a doubly linked list to implement, ensuring that the time complexity of adding and inserting is o(1).

effect

toast prompt

console output

Introduction to repeat-request-minder

repeat-request-minder is an npm package that encapsulates the above functions, it is very simple to use

npm i --save-dev repeat-request-minder

import repeatRequestMinder from 'repeat-request-minder';
repeatRequestMinder();

After the call, it can automatically monitor whether there are repeated requests in the project and give a prompt. If it is not set, the toast prompt will be displayed by default, and the display time is 3 seconds.

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

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

Introduction to repeat-request-minder-webpack-plugin

Since the packages mentioned above need to be called in the code, sometimes we may not want this function to be intrusive to the business.
So based on repeat-request-minder, a webpack plug-in was made. The function of this plug-in is to insert a section of immediate execution function into the entry code after the code is packaged, and call the code of repeat-request-minder.
With this webpack plug-in, we only need to introduce this plug-in in the development configuration of webpack to monitor repeated requests during the development process and give developers tips. The method of use is as follows:

npm i --save-dev repeat-request-minder-webpack-plugin

const RepeatRequestMinderWebpackPlugin = require('repeat-request-minder-webpack-plugin');
new RepeatRequestMinderWebpackPlugin({
  chunk: 'index',
}),

The chunk parameter is the name of the entry in webpack, just fill in the name of the entry you want to insert this function.

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

In addition, isShowToast and toastTime can also be passed in to control whether to display the toast prompt and the length of the prompt display.

Github address

repeat-request-minder
repeat-request-minder-webpack-plugin
if you find it useful, you can click a star✨ support it