Question

我最近一直在学习Angular 4并且使用了＆＃34;英雄之旅＆＃34;教程here。

在Hero服务中，使用.pipe函数配置addHero方法，复制如下：

/** POST: add a new hero to the server */
addHero (hero: Hero): Observable<Hero> {
    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
        tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
        catchError(this.handleError<Hero>('addHero'))
    );
}

这一切都很好 - 现在组件可以调用this.heroService（heroObject）。然而，我遇到的问题是当它出错时会发生什么。是的，管道内的catchError处理它，但对我而言，组件似乎不知道发生了什么。如果那里的404和英雄从未被添加怎么办？在组件中，通过以下方式添加英雄：

add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.addHero({ name } as Hero)
        .subscribe(hero => {
            this.heroes.push(hero);
        });
}

对我来说，似乎如果发生错误，this.heroes.push（英雄）仍然会激活，并且我们会在组件的英雄阵列中错误地添加英雄。我如何配置它，以便在成功的帖子上，this.heroes.push（英雄）完成，并且在这种情况下，抛出错误（4xx，5xx等），而是显示警报（为简单起见）？

Answer 1

你可以试试这个：

add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.addHero({ name } as Hero)
        .subscribe(hero => {
            this.heroes.push(hero);
        }, error => {
            alert("Failed to get the hero.");
        });
}

在前面的代码段中，subscribe方法的第二个参数采用错误事件处理程序。并且只有在请求成功完成（200 Ok）时才会调用第一个参数。所以，没有机会让Hero添加不正确。

角度组件中的HTTP post回调

1 个答案: