如何在Angular2中拒绝承诺和处理/捕获错误

时间:2017-09-14 21:05:10

标签: angular typescript error-handling promise

我正在学习Angular2,并希望对服务中的方法进行适当的错误处理。

出于测试目的,我更改了API,因此我得到了无效的测试结果。我想拒绝Promise ("Received unexcepted data.")并将错误消息存储在我的angular-component中。

我的服务方式:

getBlocks(): Promise<Block[]> {
    return this.http.get(this.serviceUrl)
        .toPromise()
        .then(response => {
            if (response.json() instanceof Array) {
                return response.json() as Block[];
            } else {
                Promise.reject('Received unexpected data.');
            }
        })
        .catch(this.handleError);
}

private handleError(error: any): Promise<any> {
    console.log('An error occurred in MyService', error);
    return Promise.reject(error.message || error);
}

我称之为服务的组件:

getBlocks(): void {
    this.myService.getBlocks().then(blocks => {
        this.blocks = blocks;
    }, error => {
        console.log('fail callback');
        this.error = error;
    }).catch(e => {
        console.log('catch');
        this.error = e;
    });
}

我尝试实现承诺的失败回调,但我的应用程序一直在崩溃

  

错误错误:未捕获(在承诺中):收到意外数据。

所以有我的错误消息,但它没有在我的组件中正确处理。如何正确地从服务中捕获我的Promise.reject(),以便我可以将错误存储在this.error变量中。

其他问题: 我已经实现了then() - 调用的成功和失败回调。那之后的catch()是否必要?或者应该只在没有失败回调的情况下完成?或者这两个案例没有可比性?

2 个答案:

答案 0 :(得分:2)

如果你想在catch子句中捕获错误,你只需要:

throw new Exception("received unexpected...");

而不是拒绝承诺。

Promise.reject()有处理拒绝的文档。如果这是你想要的,你应该返回Promise.reject,所以无论什么期望一个承诺都可以抓住它。

答案 1 :(得分:2)

只需更改代码即可返回Promise.Reject

getBlocks(): Promise<Block[] | void> {
    return this.http.get(this.serviceUrl)
        .toPromise()
        .then(response => {
            if (response.json() instanceof Array) {
                return response.json() as Block[];
            } else {
                return Promise.reject('Received unexpected data.'); // HERE
            }
        })
        .catch(this.handleError);
}

我得到了以下结果:

  

MyService收到意外数据时发生错误。

     

失败回调