Angular 2 - 从订阅检查服务器错误

时间:2017-02-08 04:19:11

标签: http angular subscribe

我觉得这个场景应该在Angular 2文档中,但我无法在任何地方找到它。

这是方案

  1. 提交在服务器上无效的表单(创建对象)
  2. 服务器返回400错误请求,错误显示在表单
  3. 在订阅返回后,我想检查一个错误变量或其他东西(即如果没有错误>然后路由到新创建的详细信息页面)
  4. 我想它的工作方式是这样的:

    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 create的成功/失败。

2 个答案:

答案 0 :(得分:88)

如相关的RxJS文档中所述,如果没有错误,.subscribe() method可以采用在完成时调用的第三个参数。

供参考:

  
      
  1. LinearLayoutandroid:background="?android:attr/windowBackground"):为可观察序列中的每个元素调用的函数。
  2.   
  3. [onNext]Function):在可观察序列的异常终止时调用的函数。
  4.   
  5. [onError]Function):在可观察序列的优雅终止时调用的函数。
  6.   

因此,您可以在[onCompleted]回调中处理路由逻辑,因为它会在正常终止时被调用(这意味着在调用时不会出现任何错误)。

Function

作为旁注,无论呼叫是成功还是失败,都会在完成时调用.finally() method。在您总是希望在HTTP请求之后执行某些逻辑而不管结果的情况下(例如,用于记录目的或某些UI交互,例如显示模态),这可能会有所帮助。

  

onCompleted

     

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

例如,这是一个基本的例子:

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

答案 1 :(得分:4)

您可以通过以下方式实现

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

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