时间戳

首页 > 解决方案 > 如何在订阅功能上捕获错误？

javascript - 如何在订阅功能上捕获错误？

问题描述

我有这个功能来上传我的文件fileUploadService：

fileUpload(formData: any) {
    return this.http.post(`${this.apiUrl}/upload`, formData, {
      reportProgress: true,
      observe: 'events'
    }).pipe(
      map(event => this.getEventMessage(event))
    );
  }

  private getEventMessage(event: HttpEvent<any>) {
    switch (event.type) {
      case HttpEventType.UploadProgress:
        return this.fileUploadProgress(event);
      case HttpEventType.Response:
        return event.body;
      default:
        return `Upload event: ${event.type}.`;
    }
  }

  private fileUploadProgress(event: any) {
    const percentDone = Math.round(100 * event.loaded / event.total);
    return { progress: percentDone, files: [] };
  }

在我的一个组件上，我将这段代码称为：

this.fileUploadService.fileUpload(formData).subscribe(
          result => {
            this.upload = result;
          }
        )

现在我的问题是，如果网络服务器抛出错误，因此 http post 函数失败并且需要被捕获，我如何才能在我的组件中而不是在服务中捕获错误？

标签： javascriptnode.jsangulartypescript

解决方案

Observables 发出三种类型的事件：next、complete和error。.subscribe()方法接受所有三种类型的侦听器作为参数列表：

subscribe(next?: ((value: T) => void) | null, error?: ((error: any) => void) | null, complete?: (() => void) | null)

或作为类型的单个对象参数Partial<Observer<T>>：

subscribe(observer?: Partial<Observer<T>>)

Observer<T>具有三个属性：

export interface Observer<T> {
  complete: () => void;
  error: (err: any) => void;
  next: (value: T) => void;
}

这意味着您有两个选项来传递下一个和错误处理程序。要么使用：

.fileUpload(formData).subscribe(
  result => console.log('Success!', result),
  error => console.log('Error :(', error),
)

或者：

.fileUpload(formData).subscribe({
  next: result => console.log('Success!', result),
  error: error => console.log('Error :(', error),
})

第二种变体在社区中更可取。

推荐阅读