angular - 按顺序处理请求

Question

主要目标是按顺序处理我的请求。我输入了扫描仪快速扫描值的输入。但有时服务器返回数据很慢，如果我扫描速度非常快，服务器就会崩溃并返回 500。我的想法是按顺序处理这个请求。我试图找到一些解决方案，但没有找到我想要的。我不知道我是否应该使用一些拦截器，或者将它保存在服务或组件中。

我试图在拦截器中找到解决方案，但是我没有找到请求何时完成以及拦截器可以处理下一个请求的时间。我尝试使用 rxjs 运算符，但我不知道如何将其合并到我的解决方案中。这是我想在我的解决方案中做的例子

from([1, 2, 3, 4])
  .pipe(
    concatMap(param =>
      this.http.get(
        `http://localhost:6013/api/v1/test/buffer?data=${param}`
      )
    )
  )
  .subscribe(res => console.log(res));

从运算符(operator)那里可以观察到我的请求，然后 ConcatMap 顺序处理它

有我的骨架应用

应用程序组件.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, Validators } from '@angular/forms';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  form = this.fb.group({
    input: ['', Validators.required]
  });

  makeRequest$ = new Subject();
  constructor(private http: HttpClient, private fb: FormBuilder) {}

  onSubmit() {
    this.http
      .get(
        `http://localhost:6013/api/v1/test/buffer?data=${
          this.form.controls.input.value
        }`
      )
      .subscribe(res => {
        console.log(res);
      });

    this.form.reset();
  }

  ngOnInit() {}
}

应用程序拦截器.ts

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AppInterceptor implements HttpInterceptor {
  arrayRequest: Array<HttpRequest<any>> = [];

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req);
  }
}

app.components.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <label>
    Data:
    <input type="text" formControlName="input" />
  </label>

  <button type="submit" [disabled]="!form.valid">Submit</button>
</form>

我排除了上面的代码。 ConcatMap 按顺序处理请求，但我不知道我应该如何处理请求以及我应该如何选择方向。

Answer 1

据我了解您的问题，您需要按顺序执行 api 请求 onSubmit。 在您的情况下，您需要 rxjs Subject 才能实现预期的行为。我修改了您的组件，以便您查看 ngOnInit 和 onSubmit 函数。

makeRequest$ is now Observable, where new events arrive on every onSubmit method call. You can use concatMap to sequentially send api requests and also you can use delay operator to pause for some time after request has finished so that server is not getting hit too much.

另请查看unsubscribe$ 和 takeUntil(this.unsubscribe$) <- 这些用于在组件销毁后释放内存，以避免内存泄漏。这是这样做的最佳做法之一。

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { FormBuilder, Validators } from "@angular/forms";
import { Subject } from "rxjs";
import { concatMap, takeUntil, delay } from "rxjs/operators";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  public form = this.fb.group({
    input: ["", Validators.required]
  });

  private makeRequest$ = new Subject();
  private unsubscribe$ = new Subject();

  constructor(private http: HttpClient, private fb: FormBuilder) {}

  ngOnInit() {
    this.makeRequest$
      .pipe(
        delay(500),
        concatMap(item =>
          this.http.get(`http://localhost:6013/api/v1/test/buffer?data=${item}`)
        ),
        takeUntil(this.unsubscribe$)
      )
      .subscribe();
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  public onSubmit() {
    this.makeRequest$.next(this.form.controls.input.value);
    this.form.reset();
  }
}