Angular 2 - 检查来自subscribe的服务器错误

Question

我觉得这种情况应该在 Angular 2 文档中出现，但我无法在任何地方找到它。

以下是情景:

1. 提交一个表单（创建对象），但该表单在服务器上无效
2. 服务器返回400错误请求和错误信息，我会在表单上显示这些错误信息
3. 订阅完成后，我想检查一个错误变量或其他内容（例如，如果没有错误 > 转到新创建的详细页面）

我想象它的工作方式如下：

this.projectService.create(project)
    .subscribe(
        result => console.log(result),
        error => {
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}

我对Angular 2非常陌生，可能是因为我不了解Observable的工作原理。我在表单上显示数据没有问题，但无法弄清楚如何在ts组件中查看它。我只是想检查http创建的成功或失败。

- Stephanie

Answer 1

根据相关的RxJS文档所述，.subscribe()方法可以接受第三个参数，在没有错误时称为完成回调函数。

参考资料：

1. [onNext] (Function)：对可观察序列中的每个元素调用的函数。
2. [onError] (Function)：当可观察序列异常终止时调用的函数。
3. [onCompleted] (Function)：当可观察序列优雅地终止时调用的函数。

因此，您可以在onCompleted回调函数中处理路由逻辑，因为它将在优雅终止时被调用（这意味着在调用它时不会有任何错误）。

this.httpService.makeRequest()
    .subscribe(
      result => {
        // Handle result
        console.log(result)
      },
      error => {
        this.errors = error;
      },
      () => {
        // 'onCompleted' callback.
        // No errors, route to new page here
      }
    );

---

顺带一提，还有一个.finally()方法，无论调用成功或失败，都会在请求完成后被调用。这可以在某些场景下很有帮助，比如你总是想在 HTTP 请求后执行一些特定的逻辑（例如记录日志或进行用户交互，如显示模态框）。

Rx.Observable.prototype.finally(action)

在源可观察序列正常或异常终止后调用指定的操作。

例如，以下是一个基本示例：

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/finally';

// ...

this.httpService.getRequest()
    .finally(() => {
      // Execute after graceful or exceptionally termination
      console.log('Handle logging logic...');
    })
    .subscribe (
      result => {
        // Handle result
        console.log(result)
      },
      error => {
        this.errors = error;
      },
      () => {
        // No errors, route to new page
      }
    );

- Josh Crozier

---

在我找到的关于可观察对象错误处理的所有答案中，这是最好的答案。谢谢 - Manuel Hernandez

还要记住，http 拦截器可以用来以更全面的方式处理这些错误-https://javascript.plainenglish.io/angular-handle-http-errors-using-interceptors-5cc483103740-因此您不必在每个订阅中处理它们。 - Mauricio Gracia Gutierrez

这种方法现在已经被弃用了。https://rxjs.dev/deprecations/subscribe-arguments - Raymond Chen

Answer 2

请注意，自6.4版本起，具有回调函数的先前语法已被废弃，并将在8.0版中被删除。请改用：

of([1,2,3]).subscribe(
    (v) => console.log(v),
    (e) => console.error(e),
    () => console.info('complete') 
)

现在应该使用什么

of([1,2,3]).subscribe({
    next: (v) => console.log(v),
    error: (e) => console.error(e),
    complete: () => console.info('complete') 
})

https://rxjs.dev/deprecations/subscribe-arguments

- Steffen

---

截至2022年，最可靠的答案。谢谢分享！ - Devner

Answer 3

您可以通过以下方式实现

    this.projectService.create(project)
    .subscribe(
        result => {
         console.log(result);
        },
        error => {
            console.log(error);
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}

- Pramod Patil

Answer 4

2022 年更新的 RxJS 方法

this.projectService.create(project)
    .subscribe({
      next: (data)=>console.log('data',data),
      error: (err)=>console.log('error',err),
      complete:()=>console.log('complete')
    });

- Samit Sinha