问避免http请求垃圾邮件
EN

Stack Overflow用户

提问于 2021-06-14 14:21:30

回答 1查看 108关注 0票数 0

我有一个切换开关，当它被触发时，它会发出http补丁请求。下面你可以看到它是什么样子的：

模板：

<div id="toggle-status-btn-container">
    <div class="slider" [ngClass]="{'to-right': !shopIsOpen}"></div>
    <div class="label-container">
        <label class="store-opened" (click)="updateShopSlotsStatus(true)" [ngClass]="{'toggled-opened-text': !shopIsOpen}">OPENED</label>
    </div>
    <div class="label-container">
        <label class="store-closed" (click)="updateShopSlotsStatus(false)" [ngClass]="{'toggled-closed-text': !shopIsOpen}">CLOSED</label>
    </div>
</div>

它工作得很好，但到目前为止，用户可以垃圾邮件这个切换开关，触发多个http请求。

我能做些什么来防止这种行为？如果用户正在发送垃圾邮件切换开关，我不想触发http请求。也许有一种方法可以只触发最后一个？由于我是RxJ的新手，我真的不知道如何解决这个问题。

下面是在组件.ts中由click事件调用的方法：

updateShopSlotsStatus(isOpen: boolean){
    this.shopIsOpen = isOpen;
    this.apiService.updateShopSlotsStatus(isOpen, this.weekDay).subscribe();
}

以及服务文件中的http请求：

updateShopSlotsStatus(isOpen: boolean, weekDay: string){
    const endpoint = this.url + "shipping/" + this.webzineId + "/delivery_slots" + "/";
    return this.http.patch(endpoint, {"slots": { [weekDay] : { "enabled": isOpen }}});
}

提前谢谢。

angular

typescript

rxjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-14 17:27:49

您可能希望像在this StackBlitz中那样组合使用BehaviorSubject和switchMap。

在这里，我将打开和关闭按钮绑定到一个函数，该函数更改BehaviorSubject的值，如下所示：

模板：

  <button
    (click)="updateShopSlotsStatus(true)"
    [ngClass]="{'selected': shopSlotStatus$ | async}"
  >
    OPEN
  </button>
  <button
    (click)="updateShopSlotsStatus(false)"
    [ngClass]="{'selected': !(shopSlotStatus$ | async)}"
  >
    CLOSED
  </button>

ts：

  updateShopSlotsStatus(isOpen: boolean) {
    this.shopSlotStatusSubject$.next(isOpen);
  }

然后，您可以观察BehaviorSubject上的更改，如下所示：

  private shopSlotStatusSubject$: BehaviorSubject<
    boolean
  > = new BehaviorSubject(false);

  // shared so only one subscription is maintained
  private readonly shopSlotStatus$ = this.shopSlotStatusSubject$
    .asObservable()
    .pipe(share());

  readonly changeSlotStatus$ = this.shopSlotStatus$.pipe(
    // you could introduce a debounceTime here if you wanted
    // debounceTime(500),
    tap(() => (this.changingStatus = true)),
    // faked API call here
    switchMap(status => this.appService.updateShopSlotsStatus(status)),
    tap(() => (this.changingStatus = false))
  );

如果源(在这种情况下是changeSlotStatus$可观测物)发射，switchMap操作员将取消任何飞行中的可观测物。

我已经在Stackblitz中包含了exhaustMap和mergeMap的导入。将switchMap更改为这两个操作符，看看它们的工作方式有何不同。exhaustMap将忽略所有后续的发射，直到正在进行的发射完成，并且mergeMap将发出与按下按钮一样多的请求。我将留给您来决定哪种方法是最好的！您可以在learn rxjs.上了解更多信息，我建议您阅读有关RxJS和不同运算符的内容，以及如何使用pipe组合它们。RxJS是个好东西。

然后，如果您想要禁用正在运行的请求时按下的按钮，还可以绑定到changingStatus布尔值。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67972014

复制

【说站】python字符串的多行输出

编程算法 python

1、字符串的每行末尾使用 \ 续行。以多行的形式书写字符串，每行的末尾使用 \ 续行。

很酷的站长

2022/11/23

1.6K0