使用angular 6中的自定义错误处理更新组件

阿努伊(Anuj)TBE

我正在使用Angular 6

我创建了一个自定义的错误处理程序,将ErrorHandler扩展为可处理所有网络错误。

import {ErrorHandler, Injectable, Injector} from '@angular/core';
import {HttpErrorResponse} from '@angular/common/http';
import {Router} from '@angular/router';
import {ErrorsService} from '../errors-service/errors.service';
import {ToastrService} from 'ngx-toastr';

@Injectable()
export class ErrorsHandler implements ErrorHandler {

  constructor (
    private injector: Injector,
    private toastr: ToastrService
  ) {}

  handleError(error: Error | HttpErrorResponse) {

    const errorsService = this.injector.get(ErrorsService);

    const router = this.injector.get(Router);

    if (error instanceof HttpErrorResponse) {
      if (!navigator.onLine) {
        // Handle offline error

      } else {
        // Handle HTTP Error
        console.log('Http Error occurred');
        errorsService.log(error);

        if (error.status === 403 || error.status === 401) {
          // Clear credentials to login again
          router.navigate(['/auth/logout']).then();
        }

        if (error.status === 400) {
          if (error.error !== null) {
            // Handle 400 errors
            // Generally validation error.
          }
        } else if (error.status === 404) {
          // resource not available
          message = 'Requested resource does not exists';
        } else {
          // handle other type of errors
          message = `${error.status} - ${error.message}`;
        }

      }
    } else {
      // Client Error Happened
      // Send the error to the server and then
      // redirect the user to the page with all the info
      console.log('Not HttpError occurred');
      errorsService.log(error);
    }
  }
}

该处理程序按预期处理所有错误。但在组件的HTML,提交的按钮在状态禁用提交的类似

export class SignupComponent implements OnInit {

  form: FormGroup;
  submitted = false;

  constructor(
      private fb: FormBuilder,
      private auth: AuthService
  ) { }

  ngOnInit() {
    // Initialize form
    this.form = this.fb.group({});
  }

  /**
   * Submit form
   */
  onSubmit() {
    this.submitted = true;

    if (this.form.invalid) {
      this.submitted = false;
      return;
    }

    this.auth.register(this.form.value).subscribe(
        () => {
          // Handle success 200 response
          this.submitted = false;
        }
    );
  }
}

在上述情况下,onSubmit()向服务发出请求并进行订阅。

我想在请求/响应完成后将提交的标志重置false处理成功响应和重置提交标志很容易但是由于错误是由自定义错误处理程序处理的,因此如何重置submitted标志?

如果我将错误处理放入组件中,那么自定义错误处理程序将停止工作。另外,如果我避免使用自定义错误处理程序,那么我将不得不在每个订阅中编写重复的代码来处理所有类型的错误,例如403、404、500等。

AJT82

假设您使用的是rxjs 6,也许您可​​以使用finalize在发生错误/成功后运行的rxjs,如下所示:

this.auth.register(this.form.value).pipe(
  finalize(() => this.submitted = false)
)
.subscribe(() => {
  // handle succecss 200 response
})

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用自定义错误结构和结构验证实现错误处理?

使用自定义错误处理程序时如何从中止命令访问错误消息

Click:如何使用Click自定义“错误:无此类命令xx”错误处理?

如何在 angular2 的不同模块中使用自定义错误处理程序服务

Angular 6中的HTTP错误处理

使用自定义(ConsumerAware)错误处理程序时如何查找和提交?

如何使用Retroift2实现自定义错误处理

C#asp.net MVC使用JSON进行自定义错误处理

我可以同时使用mod_rewrite和apache自定义错误处理吗?

使用自定义错误处理程序中止多步承诺链

Angular 6自定义输入组件

如何在Angular 6中使用ngModel创建自定义输入组件?

在我的自定义 Integromat 应用程序中使用不同的错误结构进行错误处理

在 Angular 7 中的自定义组件上使用 ngClass

在 Angular 中自定义共享组件

使用自定义消息处理错误?

如何在 Angular 6 中实现与 forkJoin 一起使用的通用错误处理?

Angular 6 - 自定义模态窗口内的嵌套组件

使用访存和ES6 Promise处理自定义错误的最干净方法

自定义组件值未使用 Angular Reactive Form 更新

具有自定义列的自定义Angular 6材质表组件

Mendix错误处理中的自定义错误

我可以使用自定义的前调度,后调度和错误处理程序代码包装所有JAX-RS请求吗?

如何使用Angular自定义Web组件设置顺风

Angular 在多个 ngModules 中使用自定义组件

Go中的自定义错误处理

Express.js中的自定义错误处理

python中自定义异常的错误处理

Angular 6错误处理-HttpErrorResponse具有未定义的状态