Angular 9 Rx Js с использованием zip - PullRequest
Новая
       13

Angular 9 Rx Js с использованием zip

0 голосов
/ 13 июля 2020

Мне не очень нравится rxjs, но я пытаюсь научиться! У меня есть (потенциально) два HTTP-вызова, которые я должен сделать при регистрации пользователя, если какой-либо из них не сработает, я хочу предупредить пользователя. Если создать пользователя не удается, я не хочу, чтобы он выполнял следующий HTTP-вызов.

Я думал, что это будет работать так: 

public onSubmit(): void {
  this.loading = true;

  var user = {
    userName: this.f.email.value,
    email: this.f.email.value,
  };

  var observables = [
    this.userService.create(user, `${location.origin}/add-password`),
  ];
  var brandName = this.f.brand.value;
  var brand = this.brands.find((brand) => brand.name === brandName);

  if (brand) {
    observables.push(this.brandService.create(brand));
  }

  zip(observables).subscribe(
    () => {
      this.loading = false;
    },
    (response: any) => this.handleValidationError(response, this.snackBar)
  );
}

Но когда я отправляю свое приложение, подписка никогда не разрешается. Я уверен, что то, что я делаю неправильно, очень просто исправить, может ли кто-нибудь мне помочь?

Ответы [ 2 ]

1 голос
/ 13 июля 2020 
  this.loading = true;

  var user = {
    userName: this.f.email.value,
    email: this.f.email.value,
  };

  this.userService.create(user, `${location.origin}/add-password`)
    .pipe(
      switchMap(() => {
        var brandName = this.f.brand.value;
        var brand = this.brands.find((brand) => brand.name === brandName);

        return brand ? this.brandService.create(brand) : of(null)
      })
    ).subscribe(() => {
      this.loading = false;
    }, (response: any) => this.handleValidationError(response, this.snackBar));

switchMap похоже на промежуточное программное обеспечение перед вызовом subscribe, если this.userService.create сработал успешно. Он вернет observable, поэтому, если бренд доступен, он запустит this.brandService.create(brand), но если нет, он просто вернет observable со значением null.

0 голосов
/ 13 июля 2020

Благодаря недоброжелательному ответу мне удалось сделать это вот так: 

public onSubmit(): void {
  this.loading = true;

  var brandName = this.f.brand.value;
  var brand = this.brands.find((brand) => brand.name === brandName);
  var createUser = this.userService.create(
    {
      userName: this.f.email.value,
      email: this.f.email.value,
    },
    `${location.origin}/add-password`
  );

  if (!brand) {
    var createBrand = this.brandService.create(brand);

    zip(createUser, createBrand).subscribe(
      () => {
        this.loading = false;
      },
      (response: any) => this.handleValidationError(response, this.snackBar)
    );
  } else {
    createUser.subscribe(
      () => {
        this.loading = false;
      },
      (response: any) => this.handleValidationError(response, this.snackBar)
    );
  }
}

Как я уже упоминал, rx js для меня ново, поэтому я не уверен, что это лучший способ справиться с этим. Но это работает.

...