Angular Tour of Heroes getHeroNo404()

最新推荐文章于 2025-08-11 19:52:03 发布

weixin_30672019

最新推荐文章于 2025-08-11 19:52:03 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/edhg/p/10221003.html

本文详细介绍了在Angular项目中，如何正确处理HTTP请求返回的错误情况，特别是在获取特定英雄信息时，避免因返回多个结果导致的错误显示。通过调整HTTP请求方法，将返回的列表转换为期望的单一结果或未找到的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在完成6.HTTP后 , 然后我把getHero全局替换为了getHeroNo404()
请求链接 http://127.0.0.1:4200/detail/1, 应该返回HeroService: did not find hero id=1, 实际是返回了id为11的英雄
通过debug发现当请求http://127.0.0.1:4200/detail/1时, http.get返回的是一个id包含1的列表
学到老活到老, 原来http.get返回的是一个包含参数的列表, 而不是完全的匹配
修改方法, 修改map里的内容

getHeroNo404(id: number): Observable<Hero> {
    const url = `${this.heroesUrl}/?id=${id}`;
    return this.http.get<Hero[]>(url)
      .pipe(
        //原代码: map(heroes => heroes[0]),
        map(heroes => heroes.length === 1 ? heroes[0] : undefined),
        tap(h => {
          const outcome = h ? `fetched` : `did not find`;
          this.log(`${outcome} hero id=${id}`);
        }),
        catchError(this.handleError<Hero>(`getHero id=${id}`))
      );
  }

转载于:https://www.cnblogs.com/edhg/p/10221003.html