¿Sigue preocupado por las solicitudes repetidas en el proyecto?

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

Si el artículo es útil para usted, envíe una estrella, gracias.

Prefacio

Recientemente, se descubrió que habrá algunas solicitudes repetidas en el proyecto. En algunas páginas, las solicitudes con los mismos parámetros y la misma dirección se enviarán varias veces en 1 segundo. Para resolver este problema, finalmente se crearon dos herramientas ( repeat-request-minder y repeat-request-minder-webpack-plugin ) para ayudarnos a evitar solicitudes repetidas.

antecedentes

A medida que el proyecto se vuelve cada vez más complejo, es inevitable que al escribir el código, no se dé cuenta de que se han enviado algunas solicitudes en otros componentes, especialmente después de que se utilizan ganchos. Algunos ganchos encapsulan la lógica de la solicitud en useEffect, y los ganchos son demasiados Las referencias de dos componentes provocaron solicitudes duplicadas. Además, también es posible que el clic del botón no tenga anti-vibración, provocando el envío de solicitudes repetidas.
Por lo general, solo podemos verificar manualmente estas situaciones en la consola, lo cual es difícil de encontrar y manejar.

El daño de las solicitudes repetidas

Estas solicitudes repetidas tienen dos efectos principales

• Aumenta la presión sobre el servidor
• La página puede mostrarse incorrectamente debido a una solicitud fallida.

Soluciones

Preprocesamiento

En general, es posible que no note solicitudes duplicadas durante el desarrollo. Para evitar esta situación, debe monitorear y dar advertencias automáticamente para evitar solicitudes duplicadas desde la fuente.

Postprocesamiento

Después de que se produzcan solicitudes repetidas, la última solicitud se puede tomar automáticamente y la solicitud anterior no se emite.

En conclusión

Sin embargo, las razones de los problemas son diferentes, porque no deberíamos ayudar automáticamente a los desarrolladores a encubrir los problemas, sino que deberíamos exponer los problemas y dejar que los desarrolladores los solucionen por sí mismos. Por lo tanto, decidí crear una herramienta que pueda monitorear automáticamente las solicitudes http durante el proceso de desarrollo y dar indicaciones cuando se produzcan solicitudes repetidas.

Método para realizar

Puede monitorear si cada solicitud se repite reescribiendo el método en XMLHttpRequest. El método de juicio es: registrar la dirección, los parámetros y el tiempo de solicitud de la solicitud de interfaz en un objeto, juzgar si la solicitud actual se envía continuamente dentro de 1s y luego juzgar si los parámetros son los mismos. Si se cumplen las condiciones, los mensajes tostados e imprimen los mensajes en la consola.

mejoramiento

Dado que un objeto se utiliza para almacenar en caché el parámetro de dirección y la marca de tiempo de cada solicitud, es posible que la memoria ocupada por este objeto sea demasiado grande debido a una gran cantidad de solicitudes.
Para controlar la memoria, se introduce el algoritmo LRU Cache para controlar el tamaño de la caché. En la actualidad, el número máximo de solicitudes de caché se establece en 30. Cuando hay nuevas solicitudes, las cachés que se utilizan con poca frecuencia se eliminarán primero para garantizar que la cantidad de cachés no supere las 30. Este algoritmo utiliza principalmente un objeto de mapa y una lista doblemente enlazada para implementar, asegurando que la complejidad de tiempo de agregar e insertar sea o (1).

efecto

brindis

salida de consola

Introducción a repeat-request-minder

repeat-request-minder es un paquete npm que encapsula las funciones anteriores, es muy simple de usar

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

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

Después de la llamada, puede monitorear automáticamente si hay solicitudes repetidas en el proyecto y dar un aviso. Si no está configurado, el mensaje de brindis se mostrará de forma predeterminada y el tiempo de visualización es de 3 segundos.

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

También es posible pasar isShowToast y toastTime para controlar si se muestra el mensaje de brindis y la duración de la visualización del mensaje.

Introducción a repeat-request-minder-webpack-plugin

Dado que los paquetes mencionados anteriormente deben llamarse en el código, es posible que a veces no deseemos que esta función sea intrusiva para el negocio.
Entonces, basado en repeat-request-minder, se creó un complemento webpack. La función de este complemento es insertar una sección de función de ejecución inmediata en el código de entrada después de empaquetar el código, y llamar al código de repeat-request-minder.
Con este complemento de paquete web, solo necesitamos introducir este complemento en la configuración de desarrollo del paquete web para monitorear las solicitudes repetidas durante el proceso de desarrollo y dar consejos a los desarrolladores. El método de uso es el siguiente:

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

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

El parámetro chunk es el nombre de la entrada en el paquete web, solo complete el nombre de la entrada en la que desea insertar esta función.

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

Además, isShowToast y toastTime también se pueden pasar para controlar si se muestra el mensaje de brindis y la duración de la visualización del mensaje.

Dirección de Github

repeat-request-minder
repeat-request-minder-webpack-plugin
si lo encuentra útil, puede hacer clic en una estrella✨ apoyarlo