【Angular学习笔记】Angular基本原理 HttpClient
Angular入门开发指南,学习重点知识笔记。
Angular 基本原理 HttpClient
参考文档:https://angular.cn/guide/http
为什么要写服务?
在实战中,数据访问很少能一直这么简单。你通常要对数据做后处理、添加错误处理器,还可能加一些重试逻辑,以便应对网络抽风的情况。
该组件很快就会因为这些数据方式的细节而变得杂乱不堪。组件变得难以理解、难以测试,并且这些数据访问逻辑无法被复用,也无法标准化。
这就是为什么最佳实践中要求把数据展现逻辑从数据访问逻辑中拆分出去,也就是说把数据访问逻辑包装进一个单独的服务中,并且在组件中把数据访问逻辑委托给这个服务。就算是这么简单的应用也要如此。
读取完整的响应体
响应体可能并不包含你需要的全部信息。有时候服务器会返回一个特殊的响应头或状态码,以标记出特定的条件,因此读取它们可能是必要的。
要这样做,你就要通过observe选项来告诉HttpClient,你想要完整的响应信息,而不是只有响应体。
发起JSONP请求
当服务器不支持CORS协议时,应用程序可以使用HttpClient跨域发出JSONP请求。
Angular的JSONP请求会返回一个Observable,遵循订阅可观察对象变量的模式,并在使用ansync管道管理结果之前,使用RxJS map 运算符转换响应。
在Angular中,通过在NgModule的imports中包含HttpClientJsonpModule来使用JSONP。
获取错误详情
在数据访问失败时给用户一些反馈,确实是个好主意。不过,直接显示由HttpClient返回的原始错误数据还远远不够。
检测错误的发生是第一步,不过如果知道具体发生了什么错误才会更有用。
可观察对象(Observable)与操作符(operator)
RxJS是一个库,用于把异步调用和基于回调的代码组合成函数式(functional)的、响应式(reactive)的风格。
很多Angular API,包括HttpClient都会生成和消费RxJS的Observable。
RxJS本身超出了本章的范围。你可以在网络上找到更多的学习资源。虽然只用少量的RxJS知识就可以获得解决方案,不过以后你会逐步提高RxJS技能,以便更高效的使用HttpClient
HTTP标头
许多服务器需要额外的标头进行保存操作。例如,它们可能需要Content-Type标头来显式声明请求正文的MIME类型;否则服务器可能需要一个授权令牌。
添加请求头
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~