javascript - 当 http get 请求状态返回 404 时显示 Angular Material mat-error

Question

我找不到执行此操作的方法。如果 http get 请求失败(状态 = 404)，我想在我的输入表单上显示一个 mat-error。

我有一个搜索表单，每次用户搜索不存在的内容时，我都想显示 mat-error 告诉用户他的搜索无效。

这是我的客户端代码:

休息.服务.ts

private extractData(res: Response) {
  let body = res;
  return body || { };
}

getOrder(id): Observable<any> {
  return this.http.get(endpoint + 'orders/' + id, httpOptions).pipe(
    map(this.extractData));
}

getReturns(): Observable<any> {
  return this.http.get(endpoint + 'returns', httpOptions).pipe(
    map(this.extractData));
}

MyComponent.component.ts

这里我有 getReturnByOrderID 函数来检查响应数据是否为空。如果不是，那么我会打开一个垫子对话框，它将引导我到我网站的其他部分，但是，如果它是空的，那么我应该警告用户他搜索的内容不存在。

我还使用 getErrorMessage() 函数来处理所有表单错误。

private inputForm = new FormControl('', [Validators.pattern(/^\d+$/)]);

constructor(public rest: RestService, private route: ActivatedRoute, private router: Router, public dialog: MatDialog) { }

getReturnByOrderId(value) {
  if (value.length > 0) {
    this.rest.getOrder(value).subscribe((data: {}) => {
      if (Object.entries(data).length !== 0) {
        this.openDialog(data);
      } else {
        //if 404, do something here
      }
    });
  } else {
    this.rest.getReturns().subscribe((data: {}) => {
      this.returns = data;
    });
  }
}

openDialog(el) {
  const dialogRef = this.dialog.open(MyDialogComponent, {
    width: '70%',
    data: el
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log(`Dialog result: ${result}`);
  });
}

getErrorMessage() {
  return this.inputForm.hasError('pattern') ? 'Insert numeric value!' : '';
  // if the get request fails I'd have a message here saying "The order you searched for doesn't exist!"
}

MyComponent.component.html

<div class="row">
  <div class="col-2"></div>
  <div class="col-8">
    <mat-form-field class="search-form-field" appearance="outline">
      <mat-label>Search</mat-label>
      <input matInput class="search-input" placeholder="Search" [formControl]="inputForm" #searchInput>
      <mat-error *ngIf="inputForm?.invalid">{{ getErrorMessage() }}</mat-error>
      <mat-hint>Insert an order ID.</mat-hint>
    </mat-form-field>
    <span matSuffix>
      <button mat-raised-button class="search-btn" color="accent" [disabled]="inputForm?.invalid" (click)="getReturnByOrderId(searchInput.value)"><i class="fa fa-search"></i></button>
    </span>
  </div>
  <div class="col-2"></div>
</div>

我不确定我的服务器端代码是否有用，如果有人需要它我会编辑我的问题...

关于我如何实现这一点有什么建议吗？感谢您的帮助!

Answer 1

当服务器返回 404 状态代码时，在这种情况下，您的订阅 block 将不会执行。所以您需要编写错误 block ，您可以在其中处理 404 错误并将表单设置为无效，如下所示。

getReturnByOrderId(value) {
  if (value.length > 0) {
    this.rest.getOrder(value).subscribe((data: {}) => {
      if (Object.entries(data).length !== 0) {
        this.openDialog(data);
      } else {
         // if data is empty show 
        this.inputForm.setErrors({ 'invalid': true });
      }
    }, error => {
        //when 404 error 
        this.inputForm.setErrors({ 'invalid': true });

    });
  } else {
    this.rest.getReturns().subscribe((data: {}) => {
      this.returns = data;
    });
  }
}

希望这会有所帮助!