SuperAPI AI 工具集

angular-http

前端与建站

查看项目

更新于 10-19 16:18

技能介绍

Angular HTTP 数据获取技能,面向 Angular v20+,提供三种数据获取方式的代码示例。

用途:在 Angular 应用中实现 API 调用与数据加载,既支持新的信号式资源 API,也兼容传统 HttpClient 写法。

主要能力:

  1. httpResource():基于信号的 HTTP 封装,可传简单 URL 或包含 url、method、headers、params 的完整请求配置,支持 defaultValue 默认值、参数为 undefined 时跳过请求,并提供 value()、hasValue()、error()、isLoading()、status() 等状态信号和 reload()、set()、update() 操作。
  2. resource():用于非 HTTP 的通用异步操作或自定义 fetch 逻辑,通过 params 响应式参数触发重新加载,loader 接收 params 与 abortSignal,支持默认值和条件加载。
  3. HttpClient:传统方式,含 GET、POST、PUT、PATCH、DELETE 示例,请求头、查询参数、observe、responseType 等选项,并可用 toSignal 转为信号。
  4. 拦截器:函数式拦截器示例,包括添加鉴权头、401 跳转登录、请求耗时日志,以及通过 provideHttpClient(withInterceptors([...])) 注册。
  5. 错误处理:httpResource 的错误消息解析,HttpClient 配合 retry 与 catchError 的重试处理;另有基于 status() 的 idle/loading/reloading/resolved/error 加载状态模板模式。

使用方式:按资料中的代码示例在组件或服务中声明资源、注入 HttpClient、编写并注册拦截器;资料未提供安装命令或额外配置步骤。

适用场景:需要在 Angular v20+ 中以信号方式加载 API 数据、处理请求状态与错误、统一拦截请求的开发者。

限制:资料仅覆盖上述示例,未说明版本兼容细节、测试方式或其它高级模式,仅提示可参阅 references/http-patterns.md。