Вы все еще беспокоитесь о повторяющихся запросах в вашем проекте?

JavaScript TypeScript

github blog: GitHub.com/сахарные турбины…

предисловие

Недавно было обнаружено, что в проекте будут повторные запросы, на некоторых страницах запросы с одинаковыми параметрами и одним и тем же адресом будут отправляться несколько раз в течение 1 с. Для решения этой проблемы в итоге были изготовлены два инструмента (repeat-request-minderа такжеrepeat-request-minder-webpack-plugin), чтобы помочь нам избежать дублирования запросов.

задний план

Поскольку проект становится все более и более сложным, при написании кода неизбежно, что некоторые запросы были отправлены другими компонентами, особенно после использования хуков, некоторые хуки инкапсулируют логику запроса в useEffect, а хуки используются многими ссылками на компоненты. вызвать дублирование запросов. Кроме того, также возможно, что при нажатии кнопки отсутствует защита от сотрясения, что приводит к повторной отправке запросов. Обычно перед лицом таких ситуаций мы можем только вручную проверить консоль, которую сложно найти и разобраться.

Опасность повторного запроса

Есть два основных эффекта от этих дублирующих запросов.

  • увеличить нагрузку на сервер
  • Страница может отображать ошибку, поскольку один из этих запросов не выполнен

Решения

предварительная обработка

В общем, вы можете не замечать повторных запросов при разработке, чтобы избежать такой ситуации, вам нужно автоматически отслеживать и выдавать предупреждения, чтобы предотвратить появление повторных запросов от источника.

Постобработка

После повторных запросов последний запрос может быть получен автоматически, а предыдущий запрос не будет выдан.

В заключение

Однако причины проблем разные, потому что мы не должны автоматически помогать разработчикам скрывать проблемы, а должны выявлять проблемы и позволять разработчикам решать их самостоятельно. Поэтому я решил сделать инструмент, который может автоматически отслеживать http-запросы в процессе разработки и выдавать подсказки при возникновении повторных запросов.

Метод реализации

Вы можете контролировать, повторяется ли каждый запрос, переписав метод в XMLHttpRequest.Метод оценки: запишите адрес, параметры и время запроса запроса интерфейса в объект, оцените, отправляется ли текущий запрос непрерывно в течение 1 с, а затем оцените совпадают ли параметры. Если условие выполнено, поднимите приглашение и распечатайте приглашение на консоли.

оптимизация

Поскольку объект используется для кэширования адресных параметров и меток времени каждого запроса, возможно, что память, занимаемая этим объектом, слишком велика из-за большого количества запросов.
Для управления памятью введен алгоритм LRU Cache для управления размером кэша. В настоящее время максимальное количество запросов кэша установлено на 30. При появлении новых запросов сначала удаляются редко используемые кэши, чтобы количество кэшей не превышало 30. Этот алгоритм в основном реализуется с использованием объекта карты и двусвязного списка, гарантируя, что временная сложность добавления и вставки составляет O (1).

Эффект

подсказки для тостовконсольный вывод

Описание повторного запроса

Repeat-request-minder — это пакет npm, который инкапсулирует вышеперечисленные функции, и его очень просто использовать.

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

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

После звонка можно автоматически отслеживать, нет ли в проекте повторяющихся запросов, и давать подсказку. Если не установлено, тост будет отображаться по умолчанию, а время отображения составляет 3 секунды.

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

Вы также можете передать isShowToast и toastTime, чтобы указать, показывать ли всплывающее уведомление и как долго оно отображается.

Введение в плагин Repeat-Request-Minder-Webpack-Plugin

Так как упомянутый выше пакет должен вызываться в коде, мы иногда не хотим, чтобы эта функция была навязчивой для бизнеса.
Итак, на основе Repeat-Request-Minder сделан плагин webpack, функция этого плагина заключается в том, чтобы вставить функцию немедленного выполнения в код входа и вызвать код Repeat-Request-Minder после упаковки кода. .
С этим плагином веб-пакета нам нужно только ввести этот плагин в конфигурацию разработки веб-пакета, чтобы отслеживать повторяющиеся запросы в процессе разработки и подсказывать разработчикам. Способ применения следующий:

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

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

Параметр чанка — это имя записи в веб-пакете, просто введите имя записи, которую вы хотите вставить в эту функцию.

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

Кроме того, isShowToast и toastTime также могут быть переданы для управления отображением подсказки всплывающего уведомления и продолжительностью отображения подсказки.

адрес гитхаба

repeat-request-minder
repeat-request-minder-webpack-plugin
Если вы сочтете это полезным, вы можете нажать звездочку✨, чтобы поддержать

Категории