Блог

Главная - Вопросы по программированию - Как предотвратить непрерывные клики конечных пользователей при отправке данных?

Как предотвратить непрерывные клики конечных пользователей при отправке данных?

#angular #rxjs

Вопрос:

Я исследую Rxjs с помощью exhaustMap, но он доступен для наблюдения более высокого порядка. В моем случае просто добавьте строку в базу данных. есть ли какой-нибудь другой способ, так как я не использую более высокий порядок

Комментарии:

1. Вы можете использовать exhaustMap перед сохранением в БД, его оператор, вы можете поделиться своим кодом

2. Пожалуйста, покажите свой код 🙂

3. Как только он будет отправлен, вы можете отключить кнопку, и как только ответ будет получен(успех/ошибка), вы можете решить включить его снова.

Ответ №1:

Оператор более высокого порядка exhaustMap будет игнорировать любые исходящие значения из источника до тех пор, пока не завершится внутреннее наблюдаемое. https://www.learnrxjs.io/learn-rxjs/operators/transformation/exhaustmap

В вашем случае вы можете сделать такое:

 const btnClicks$ = fromEvent(addRowBtn, 'click')

btnClicks$.pipe(
  exhaustMap((_) => {
    //clear form here for example to make sure the user will not send the same data again.
    return callToApi(formData)
  })
  // Any click event will simply be ignored until you get a response from api.
).subscribe()

Обратите внимание, что здесь exhaustMap работает только с наблюдаемыми объектами, если ваша функция callToApi() возвращает обещание, вы можете обернуть его с помощью функции defer() примерно так:

 const btnClicks$ = fromEvent(addRowBtn, 'click')

const addRowApi = defer(() => callToApi(formData)) // this returns an observable that exhaustMap can subscribe to.

btnClicks$.pipe(
  exhaustMap((_) => {
    //clear form here for example to make sure the user will not send the same data again from example
    return addRowApi()
  })
  // Any click event will simply be ignored until you get a response from api.
).subscribe()

Ответ №2:

Звучит так, как будто ты за этим охотишься throttleTime .

throttleTime выдает значение из наблюдаемого источника, затем игнорирует последующие значения источника в течение миллисекунд, а затем повторяет этот процесс.

Вот пример:

 const clicks$ = fromEvent(startBtn, 'click');

function dataBaseApi(dataRow): Observable<ResponseType>{
  return addDataToRow(dbClient, dataRow);
}

clicks$.pipe(
  throttleTime(2000),
  map(clickToData),
  concatMap(dataBaseApi)
).subscribe();
Метки: